移动端基础（一）_移动端填写资料-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_44756169/article/details/88584255

移动端 – 新版盒模型（flex布局/弹性布局）

（1）浏览器盒模型的两种解析模式：

	box-sizing：content-box(标准模式) / border-box(怪异模式) / inherit

（1）在标准模式下，一个块的总宽度= width + margin(左右) + padding(左右) + border(左右)；
（2）一个块的总宽度= width + margin(左右)（即width已经包含了padding和border值）；
（3）一般横着排列的标签不需要设 ---- flex布局，直接用margin / padding设置间距位置；
（4）用flex布局时，父元素需先设置宽高；

（2）做移动端页面和pc端页面使用的方法不同

1.Meta标签设置
2.单位（用来适应不同的移动端屏幕尺寸）

（1）Px像素。类似绝对单位。其实也是相对单位，相对于屏幕的分辨率；
（2）Em 相对单位，相对于父级的font-size 1em=父级的font-size（直接的父级）
（3）Rem相对单位，相对于根元素的font-size 1rem=根元素的font-size
（4）Vw，相对于屏幕的宽度，1vw==1%屏幕的宽度

（3）书写移动端时，必须添加的两个标签

（meta标签和单位计算的公共代码）：

 在<head>中插入：

<meta    name=“viewport”   content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

<script>
         window.onload = function(){
         /*720代表设计师给的设计稿的宽度，你的设计稿是多少，就写多少;100代表换算比例，
         这里写100是 为了以后好算,比如，你测量的一个宽度是100px,就可以写为1rem,以及1px=0.01rem*/
         getRem(640,100)    /* getRem中的第一个数值为屏幕尺寸宽度 */
         };
         window.onresize = function(){
         getRem(640,100)
         };
         function getRem(pwidth,prem){
           var html = document.getElementsByTagName("html")[0];
           var oWidth = document.body.clientWidth || document.documentElement.clientWidth;
            html.style.fontSize = oWidth/pwidth*prem + "px";
}
        </script>

（1）以上 script 标签为Js方法获取HTMLfontsize（自动刷新）
（2）以上 meta可用快捷方式 M+7直接书写；

（4）移动端的单位VM / Rem 适配计算方案

总结：

1.Vw单位做适配
1.设计稿尺寸=100vw 算出1vw=？Px
2.量出来的尺寸换算成vw单位书写css中；
2.Vw结合rem适配
1.设计稿的尺寸=100vw。算出1vw=？Px；
2.算出100px=2？Vw；
3.html{font-size:2?vw}这时1rem=100px
4.量出的尺寸除以100，就是得出的rem单位的值