viewport和媒体查询

viewport

写移动端页面时需要加的属性

一般写为即可
width=device-width 设置布局视口的宽度为设备屏幕宽度
initial-scale=[number] 设置初始的缩放比率
user-scalable=yes | no 默认 yes 是否允许用户缩放
maximum-scale=[number] 允许最大放大比率
minimum-scale=[number] 允许最小缩小比率
设定为1 同 user-scalable=no

    
        
        
        
        
        
    
    
        

            BOX1
        
        

            BOX2
        
        

            BOX3
        
        

            BOX4
        
    
    

媒体查询

响应式布局所依赖的样式
@media screen and (max-width:[num]px){}
@media screen and (max-width:600px) and (min-width:400px){}