媒体查询完整版

媒体查询的媒体特性

有max-width和min-width，和width一样不过width：100px，表示的是视口宽度必须等于这个值，且后面写的单位写vh/vw没效果，必须前面写100，要不全部视口都可以要不全部视口都不行，我们要得是某一个/某一些视口，所以单位rem，表示html字号，html的字号要最后才能决定所以rem不行，所以只能用px，max-width：value，和视口宽度<=value,视口宽度就可以。且媒体特性外面必须要加括号，要不无效，即使媒体特性只要1个，媒体特性一定得有啊。要不然这个什么时候才能有效。max-width/min-width为了避免相同权重的css覆盖，我们最好按最小宽度，从小到大，最大宽度，从大到小。当给某一个标签设置了两个视口宽度条件的CSS，这两个CSS必是不同，如果相同，不会这样设计，所以必是不同，如果是值显示一个，那另一个没必要写，所以写两个且相同的CSS，就是为了让不同，按下面顺序写。pc端和移动端都是有视口的，浏览器的视口可变，拉动即可变，或者F12展示出来控制台也会变，我们给一份html代码，之后随时控制。

display：none

被设置成这个的盒子，浏览器不在解析，根本不会显示在网页。只是写在文件当中的代码。

媒体查询选择器引入

flexible.js库可以给html标签设置字号，但是如果我们需要写其他的代码，在某些视口，则还是要写媒体特性，但是如果媒体特性下的CSS选择器很多，可以用下面的代码。写media属性，link是stylesheet属性，引入，但是当写了media属性，则这些相当于写了媒体查询，如果没有media，则相当于在写了style标签，在下面写了css，但是及media，多加了媒体查询。

媒体查询完整写法

中间的and是连接两个条件，关键词是和后面的媒体类型有关的，但是关键词and只是连接两个条件哦，only是仅仅，not不是，这些关键词只能用在媒体类型前面，当我们只写媒体特性，也需要加（），不用写and，这种情况默认会是all and （媒体特性），可以只写媒体查询不写媒体类型。也可以不写关键词，默认是only。一个小括号内只能写一个媒体特性的条件，多个条件用and。