前端自适应页面方案rem，vw，vh，百分比，媒体查询，em 栅格系统 16 24 略 750px + js + rem

rem，vw，vh，百分比，媒体查询，em

栅格系统 16 24

略

750px + js + rem + px + 媒体查询

rem换算可能导致小数点的px值出现，px 这个单位在每个手机上显示的效果不一致，因为像素密度导致px单位在每个手机中显示的效果不一致

百分比布局

元素宽高 / 上下文宽高 = 元素在上下文中的占比。保留小数点后六位

left 60px / 280px = 0.21428571; // 21.428571%

top 130px / 310px = 0.41935483; // 41.935483%

媒体查询

body {
    background-color:red;
}

@media only screen and (min-width: 800px) { // 大于800才命中
    body {
        background-color: yellow;
    }
}

@media only screen and (min-width: 700px) { // 大于700才命中
    body {
        background-color:blue;
    }
}
	
@media only screen and (max-width: 600px) { // 小于600才命中
    body {
        background-color: yellow;
    }
}

@media only screen and (max-width: 500px) { // 小于500才命中
    body {
        background-color:blue;
    }
}

vw，vh，+ flex布局 + 媒体查询

常用与移动端适配，因为移动端宽度是标准化，也会有小数点的问题，但是可以避免一些

PC 端的适配一般是百分百布局 + vw，vh + 媒体查询 + (rem+js)

问题1，文字缩放情况

em + 媒体查询；使用媒体查询控制边界，控制最大最小字体；

问题2，为什么不用zoom或者transform缩放页面
这个结合媒体查询使用，需要控制边界问题。

前端自适应页面方案