移动端布局概念的详解

大家好，我们是逆战班的，接下来讲解的是什么是移动端布局
百分比弹性布局：
移动端页面基本上和web端区别不大 但要考虑到 移动端屏幕尺寸不大并且都是全屏布局 而且 屏幕尺寸都不一样
所有不能使用网页的固定尺寸来布局 需要使用百分比来布局
移动端布局的优缺点
优点：
移动端基本都兼容h5 css3 所有可以放心的去使用css3的样式来布局
移动端页面一般都不大 所以标签使用的并不多 相对一个一面开发时间没web端长
缺点
移动端宽高尺寸不同 因此测量尺寸成为了一个难题 无法非常精确的写尺寸
新单位 rem
rem是永远获取html的font-size值
然后通过js获取屏幕尺寸 制定出一个系数 去改变html的font-size值
w,vh 永远获取屏幕宽高
100vw=屏幕的宽度
1vw=1%屏幕尺寸
这样更直观的获取百分比 但是少部分手机不支持 所以需要自己把控
要移动端尺寸显示正常需要加上以下meta

流式布局：
流式布局，顾名思义就是流动的布局，随着屏幕窗口的大小页面的内容像水一样的流动，但不影响整体的布局。
简单的来说就是百分比布局，非固定像素，内容向两侧填充的一种布局。
但是目前使用流式布局的公司非常多，比如 亚马逊 、京东 、携程
好处： 大屏幕下显示更多的内容。
坏处：宽屏下比例会有一些不协调。
rem布局
rem布局，宽高自适应，能实现整个页面像一张图片一样缩放且不失真的效果。
与less配合使用更加方便，目前使用rem布局的有：淘宝 、 苏宁
好处： 大屏幕下显示更多的内容。
坏处：宽屏下比例会有一些不协调。’
单位：
em：是一个相对单位，1em等于当前元素或父元素的font-size值。若当前元素没有设置font-size，则一层一层网上找，直到有父元素设置font-size。

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

vw/vh：把屏幕分成100份，1vw等于屏幕宽的1%
如何做到font-size动态化？

1. 通过JS （JavaScript）
   ocument.documentElement.clientWidth -> 获取布局视口的宽度。
   在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

2. 通过vw （vw是尺寸单位）

来源：CSDN

作者：冯二宝

链接：https://blog.csdn.net/fyj19970523/article/details/104904800