深入理解移动端的三大布局方式

移动端布局有哪些布局？

    移动端一共有三个布局，分别是流式布局、rem布局以及响应式布局，这三种布局是我们现在常用的布局方式，其中流式布局和rem布局是移动端的主要布局，而响应式布局是可以适合PC端、Pad端、移动端。

流式布局的优缺点？

    优点： 它会根据使用者的设备进行适配，在移动设备屏幕比较大时，流式布局会让更多的内容展现出来。
    缺点： 由于它会根据设备的屏幕大小进行适配就会使里面的内容有一点比例失调。

如何实现响应式布局呢？
    按照正常PC端布局进行，不过要注意相应元素的样式。

效果图对比：

两张图对比能够看出左边会有一点比例失调

Rem布局的优缺点？

优点： 它会根据使用者的设备进行适配，不同设备下看起来比较协调。
缺点： 由于内容是相对进行放大展示，所以显示的内容并不会在大屏幕展示的内容多。
em : 是一个相对单位，1em等于当前元素或父元素的font-size值。
       1em == 1个font-size的大小
rem : 也是一个相对单位，1rem等于根元素的font-size值。
       1rem == 1个根元素的font-size大小就是1个html标签的font-size大小
       rem -> root + em

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

如何做到font-size动态化？

a. 通过JS （JavaScript）
      利用document.documentElement.clientWidth -> 获取布局视口的宽度。
以下是一些常用获取动态化的font-size取值：
在iphone 6 -> document.documentElement.clientWidth -> 375
在iphone 6 plus -> document.documentElement.clientWidth -> 414

在iphone 6 -> font-size 100px ?
   document.documentElement.clientWidth(375) / 3.75 -> 100
在iphone 6 plus -> font-size 大于 100px ?
   document.documentElement.clientWidth(414) / 3.75 -> 110.4

b.通过vw （vw是尺寸单位）
vw -> view width
vh -> view height
相对单位：表示把屏幕自动分成了100vw宽和100vh高。
vw / vh : 把屏幕分为100份，1vw等于屏幕宽的1%。
  假设屏幕是375px -> 100vw -> 1vw == 3.75px
  假设屏幕是414px -> 100vw -> 1vw == 4.14px

举例：
    iphone6 -> html的font-size ? -> 100px
    1vw == 3.75px ? -> 多少个vw == 100px -> 26.66667vw -> 100px
     iphone6 plus -> html的font-size ? ->
    1vw == 4.14px ? -> 26.66667 * 4.14px ? -> 110.4px
注：做rem布局，只能用一款设备，然后测量尺寸，换算rem。
注：选择iphone6的html的font-size为100是为了好算。也可以用工具辅助开发。VsCode中去下载一个插件 -> px to rem -> 在设置把对应的font-size设置下。 -> alt + z进行px转rem的操作，或者用在线px转rem.在线px转rem
注：使用rem进行布局的时候，一定要在body中重置默认的font-size大小。

效果图对比：

响应式布局的优缺点？

**优点：**用一套代码可以在PC端、Pad端、手机端进行相应的适配，使更多用户能够看到信息展示。
缺点： 由于使用一套代码实现，就有很大的局限性，通常用于小型企业。

CSS3 媒体查询?
即media queries，可以针对不同的媒体类型定义不同的样式，从而实现响应式布局 。也可以针对不同的分辨率设置不同的样式。
    1024分辨率以上：PC端
    1024 ~ 768 : pad pro
    768 ~ 450 : pad mini , mobile 横屏
    450分辨率以下： mobile 竖屏
媒体查询的语法？

常见的媒体类型：
    all 用于所有设备   
    print 用于打印机和打印预览。
    screen 用于电脑屏幕，平板电脑，智能手机等。
    speech 应用于屏幕阅读器等发声设备。

@media all and (min-width:500px){ }
@media all and (min-width:500px) and (max-width:800px){ }

orientation:portrait : 竖屏
orientation:landscape : 横屏
@media all and (orientation:portrait){}

注：这个横竖屏操作，只是针对移动端的。在PC端屏幕永远是竖屏的。
注：空格是需要添加的，要符合规范。

如何实现响应式布局呢？

a. 先去适配手机端 -> 过渡到pad -> 过渡到pc (不推荐)
b. 先去适配PC端 -> 过渡到pad -> 过渡到手机端 (推荐)

总结

本文主要是写了移动端的流式布局、Rem布局、响应式布局的三大布局介绍，以及它们相应布局的一些实现方法