前端页面适配

2020-02-20 本文已影响0人 9吧和9说9话

为啥需要适配

安卓 IOS 各种不同的屏幕尺寸

适配方案

基本上都会设置 viewport

百分比：width, 'height', margin, padding, left的个属性都支持百分比设置
利用rem
使用vw vh新的单位
使用flex布局
...

rem适配原理

物理像素

设备独立像素
比如css中的px就是设备独立像素

设备独立像素比dpr
dpr=物理像素/设备独立像素
比如iphone6s的物理像素宽是:750,

两个viewport

layout viewport : 布局窗口（真实的舞台）
他的大小是不会发生变化的
可以通过document.documentElement.clientWidth
visualviewport: 虚拟窗口（摄像机）
他的大小是不会发生变化的,当我们缩放页面的时候，它的值就会发生变化。
可以通过window.innerWidth

meta 设置layoutviewport

当我们使用<meta name="viewport" content="width=device-width, initial-scale=1.0">
① 其中width指的是layout viewport的宽而 device-width指的值设备屏幕的宽度
② 这个设置就是要求浏览器把布局视图的宽度设置成和设备屏幕宽度一致。

rem解决方案

设置布局视窗（layoutviewport）的宽度等于设备屏幕宽度
通过rem实现适配：具体参考（https://github.com/amfe/lib-flexible/blob/2.0/index.js
）

假设：现在的设计稿给按照750给出

通过meta实现：布局视窗（layoutviewport）的宽度等于设备屏幕宽度
设置html的font-size，根据以下的计算公式设置当前屏幕分辨率下的html 的font-size的值：即1rem 等于多少px

当前设计稿的宽度/ 当前设备的宽度= html font-size的基值（设计稿宽度)/x

x =  html font-size的基值（设计稿宽度)*当前设备的宽度 / 当前设计稿的宽度

如果设置750的时候的html font-size  为 100
那么：rem =100* document.documentElement.clientWidth / 750
而 手淘的js中的实现
// set 1rem = viewWidth / 10
  function setRemUnit () {
    var rem = docEl.clientWidth / 10
    docEl.style.fontSize = rem + 'px'
  }
就是将750设计稿时候的基础值 设置成了75, 即：
rem =75* document.documentElement.clientWidth / 750
也就是
rem =document.documentElement.clientWidth / 10

关于公式说明：

例如我们的750px的设计稿上有一个 100px * 100px 的块，现在需要我们绘制到页面上。
我已经通过meta设置布局窗口的宽度等于屏幕的宽度。
设备A的屏幕宽度是375，设备B的屏幕宽度是320
因为1rem的换算成px最终的效果依赖 html font-size的大小
设计稿750情况下，我们假设html font-size: 100px,这样在750的时候我们实现只需要：

html {
    font-size: 100px;
}
.demo {
  width: 1rem;
  height: 1rem;
}

针对设备A 需要调整html font-size的大小, 相当于750缩小到375大小，那么这个 100px * 100px的块在设备A 上实际大小应该是 50px * 50px(缩小到原来的1/2)，那么

html {
    font-size: 50px;
}
.demo {
  width: 1rem;
  height: 1rem;
}

针对设备B 需要调整html font-size的大小, 相当于750缩小到320大小，那么这个 100px * 100px的块在设备A 上实际大小应该是 42.66666px * 42.66666x(缩小到原来的100/(750/320))，那么

html {
    font-size: 42.66666px;
}
.demo {
  width: 1rem;
  height: 1rem;
}

总结可以得到上面的缩放公式。

使用px 2 rem的转换工具实现自动化计算rem的值。
按照上面的技术方案，需要我们按照设定的rem初始值，将我们设计稿中标注的px尺寸进行转换，这样手动的计算过程可以使用工具来帮我们实现。
比如：https://www.npmjs.com/package/postcss-px2rem

vm vh 适配原理

相对而言 vm vh更好理解，它就是一个相对长度单位。

1vm就等于布局视图宽度的1%;
1vh等于 布局视图高度的1%;

需要注意的是：参考对象是【布局视图】，可以通过将meta viewport的属性删除验证。

iphonex 适配

https://webkit.org/blog/7929/designing-websites-for-iphone-x/
https://aotu.io/notes/2017/11/27/iphonex/index.html

参考：