移动端布局？流式布局？rem布局？

移动端布局？

移动端模拟器： 切换平台后，一定要重新刷新浏览器。

去访问一些网站的PC端和移动端：

大一点的网站都是分开开发的，PC端一套代码，移动端一套代码。如

访问淘宝网 -> 后端检测当前设备 -> 如果是PC端 -> www.taobao.com

访问淘宝网 -> 后端检测当前设备 -> 如果是移动端：

 www.taobao.com ->  重定向  ->  h5.m.taobao.com

Viewport视口

注意：只有移动端才有Viewport视口，Viewport视口就是浏览器显示页面内容的屏幕区域。在Viewport中有两种视口，分别表示为visual viewport（可视视口）和layout viewport（布局视口），两个视口是叠加在一起的。

visual viewport固定大小跟移动设备的屏幕大小相同（如i8的375*667），在上面；而layout viewport可改变大小（默认为980px），在下面。就是以往，会把980px的PC端整个网页压缩在移动端的visual viewport里，但现在不用压缩了，因为有专门针对移动端的一套设计即设置viewport。Layout viewport默认大小为980像素，可通过document.documentElement.clientWidth获取。

现代网页需要将layout viewport设置成跟visual viewport等同大小，方便进行网页制作。

viewport设置

通过<meta>标签进行设置，name属性指定viewport值，content属性进行视口配置。

取值	含义
width		设置layout viewport的宽度特定值，当值为device-width表示自适应设备的宽度
height		设置layout-viewport的高度特定值，一般不进行设置
initial-scal		设置页面的初始缩放，值为1.0表示不进行缩放
minimum-scal		设置页面的最小缩放
maximum-scale		设置页面的最大缩放
user-scalable		设置页面能否进行缩放，值为no表示不允许用户进行缩放

 

一般在html的头部会进行这样一个整体的设置：<meta name=”viewport” content=”width=device-width, initial-scale=1.0, user-scalable=no”>

移动端适配方案？

1. 百分比布局，也叫流式布局。代表网站：优酷、百度、天猫、腾讯。

  元素大小是不会变化的，只是设备屏幕的大小不同会导致元素的间距发生变化

2. 等比缩放布局，也叫rem布局。代表网站：网易、爱奇艺、淘宝、美团。

  设备屏幕小，元素就小一些，屏幕大则元素会大一些，但是元素的间距是不会变化的。

 

移动端的流式布局（百分比布局）原则：

好处：大屏幕下显示更多的内容    坏处：宽屏下比例会有一些不协调

主要是设置弹性布局display：flex；

移动端的rem布局（等比缩放布局）

 

即动态设置html的font-size，然后通过一个rem单位等于一个font-size单位来实现rem等比缩放布局。

单位：

em：是一个相对单位，1em等于当前元素或父元素的font-size值。若当前元素没有设置font-size，则一层一层网上找，直到有父元素设置font-size。

rem：是一个相对单位，1rem等于根元素（即html）的font-size值

vw/vh：把屏幕分成100份，1vw等于屏幕宽的1%

 

 如何动态设置font-size？

1. 通过JS
2. 通过vw

第一种方法：（通过JS）   要在js里动态设置font-size，首先要获取viewport的屏幕大小，而获取view的屏幕大小是通过document.documentElement.clientWidth来获取的，所以在script标签里可以这样来获取：

<script>

    var fontsize = document.documentElement.clientWidth / 3.75;

   document.documentElement.style.fontSize = fontsize + ‘px’;

</script>

解析：i6的宽是375，除以3.75是110；i6 plus的宽是414，除以3.75是110.4；我们把获取到的屏幕宽度除以3.75得到的结果值赋给变量fontsize，然后将结果返回去给页面根元素。

然后若要设置某个div的大小，则可以使用相对单位rem来实现了，如i6下，给div设置width：1rem；height：1rem；则该div为100px*100px

 

px和rem的换算可以通过在vs code中下载插件px to rem。下载完成后单击px to rem右键设置换算单位如100，然后再html中通过alt+z快捷键来进行自动换算，也可以选中整篇html通过alt+z来将整篇的px换算为rem。

第二种方法：（通过CSS），vw为屏幕宽，vh为屏幕高。vw指把屏幕分为了100份宽，总宽为100vw。i6中为375px，那么1vm=3.73px，要得到100px则为26.666667vm。

注：要给body重置一下font-size：16px。因为html的rem只是用来换算的，而body里的字体要设置为font-size：16px；避免受html的影响。