响应式web之媒体查询（一）

　　HTML4和css2目前支持为不用的媒体类型设定专有的样式，如，一个页面在屏幕上时使用无衬线字体，而在打印时使用衬线字体。screen和print是两种已定义的媒体类型。媒体查询让样式表有更强的针对性，扩展了媒体类型的功能。

　　媒体查询既可以在样式表中使用也可以在link中使用，甚至可以指定应用的样式表。

<!-- 在link中使用媒体查询 -->
<link rel="stylesheet" type="text/css" media="screen and (min-width:800px)" href="style.css"/>

//在css样式表中使用媒体查询
@media screen and (min-width:800px) {
    p{
        color:#ff00ff;
    }
}

//在css样式表中引用其他的样式表
@import url('path/common.css') screen and (min-width:800px);

　　screen代表设备是显示屏，and连接的是媒体的特性，如上面的代码表示显示屏的最小宽度是800px，如果设备既是显示屏，显示屏的宽度大于等于800px，那么就加载样式表或应用样式。

 

转载于:https://www.cnblogs.com/luoshufang/p/5715222.html