css3 media媒体查询

css3 media媒体查询

首先我们要设置适配的界面以下代码来做兼容：

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"/>

界面根据屏宽引入不同的样式：（该方式会加大页面http请求次数，造成浏览器负担）

屏宽小于960px引入样式：

<link rel="stylesheet" type="text/css" media="screen and (max-width:960px)" href="style.css">

显示屏纵向放置使用样式：

<link rel="stylesheet" type="text/css" media="screen and (orientation:portrait)" href="style.css">

在css文件里设置适配样式：

设备屏宽小于960px

@media screen and (max-device-width:960px){

                body{

                         width:80%;  height:150px;

                       }

}

浏览器宽度小于960px（与上面不同的是该设置可根据浏览器窗口缩放调用不同的样式）

@media screen and (max-width:960px){

                body{

                         width:80%;  height:150px;

                       }

}

常用 media 参数

width: 浏览器可视宽度。

height:浏览器可视高度。

device-width:设备屏幕的宽度。

device-height:设备屏幕的高度。

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