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

移动端布局？html

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

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

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

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

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

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

Viewport视口spa

注意：只有移动端才有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获取。scala

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

viewport设置

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

通常在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的影响。