移动端APP 自适应布局

2018-03-14

初涉移动端，自适应布局的相关要点如下
本文摘自
原文链接

1.常规情况下js根据屏幕宽度动态计算

<meta name="viewport" content="width=device-width, initial-scale=1.0 ,user-scalable=no">
<!--        视口                 宽度=设备的宽度       缩放比例为1           禁止用户缩放-->
<script>
var deviceWidth = document.documentElement.clientWidth;
document.documentElement.style.fontSize = deviceWidth / 7.5 + 'px';
//设计稿基于iphone6，宽度为750px，body的width为750px / 100 = 7.5rem
//http://520ued.com/tools/rem  PX转rem的网站
</script>
<style>

width=device-width
这段代码是让布局视口的尺寸等于理想视口。
设备像素比（DPR） = 设备像素个数 / 理想视口像素个数（device-width）

2.媒体查询较密集的断点

@media screen and (min-width: 320px) {
    html {font-size: 14px;}
}

@media screen and (min-width: 360px) {
    html {font-size: 16px;}
}

@media screen and (min-width: 400px) {
    html {font-size: 18px;}
}

@media screen and (min-width: 440px) {
    html {font-size: 20px;}
}

@media screen and (min-width: 480px) {
    html {font-size: 22px;}
}

@media screen and (min-width: 640px) {
    html {font-size: 28px;}
}

2009年，W3C 提出了一种新的方案—-Flex 布局，可以简便、完整、响应式地实现各种页面布局

flex布局教程