前端页面适配有两大方向:一是布局适配,可以使PC、手机、平板共用一份代码,实现方法有css 媒体查询、css 弹性盒子布局、 css grid布局等。二是高清适配,面对的是移动开发中设备不同分辨率和不同尺寸,最大限度还原设计稿效果。

flexible.js是高清适配的一种方法,它通过javascript根据不同设备的dpr值和设备宽度为html动态设置font-size,其他元素使用rem做单位。推荐先阅读下面两篇文章,了解相关概念和实现原理:

相关概念

flexible原理

基本的用法详见仓库, 在实际运用中碰到几个问题:

  • 字体大小,这个问题要根据设计师的要求具体分析。如果要求是在所以设备上字体都统一大小就需要以下做法:
1
2
3
4
5
6
7
.title{
font-size: 19px;
text-align: center;
}
[data-dpr="2"] .title {
font-size: 37.5px;
}

这样在dpr=1和dpr=2的设备上字体大小是统一的。 但是更多情况下字体大小是和设计稿的其他元素相关联的,需要和整个页面一起缩放,这时直接使用rem作单位就行了。

1
2
3
4
.title{
font-size: 0.5rem;/* 37.5px */
text-align: center;
}
  • 单位换算,默认1rem = 75px,我们从设计稿得到的尺寸是px为单位的,如果要换算成rem作单位需要依赖编译器插件,而且会出现小数的情况。所以可以自定义flexible.js文件,使1rem = 100px, 这样只需心算一下就能换算单位了。详见仓库
  • 第三方插件,上述的基本示例中html里并没有设置而是通过flexible.js自动添加的,当dpr=1时缩放比为1,当dpr=2时缩放比为0.5。由于一般第三方插件的尺寸都是依据dpr=1确定大小使用px为单位,所以为了兼容,需要为页面显式设置viewport。详见仓库
1
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
  • 自动编译

px2rem-loader : webpack加载器,将px换算rem

gulp-px3rem : gulp插件