有关CSS3中的media媒体查询

最新推荐文章于 2024-03-11 09:12:23 发布

Eason_Severus

最新推荐文章于 2024-03-11 09:12:23 发布

阅读量4.2k

点赞数 2

文章标签：响应式 html css3 媒体查询移动端

本文链接：https://blog.csdn.net/Eason_Severus/article/details/53516982

版权

媒体查询多用于响应式网页中。

1.初始化设置：

在HTML文件中，网页顶部<head></head>标签中插入一句话：

这句话在于对响应式网页做一个初始化设置，主要包括：

name="viewport"：标记显示设备为视口；

width = device-width：宽度等于当前设备的宽度；

initial-scale：初始的缩放比例（默认设置为1.0）；
minimum-scale：允许用户缩放到的最小比例（默认设置为1.0）；
maximum-scale：允许用户缩放到的最大比例（默认设置为1.0）；
user-scalable：用户是否可以手动缩放（默认设置为no，因为我们不希望用户放大缩小页面）。

2.解决IE浏览器的兼容性问题：

因为IE浏览器(IE8)不支持HTML5和CSS3中的media，所以要加载用于解决IE浏览器兼容性问题的JS文件：

<!--[if lt IE 9]>

<![endif]-->

两个<script></script>标签中的src属性所指向的文件链接地址为固定地址中的文件，直接异地引用就好，不用下载到本地引用。

3.设置IE的渲染方式为最高：

现在有很多人的IE浏览器都升级到IE9以上，这个时候会有很多诡异的事情发生，例如现在是IE9的浏览器，但是浏览器的文档模式却是IE8，为了防止这种情况，我们需要下面这段代码来让IE的文档模式永远都是最新：

当然还有一个更给力的写法：

这段代码后面加了一个chrome=1，这是由于Google Chrome Frame（谷歌内嵌浏览器框架GCF），如果用户电脑安装这个chrome插件，就可让电脑内的IE浏览器规避版本因素，使用Webkit引擎及V8引擎进行排版及运算。当然如果用户没装这个插件，这段代码就会让IE浏览器以最高的文档模式展现效果。

4.CSS3 media 媒体查询的写法：

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

body{

background:#000;

}

这是一个media的标准写法，在CSS文件中，意为：当页面小于960px时执行以下CSS代码，具体内容暂不用管。

对于上述代码中的screen，意为在告知设备在打印页面时使用衬线字体，在屏幕上显示时用无衬线字体。目前很多网站都会直接省略screen,从而不需要考虑用户打印网页的需求，所以又有这种写法：

@media (max-width: 960px){

body{

background:#000;

}

本着思维严谨的原则，个人不会采用这种写法。

5.CSS3媒体查询主体代码组合：

在响应式网页布局中需要持续运用媒体查询代码组合，主要作用在于判断所适配屏幕的宽度，并根据各种宽度条件套用不同的CSS样式。

如当屏幕宽度等于960px时，将网页背景色变为红色：

@media screen and (max-device-width:960px){

body{

background:red;

}

如当屏幕宽度最大为960px（小于960px）时，将网页背景色变为黑色：

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

body{

background:#000;

}

如当屏幕宽度最小为960px（大于960px）时，将网页背景色变为桔色：

@media screen and (min-width:960px){

body{

background:orange;

}

更为常见的是混合使用，如当屏幕宽度介于960px和1200px之间时，将网页背景色变为黄色：

@media screen and (min-width:960px) and(max-width:1200px){

body{

background:yellow;

}

6.总体开发思路：

使用CSS3中媒体查询的大致思路就是判断网页在不同设备中所处的宽度范围，这样的范围可能有三种（PC、平板、手机），也可能有四种（PC、平板、中大屏手机、小屏手机），当然也可能只需要两种（平板、手机，PC端单独开发一版时可不作为CSS3媒体查询的使用对象），并为各种宽度范围情况下的所需页面元素套用不同的CSS样式，从而适配各种设备。

7.响应式网页开发中的宽度问题：

在实际开发中，通常需要设置响应式网页宽度的最大值，一旦忽略最大宽度，臃肿或零散的网页布局都会造成视觉洪灾，也就是我们常说的看起来很low。
另外谈谈目前显示设备中的网页宽度问题（由于篇幅问题，就不从工业革命开始扯了），目前最为常见的宽度基本上都是：大于或等于960px的PC端（1920px、1600px、1440px、1280px、1140px、960px）、960px至640px之间的平板端（768px、640px）以及640px以下的手机端（480px、320px），以上宽度存在已久，且显示设备中的网页宽度会长期处于这样的状态下，在响应式网页宽度设计上，基本从这几个尺寸考虑就已经足够。
8.media媒体查询所有参数汇总：

媒体查询器中还包含并不常用的相关功能，悉如示下：