媒体查询

媒体查询,这个词还是没完全明白,看了长篇大论的解释也没能明白.目前只知道它可以实现在不同屏幕设备上载入不同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%;
　　}

}