移动端布局方案

1、流式布局（宽度自适应）

流式布局是宽度使用百分比代替固定宽度px，高度大多使用px来固定，因此在大屏幕手机下显示的效果会变成页面元素的宽度被拉长，高度和原来保持一致

优点：

可以很好的来解决自适应的问题

缺点：

1、实际显示的效果不友好,屏幕越大，宽度被拉的很长，容易变形

2、大量使用百分比布局，会出现兼容性问题

​

2、rem布局

• rem是css3新增单位，它是相对于根元素的字号大小的单位

  rem原理：

rem是指相对于根元素的字体大小的单位，即根据html元素的font-size来计算大小。

在布局过程中只要使用 rem 设置元素的尺寸，在改变 rem 的基准值 html 的字体大小的时候，页面上的元素将等比例缩放实现适配。

比如说 html 的 font-size 大小为 100px, 一个 div 的 width 为 1rem，则 div 的 width大小为100px

相对单位 : rem

• rem布局的实现：

1、设置页面的viewport

2.动态计算并设置不同尺寸html的font-size属性

3.按照PC端布局方式正常布局，将px单位改为rem单位（较小 的长度比如1px的边框就不需要转换成rem,直接设置px）

• 优点：

1.适用于偏APP类型的移动端页面

2.有利于手机端各种机型的适配

3.减少代码的重复性

• 缺点：

1.必须通过js来动态控制根元素的大小

3、vw布局

使用纯css实现动态改变font-size属性值，不需要引用js文件

• vw viewport's width 是css3规范中宽度视口单位，将视口宽度平均分成100份

• vh viewport's height 将视口高度平均分成100份

• 原理：确定基准值以常见的750像素宽度的设计稿为例，根据vw单位的原理100vw = 750px,即 1vw = 7.5px，根据设计稿中的px值，转换成对应的vw值进行布局，也可以直接写px

  100vw = 750px 1vw = 7.5px;

  100vw = 375px 1vw = 3.75px

  1px =0.1333333333333333vw

• 优点：页面元素随着页面宽度变化

• 缺点：

  • 兼容性没有rem好 ,得大量计算， 不是很精确

  • 转换后的长度单位不够直观修改维护困难

在 Visual Studio Code 装一个插件: px to vw

转换px--vw或vw--px 捷键：alt +z（选中要换算的代码）

注意：会给px-rem有冲突