媒体查询,这个词还是没完全明白,看了长篇大论的解释也没能明白.目前只知道它可以实现在不同屏幕设备上载入不同CSS的功能.
1.为什么要在不同屏幕设备上加载不同的CSS表呢,因为有这种要求了,屏幕大小不同,页面的布局也要相应变化,再者,像手机这样小屏幕主要还是浏览功能,一些表单就不用显示出来了.只在桌面上显示就好了.有这些类似的需求,就有必要做几套CSS了
2.代码
<link href="phone.css" media="only screen and (min-200px) and (max-760px)" rel="stylesheet" />
<link href="desktop.css" media="only screen and (min-767px) and (max-1920px)" rel="stylesheet" />
这两句话是加载CSS样式表,看media属性:
only screen // 只在有显示屏的设备上使用 (当然有的设备是不需要显示屏的)
min-200px // 最小宽度200像素时
max-800px // 最大宽度800像素时,
这三句话使用and连接起来, 表示这些条件都要满足,后两句是说宽度在200-760像素之间的时候,加载这个样式.(200-760范围,一般是手机屏幕的大小)
同理,第二行说明在767-1920像素宽度的设备屏幕上加载.有这种宽度的一般是桌面电脑.
3.样式表
样式表里的类名一样也可以不一样,为了简便,同一元素使用一个类名.里面的内容不同.
4.样式文件的写法如下:
/*说明: 屏幕宽度为200至1024之间,使用如下样式*/
@media only screen and (min-200px) and (max-1024px)
{
.title
{
100%;
text-align: center;
margin-top: 31%;
}
}