1. 媒介查询
如果文档宽度小于 300 像素则修改背景颜色(background-color):
@media screen and (max-width: 300px) {
body {
background-color:lightblue;
}
}
如果文档宽度大于 900 像素小于1200像素则修改背景颜色(background-color):
@media screen and (min-width:960px) and (max-width:1200px){
body{
background-color:yellow;
}
}
// 不同屏幕尺寸时加载样式文件
如果文档宽度小于 960 像素则加载style.css文件
<link rel="stylesheet" type="text/css" media="screen and (max-width:960px)" href="style.css">
2 .设置Meta标签
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
这段代码的几个参数解释：
width = device-width：宽度等于当前设备的宽度
height = device-height：高度等于当前设备的高度
initial-scale：初始的缩放比例（默认设置为1.0）
minimum-scale：允许用户缩放到的最小比例（默认设置为1.0）
maximum-scale：允许用户缩放到的最大比例（默认设置为1.0）
user-scalable：用户是否可以手动缩放（默认设置为no，因为我们不希望用户放大缩小页面）
// 判断手机端是竖屏还是横屏 对应不同样式
@media screen and (orientation: portrait) and (max-width: 720px) { 对应样式 } // 竖屏
@media screen and (orientation: landscape) { 对应样式 } // 横屏
