一、移动端和pc端布局的不同 1.显示设备（屏幕） 2.操作（鼠标、指尖） 3.浏览器内核:移动端不用考虑ie，但是各种浏览器内核（手机自带）、微信浏览器内核 4.运行设备 移动设备（轻便、迅速、便携） pc端（体验） 5.网络不同 移动4g（注重速度） pc光纤（注重体验速度） 页面设置不同： 1.Meta标签设置 2.单位=======用来适应不同的移动端屏幕尺寸；
Px像素。类似绝对单位。其实也是相对单位，相对于屏幕的分辨率； Pt磅 点 打印的尺寸 Em 相对单位，相对于父级的font-size 1em=父级的font-size（直接的父级） Rem相对单位，相对于根元素的font-size 1rem=根元素的font-size Vw，vh相对单位，相对于屏幕的宽度和高度，1vw==1%屏幕的宽度 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
width=device-width:宽度等于当前设备的宽度 intial-scale:页面首次被显示是可视区域的缩放比例，取值1.0则页面按实际尺寸显示，无任何缩放 maximum-scale=1.0, minimum-scale=1.0;可视区域的缩放级别， maximum-scale用户可将页面放大的程序，1.0将禁止用户放大到实际尺寸之上。 user-scalable:是否可对页面进行缩放，no 禁止缩放
二、Meta标签的设置不同及其不同的效果（扩展） 1.强制让文档与设备的宽度保持1：1 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
2.忽略页面中的数字识别为电话号码 <meta name="format-detection" content="telephone=no"> 3.忽略页面中的邮箱格式为邮箱 <meta name="format-detection" content="email=no"/> 4.<!-- 在web app应用下状态条（屏幕顶部条）的颜色 --> <meta name="apple-mobile-web-app-status-bar-style" content="black" />
手动刷新 <script> var bw = (document.documentElement.clientWidth/7.2)+"px"; //获取屏幕宽度)除以7.2，添加上“px”，7.2是设计稿的宽度除以100后得到的值 var htmlTag = document.getElementsByTagName("html")[0]; //在文档里面通过元素名来获取元素，html htmlTag.style.fontSize=bw; //把计算后的值复制给根元素的font-size;1rem=100px </script>
三、Js方法获取HTMLfontsize（自动刷新） <script> window.onload = function(){ /720代表设计师给的设计稿的宽度，你的设计稿是多少，就写多少;100代表换算比例，这里写100是 为了以后好算,比如，你测量的一个宽度是100px,就可以写为1rem,以及1px=0.01rem等等/ getRem(640,100) }; 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>
