css常用功能总结

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) { 对应样式 } // 横屏