关于网页的自适应问题一---Media Query（媒介查询）

一、Media Query（媒介查询）

经过不一样的媒介类型和条件定义样式表规则。媒介查询让CSS能够更精确做用于不一样的媒介类型和同一媒介的不一样条件。媒介查询的大部分媒介特性都接受min和max用于表达”大于或等于”和”小于或等于”。如：width会有min-width和max-width媒介查询能够被用在CSS中的@media和@import规则上，也能够被用在HTML和XML中。经过这个标签属性，咱们能够很方便的在不一样的设备下实现丰富的界面，特别是移动设备，将会运用更加的普遍。

用法

@media 设备名 only （选取条件） not （选取条件） and（设备选取条件），设备二{sRules}

 

CSS的@media与@media screen，媒体查询/匹配

媒体查询也是css3的方法，咱们要解决的问题是适应手机屏幕，这个媒体查询正是为解决这个问题而生。

媒体查询的功能就是为不一样的媒体设置不一样的css样式，这里的“媒体”包括页面尺寸，设备屏幕尺寸等。

首先先讲一下@media与@media screen区别

@media与@media screen二者在手机设备上没有区别，但@media screen的css在打印设备里是无效的，而@media在打印设备里是有效的，若是css须要用在打印设备里，那么就用@media 。【阿里云】上有实例讲解哦~~

语法

以@media或@media screen and开头来表示这是一条媒体查询语句。@media后面的是一个或者多个表达式，若是表达式为真，则应用样式。

@media

@media (max-width: 600px) {
.mainner {
display: none;
}
}

上面的代码在屏幕宽度小于 600px 的时候，会做用大括号里的内容。

注：max-width是目标显示区域的宽度，例如，浏览器宽度。

媒体查询能够在 link标签上加media属性或css文件中使用。具体例子就不举了。

@media screen

如下例子为当屏幕宽度小于400px的时候，就取消浮动

@media screen and (max-device-width: 400px)
{ .left {
float:none;
}
}

注：max-device-width是设备整个显示区域的宽度，例如，真实的设备屏幕宽度。

知识扩展

@media only screen and
only(限定某种设备)
screen 是媒体类型里的一种
and 被称为关键字，其余关键字还包括 not
not 指定某种特定的媒体类型，能够用来排除不支持媒体查询的浏览器：

例如：若是浏览器窗口小于 500px, 背景将变为浅蓝色：

@media only screen and (max-width: 500px) {
body {
background-color: lightblue;
}
}

 

原文出处：https://www.cnblogs.com/chenguanai/p/10936580.html