css的mediaquery查询几种不生效的原因

今天上午搞了半个小时，在webstrom中修改了css样式，用chrom浏览器浏览不生效，在网上查了半天，看是不是webstrom的有写保护，或者chorm浏览器不支持，最后发现少and后面少了一个空格导致css mediaquery查询不生效，即使在chrom中的network中css样式文件已经被加载了。

@media screen and 不起作用原因汇总。

首先确认是不是css本身的问题，而不是媒体查询没有生效；例如

div{display:flex;}/*那么div所有的display效果都将无法生效*/

最近有网友求助说@media怎么都不生效，于是代码css都发给我了，我检查也没有问题，几番折腾之后才发现这哥们外联样式引入css使用的src，这种粗心的错误，一定要自行检查清楚。

<link src="/css/imgpro.css" rel="stylesheet" > /*这是错误的*/
<link href="/css/imgpro.css" rel="stylesheet" >/*这是正确的*/

如果是css问题，只能具体问题具体分析。

请按照下面的几种错误进行排查。

第一种错误：格式书写错误and后面必须有空格例如下面代码；

@media screen and (max-width:500px){ }

第二种错误：样式冲突；@media查询代码的样式被后面的css所覆盖

注意：建议在书写css的过程中，@media查询带的css写在后面，以免这样避免被前面的css覆盖

第三种错误：css本身出了问题导致css不生效

注意：这是一种很常见的错误，例如块元素浮动导致父级元素没有高度；此时给父元素加背景颜色发现没有生效，实际上是css导致的错误，而没有显示。

例如css选择的优先级也会导致对其中一种生效另外一种不生效，等等css错误导致的问题也非常多，就不一 一列举了。

第四种错误：meta属性viewport属性，这个虽然基本常识，应该也会有人漏掉

<meta name="viewport" content="width=device-width, initial-scale=1" />

第五种错误：括号中的内容内容不能写结束符“;”，以及其它错误。

解决办法：

有很多解决方法，但是建议可以是用css排除法，使用css注释掉一部分；

当然浏览器也是一个很好的查看代码解决问题的方法。

结构写错，关于结构问题，大家可以参考一下详细的说明，也是一种提升认识。

任何不懂得，请在下面留言，我会第一时间回复你

@media screen and (max-width:200px){
/*这只是一个示例*/
}

下面就详细的给大家介绍一些关于css@media的作用。

在CSS2只有media types可用，而在CSS3则包括了media types与media feature两主部分合称叫做media queries，可用来判断浏览器、平板、手机的宽度作相对应的处理， 语法为

@media not|only mediatype and (media feature) {
    CSS-Code;
}

mediatype通常以screen实用居多，media feature则以min-width或max-width实用居多。   1、media queries查询条件的使用 Query的语法只有四项：and、or、not、only (1)、and 如果User Angent为screen且Browser宽度为 500px (含) 以上，就套用这css设定：

@media screen and (min-width:500px) {
    CSS-Code;
}

(2)、or or用法在这里是以逗号表示 如果User Angent为screen且Browser宽度为 500px (含) 以上， 或是彩色投影机时，就套用这css设定。请注意，and优先权比or高。

@media screen and (min-width:500px) , projection and (color) {
    CSS-Code;
}

(3)、not not意思為負邏輯， 彩色螢幕不會套用 css 設定，彩色印表機會套用 css 設定

@media not screen and (color), print and (color) {
    CSS-Code;
}

换个写法可以厘清and、or、not运算元的优先权

@media (not (screen and (color))), print and (color) {
    CSS-Code;
}

(4)、only 如果你事先知道特定的User Angent不支援你写的CSS-Code的时候， 这时你就可以使用only来避开他，并专心让支援你写的CSS-Code的User Angent来执行即可。 如下意思为，具有彩色萤幕的User Angent直接使用我写的CSS-Code(example.css)， 至于其他型态的User Angent不需判断一概跳过。

<link rel="stylesheet" media="only screen and (color)" href="example.css" />

其结果会和没有关键字「only」一样，但判断过程可是有差别的。

<link rel="stylesheet" media="screen and (color)" href="example.css" />

Media Types如下表：

Value	Description
all	Used for all media type devices
aural	Deprecated. Used for speech and sound synthesizers
braille	Deprecated. Used for braille tactile feedback devices
embossed	Deprecated. Used for paged braille printers
handheld	Deprecated. Used for small or handheld devices
print	Used for printers
projection	Deprecated. Used for projected presentations, like slides
screen	Used for computer screens, tablets, smart-phones etc.
speech	Used for screenreaders that "reads" the page out loud
tty	Deprecated. Used for media using a fixed-pitch character grid, like teletypes and terminals
tv	Deprecated. Used for television-type devices

media feature如下表

Value	Description
aspect-ratio	Specifies the ratio between the width and the height of the display area
color	Specifies the number of bits per color component for the output device
color-index	Specifies the number of colors the device can display
device-aspect-ratio	Specifies the ratio between the width and the height of the device
device-height	Specifies the height of the device, such as a computer screen
device-width	Specifies the width of the device, such as a computer screen
grid	Specifies whether the device is a grid device or not
height	Specifies the height of the display area, such as a browser window
max-aspect-ratio	Specifies the maximum ratio between the width and the height of the display area
max-color	Specifies the maximum number of bits per color component for the output device
max-color-index	Specifies the maximum number of colors the device can display
max-device-aspect-ratio	Specifies the maximum ratio between the width and the height of the device
max-device-height	Specifies the maximum height of the device, such as a computer screen
max-device-width	Specifies the maximum width of the device, such as a computer screen
max-height	Specifies the maximum height of the display area, such as a browser window
max-monochrome	Specifies the maximum number of bits per "color" on a monochrome (greyscale) device
max-resolution	Specifies the maximum resolution of the device, using dpi or dpcm
max-width	Specifies the maximum width of the display area, such as a browser window
min-aspect-ratio	Specifies the minimum ratio between the width and the height of the display area
min-color	Specifies the minimum number of bits per color component for the output device
min-color-index	Specifies the minimum number of colors the device can display
min-device-aspect-ratio	Specifies the minimum ratio between the width and the height of the device
min-device-width	Specifies the minimum width of the device, such as a computer screen
min-device-height	Specifies the minimum height of the device, such as a computer screen
min-height	Specifies the minimum height of the display area, such as a browser window
min-monochrome	Specifies the minimum number of bits per "color" on a monochrome (greyscale) device
min-resolution	Specifies the minimum resolution of the device, using dpi or dpcm
min-width	Specifies the minimum width of the display area, such as a browser window
monochrome	Specifies the number of bits per "color" on a monochrome (greyscale) device
orientation	Specifies the whether the display is in landscape mode or portrait mode
resolution	Specifies the resolution of the device, using dpi or dpcm
scan	Specifies progressive or interlaced scanning of a television
width	Specifies the width of the display area, such as a browser window

二、max-width、min-width用法

<html><head>
    <style>
        body {
            background-color: lightgreen;
        }

        @media screen and (max-width: 300px) {
            body {
                background-color: lightblue;
            }
        }
    style>head><body>

    <p>Resize the browserwindow. When the width of this document is less than 300 pixels, the background-color is "lightblue", otherwise it is "lightgreen".p>body>html>

JS Bin 此范例的作用是当@media type为screen(computer、table、smart-phone)画面 小于等于300px时背景色为lightblue，大于300px以外为背景色亮绿色。   如果换成min-width呢?

@media screen and (min-width: 300px) {
    body {
        background-color: lightblue;
    }}

大于等于300px时背景色为lightblue，小于300px以内为背景色亮绿色。   所以min-width:300px可以解释的为宽度不低于300px则do somthing； max-width:300px可以解释为宽度不高于300px则do somthing。 这简直就是反逻辑嘛!!!一点都不好理解(怒)   三、IE trick 虽然IE11可以使用Media queries， 但需注意其格式，多一个空白都不行，机车的很。

/*IE11接受landscape後面沒空白*/@media screen and (orientation: landscape) {
    body {
        background-color: red;
    }}/*IE11不接受landscape後面有空白*/@media screen and (orientation: portrait ) {
    body {
        background-color: blue;
    }}

重复写@media第二个也会不生效，什么意思呢？

比如前面已经写过了@media （max-width:776px）{}后面根据需要又写了一个。那么第二个就不会生效的。

转载：https://www.5zzu.com/post/8.html