移动web初体验

Posted 2020-06-17

1.可视宽度、物理宽度、虚拟宽度，通常自适应都是可视宽度满屏。即设置meta

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

　　

2.css 媒体查询分辨率 @media screen and (min-width:XXXpx)

@media screen and (min-width: 1280px) {   
 　　.strong {
        color: red;
    }
}

@media screen and (max-width:480px) {
    .strong{ 
　　　　　color: blue; 
 　　}
}

　　

 

3.布局用百度分

　　特别注意：

  　　a.在用百分比布局时，必须制定html,body的宽度，一般100%；

　　  b.纵向百分比设定height 时，相对于屏幕高度；

　　  c.但margin,padding值纵向百分比却是相对屏幕宽度的；