移动端界面布局适配方案

自适应和响应式

1、自适应：根据不同的设备大小来自动调整尺寸、大小

2、响应式：会随着屏幕的实时变动而自动调整，是一种自适应；

移动端视口

能看到的区域就是视口。viewport

fixed就是相对于视口来进行定位的。

在PC端视口就只有一个，不需要对视口进行区分。布局视口和视觉视口就是同一个。

 
  
meta中，是禁止在移动端进行等比例缩放。pc端页面在移动端等比例缩放之后，字太小了，看不清。
 
  
布局视口
 
  
移动端的布局视口，可不是视觉视口【就是显示页面的区域】
 
  
移动端的布局视口980px，我们写的像素如果是100px，那么到视觉视口中会等比例缩放的。但是还是显示100px
 
  
所以我们要改变布局视口的大小
 
  
设置布局视口的宽度
 
  
 
  
 
  
initial-scale：定义设备宽度与viewport大小之间的缩放比例
 
  
maximum-scale 定义缩放的最大值
 
  
minimum-scale 定义缩放的最小值
 
  
user-scalable yes/no 将无法缩放当前页面
 
  
将布局视口设置为视觉视口之后，就不会等比例缩放了。100px在哪里都是100px，是一个绝对单位。
 
  
适配方案
 
  
1、百分比设置
 
  
因为不同属性的百分比设置，相对的可能是不同的参照物，所以百分比往往比较难统一。
 
  
所以百分比在移动端适配中使用是比较少的；
 
  
2、rem单位+动态的html的font-size
 
  
3、vw单位
 
  
4、flex的弹性布局
 
  
媒体查询，动态设置font-size
 
  
 
  
rem的font-size尺寸
 
  
可以通过媒体查询设置不同尺寸范围的html的font-size尺寸
 
  
缺点：
 
  
1、我们需要针对不同的屏幕编写大量的媒体查询
 
  
2、我们如果动态改变尺寸，不会实时的进行更新【范围超出到另外一个阶梯时，才会发生变化】
 
  
js动态计算font-size
 
  
 
  
lib-flexible库
 
  
Rem单位换算
 
  
1、手动换算
 
  
2、less/sass
 
  
index.less
 
  
.pxToRem(@px){
    return: 1rem * (@px / 37.5);
}
.box{
    width: .pxToRem(100)[result]
}
 
  
3、postcsss-pxtorem
 
  
4、借助vscode插件
 
  
VW换算
 
  
1vm==屏幕的1/100
 
  
与rem做对比
 
  
1、rem事实上是作为一种过度的方案，它利用的也是vw的思想
 
  
2、不管是自己写的js，还是flexible的源码，都是将1rem等同于设计稿的1/10，在利用1rem计算，相对于整个尺寸的大小。
 
  
VM的优势
 
  
1、不需要动态计算html的font-size的大小，所以也不会去依赖
 
  
2、更加语义化。可以具备rem的所有优点。
 
  
VW的换算过程
 
  
设计给的375的设计稿 1vw=3.75px
 
  
.box{
    width:calc(100/275) vw;
}