移动端适配方案 - Githubissues

鉴于目前市面上分析移动端单位原理等的文章已经大多，这里不再叙述；

为什么要使用适配？

一般 UI 设计师给我们的设计稿都是以 IPhone6 的屏幕为基准的宽为 750px

这时候我们还原设计稿的时候如果直接按照设计图写上的话，在不同的设备上的展现效果会不一致，这是由于屏幕像素比造成的，比如 IPhone6 它的手机宽度为 375 但是屏幕像素比为2 所以屏幕上面会有750个小格子;

我们写上375px的话，会填满安卓手机，但是到了 IPhone6 手机上就可能只有半边了；

这时候就需要前端去做一个视图的兼容，这方面目前市面上已经有挺多好的方案了；

这里只列举几种可以在工作中使用的比较成熟的单位适配方法，以 `webpack` 为例

手淘团队早期的 lib-flexible (REM适配)

此种方法是获取设备屏幕的像素比，然后根据比值改变最外层 font-size 大小来实现的一个适配方案；依赖window对象，如果使用的是 SSR 技术的话，请延迟到客户端再执行改变 font-size 这个动作

使用方法: 首先安装2款 webpack 插件 postcss-pxtorem 是一款 postcss 插件，用于将单位转化为 rem lib-flexible 用于设置 rem 基准值

webpack 配置 poctcss 加入plugin

'postcss-pxtorem': {
    rootValue: 75,
     propList: ['*']
 },

此方法由于兼容性的提高，vw方案成为了可能，所以官方已弃用

vw 适配方案主要会用到一个 webpack 插件

postcss-px-to-viewport 将 px 转换为 vw

使用方法 postcss plugin 中加入

 'postcss-px-to-viewport': {
    viewportWidth: 750,
   viewportHeight: 1334,
    unitPrecision: 5,
   viewportUnit: 'vw',
   selectorBlackList: [],
   minPixelValue: 1,
   mediaQuery: false
}

然后就可以愉快的进行编码了，但是要注意，这个不会对内联样式进行转换，如果必须用到的话，请写个loader 转换成 vw, 或者避免使用这种内联样式；

第三种看到的 vw + rem 进行适配，有股 hack 的味道

给 html 加上 font-size 属性

html{font-size:13.33333333vw}
@media (min-width: 560px) {   
  html {       font-size: 54px;     }  
}

@media 是兼容大屏幕设备的，大于 560px 的设备上会显得太大，所以就此兼容...

此时 1rem 就等于设计稿上的 100px

那么编码的时候只需要填写对应的rem就行了

原文链接

cjfff / issue-blog

移动端适配方案 #8

为什么要使用适配？

这里只列举几种可以在工作中使用的比较成熟的单位适配方法，以 `webpack` 为例

cjfff / issue-blog

移动端适配方案 #8

为什么要使用适配？

这里只列举几种可以在工作中使用的比较成熟的单位适配方法， 以 webpack 为例

这里只列举几种可以在工作中使用的比较成熟的单位适配方法，以 `webpack` 为例