平武建站

CSS3中的media媒体查询-创新互联

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

公司主营业务：成都网站设计、成都做网站、移动网站开发等业务。帮助企业客户真正实现互联网宣传，提高企业的竞争能力。创新互联是一支青春激扬、勤奋敬业、活力青春激扬、勤奋敬业、活力澎湃、和谐高效的团队。公司秉承以“开放、自由、严谨、自律”为核心的企业文化，感谢他们对我们的高要求，感谢他们从不同领域给我们带来的挑战，让我们激情的团队有机会用头脑与智慧不断的给客户带来惊喜。创新互联推出岭东免费做网站回馈大家。

1.初始化设置：

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

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

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文件：

两个标签中的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媒体查询所有参数汇总：

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

  • width:浏览器可视宽度，

  • height:浏览器可视高度，

  • device-width:设备屏幕的宽度，

  • device-height:设备屏幕的高度，

  • orientation:检测设备目前处于横向还是纵向状态，

  • aspect-ratio:检测浏览器可视宽度和高度的比例(例如：aspect-ratio:16/9)，

  • device-aspect-ratio:检测设备的宽度和高度的比例，

  • color:检测颜色的位数（例如：min-color:32就会检测设备是否拥有32位颜色），

  • color-index:检查设备颜色索引表中的颜色（他的值不能是负数），

  • monochrome:检测单色楨缓冲区域中的每个像素的位数（这个太高级，估计咱很少会用的到），

  • resolution:检测屏幕或打印机的分辨率(例如：min-resolution:300dpi或min-resolution:118dpcm)，

  • grid：检测输出的设备是网格的还是位图设备。

9.扩展——在CSS2中同样有媒体查询：

media媒体查询并不是CSS3诞生之后的专用功能，早在CSS2开始就已经支持media，比如：

在HTML文件中的标签中写入这句：

以上是CSS2实现的衬线用法，href属性中写入在某单一显示设备中链接的CSS文件，但仅供入门，

如要判断移动设备是否为纵向放置的显示屏，可以这样写：

如要让小于960px的页面执行指定的CSS样式文件，可以这样写：

当然，CSS2中的媒体查询方法放到现在并不推荐使用，大的弊端在于这样会增加页面http的请求次数，增加页面负担，使用CSS3中的媒体查询才是目前的最佳方法。

创新互联www.cdcxhl.cn，专业提供香港、美国云服务器，动态BGP最优骨干路由自动选择，持续稳定高效的网络助力业务部署。公司持有工信部办法的idc、isp许可证， 机房独有T级流量清洗系统配攻击溯源，准确进行流量调度，确保服务器高可用性。佳节活动现已开启，新人活动云服务器买多久送多久。


本文题目：CSS3中的media媒体查询-创新互联
本文链接：http://pwwzsj.com/article/digecp.html

其他资讯