移动端布局

逆战班学习的周总结
一、流式布局
代表网站：优酷、百度、天猫、腾讯。

含义：使用非固定像素来定义网页内容，也就是百分比布局，通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固 定像素的限制，内容向两侧填充。
流式布局方式是移动web开发使用的比较常见的布局方式。

优点：px(绝对单位)做css单位,这样的布局可以适配移动端不同的分辨率设备，在大屏小屏自动适应,大屏幕下可显示更多的内容。
缺点：页面虽然展示正常,却不是等比缩放,宽屏下比例会有一些不协调。

二、rem布局
代表网站：网易、爱奇艺、淘宝、美团。

也叫等比缩放布局。主要用来适配手机和ipad,除了手机和ipad，其他的都不能适配。

优点：不同设备下看起来比较协调。
缺点：显示的内容不会在大屏幕展示更多内容。

rem是一个单位：

1. em:是一个相对单位，1em等于当前元素或父元素的font-size值。
   1em=一个font-size的大小

/* 1em 等于16个font-size 大小 所以height:80px */
div{width:100px;height:5em;}

2. rem:是一个相对单位，1rm等于根元素的font-size值。
   1rem=一个根元素的font-size大小（1个html标签的font-size大小）
   rem=root(根)+em

/ * 1rem 等于1个html标签的font-size 大小 所以height:40px */
html{font-size: 40px;}
div{width:100px;height:1rem;}

rem布局原理：页面中的元素采用rem作为尺寸或者间距的单位，想办法动态的改变html标签的font-size大小，这样就可以适配不同的设备进行等比缩放。

实现方案：
1.通过js(JavaScript)
document.documentElement.clientWidth 获取布局视口中的宽度

在iPhone6 获取375px
在iPhone6plus 获取 414px

2.通过vw
vw是尺寸单位
Vw -> view width
Vh -> view height
是一个相对单位，表示把屏幕自动分成了100vw宽和100vh高，1vw等于屏幕宽的1%。

假设屏幕是375px相当于100cw 那么1vw等于3.75px
假设屏幕是414px相当于100cw 那么1vw等于4.14 px

这2种方式，都可以设置html的font-size和屏幕宽度成正比。