移动端响应式布局技巧

基本概念

设备像素（物理像素/像素分辨率）：显示器的最小物理单位（对于一个显示器来说是固定的），以手机为例，iphonex像素分辨率为1125X2436，是指屏幕横向能线上1125个物理像素点，纵向能线上2436个物理像素点。通常说的4K显示器指的是4096X2160

设备独立像素 ：一个设备独立像素可能包含多个物理像素

devicePixelRatio：像素比，指的是物理像素和设备独立像素的比，即1独立像素由多少个物理像素渲染

dpr：设备像素比，设备像素/设备独立像素，代表设备独立像素到设备像素的转换关系，在js中可以通过window.devicePixelRaitio获取

设计稿尺寸

参照iPhone5为标准：设备独立像素 320*568 dpr 2.0 设计稿 640*1136

参照iPhone6为标准：设备独立像素 375*667 dpr 2.0 设计稿 750*1134

参照iPhone6P为标准： 设备独立像素 414* 736 dpr 3.0 设计稿 1242*2208

单位转换

pc端：

1.px ：固定

2.em：参照父元素字体大小

3.%：参照父元素的宽高

移动端：

1.rem：参照根元素html字体大小(1rem=html font-size的大小)

function refreshRem() {
    var desw = 750;
    var winw = document.documentElement.clientWidth;
    var ratio = winw/desw;
    document.document.Element.style.fontSize = radio*100 + 'px'; 
}
refreshRem();
window.addEventListener('resize',refreshRem);

2.vw/vh:参照viewport视口宽度和高度（视口宽高的1/100）（1vw/1vh=视口的1/100）

px => vw  /  vh 

假设视口：375 

1vw = 3.75px

750  375

100  50

1vw = 3.75px；

x vw = 50px;

x= 13.33333333

html {
    font-size:13.3333vw;
}

媒体查询

有条件的样式覆盖

@media 媒体 媒介

媒体类型：screen移动设备 TV print...

连接符： and not only

判断条件：（max-width）

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

}

@media (max-width:1080px) {

}