媒体查询

标签：

媒体查询,这个词还是没完全明白,看了长篇大论的解释也没能明白.目前只知道它可以实现在不同屏幕设备上载入不同CSS的功能.

1.为什么要在不同屏幕设备上加载不同的CSS表呢,因为有这种要求了,屏幕大小不同,页面的布局也要相应变化,再者,像手机这样小屏幕主要还是浏览功能,一些表单就不用显示出来了.只在桌面上显示就好了.有这些类似的需求,就有必要做几套CSS了

2.代码

　　<link href="phone.css" media="only screen and (min-width:200px) and (max-width:760px)" rel="stylesheet" />
　　<link href="desktop.css" media="only screen and (min-width:767px) and (max-width:1920px)" rel="stylesheet" />

　　这两句话是加载CSS样式表,看media属性:

　　　　　　only screen // 只在有显示屏的设备上使用 (当然有的设备是不需要显示屏的)

　　　　　　min-width:200px // 最小宽度200像素时

　　　　　　max-width:800px // 最大宽度800像素时,

　　　　这三句话使用and连接起来, 表示这些条件都要满足,后两句是说宽度在200-760像素之间的时候,加载这个样式.(200-760范围,一般是手机屏幕的大小)

　　　　同理,第二行说明在767-1920像素宽度的设备屏幕上加载.有这种宽度的一般是桌面电脑.

3.样式表

　　里面的class类名字一样,里面的实现根据要求有区别

媒体查询

标签：

原文地址：http://www.cnblogs.com/mirrortom/p/5032891.html