一、背景&现状
目前公司内部移动端各种类型的页面使用了不同的适配方式，不同的适配方式存在一定的弊端，需要统一及明确移动端适配规范。
效果：可以在各类不同型号手机机型自适应大小，可以在iPad上友好展示。
C端举例：
hybrid页面：没有使用任何适配方式，直接使用px做样式布局
h5项目：没有使用任何适配方式，直接使用px做样式布局
活动页面：使用rem布局，未对iPad做适配
二、行业实践
- rem适配方案（postcss-pxtorem + amfe-flexible）
-
- 代表：拼多多、淘宝
- 优点：老牌兼容方式，兼容性好，使用者广泛
- 缺点：需要通过js动态控制根元素
font-size的大小，css代码和js代码有一定的耦合性，且必须把动态调整font-size的js代码放在css样式之前
- vw适配方案（postcss-px-to-viewport）拍拍贷
-
- 代表：拍拍贷
- 优点：不需要js动态计算，完美解决rem适配方案的缺点
- 缺点：安卓和ios低版本、IE老版本不支持（移动端目前不需考虑）；由于依赖视口大小而自动缩放，无论视口过大还是过小，它也会随视口过大或过小，失去了最大最小宽度限制
- rem + vw + media方案，设置font-size为vw，页面布局使用rem，通过media方案对过大或过小宽度做限制
-
- 代表：京东
- 优点：完美结合了rem和vw适配的优点，适合视觉组件种类比较多，视觉设计对元素位置的相对关系依赖较强的移动端页面
- px + flex + 百分比方案
-
- 代表：携程
- 优点：适合文本内容较多，希望引导用户沉浸在更多内容而不是更大的内容
拼多多、淘宝布局
拼多多首页（m.pinduoduo.com）rem 方案
- iPad没做单独适配导致文字偏大
- 整体布局百分比，文字和距离rem
京东布局
京东首页（m.jd.com）rem + vw + @media布局
- 整体布局为百分比布局
- 具体的文字和间距为rem
- 结合media布局
三、业务接入流程
怎么使用？
哪些团队会用到？
现有开发模式下如何接入？
rem + vw + media适配方案 （针对某些页面或者样式采用特殊的配置）
- 项目安装postcss、postcss-pxtorem包
pnpm add postcss postcss-pxtorem -D
- 根目录下增加
postcss.config.cjs文件
module.exports = {
plugins: {
'postcss-pxtorem': {
rootValue: 100,
propList: ['*'],
unitPrecision: 5,
exclude: file => {
// 忽略文件
const ignore = ['src\assets\styles\common.scss'];
for (const str in ignore) {
if (file.indexOf(str) != -1) return false;
}
return true;
}
}
}
};
- 增加
common.scss文件
html {
font-size: 100px;
font-size: 26.66666vw
}
@media screen and (max-width: 320px) {
html {
font-size: 100px
}
}
@media screen and (min-width: 540px) {
html {
font-size:100px
}
}
- 排除编译
- 针对某些文件不想编译保持px，在
postcss.config.cjs中exclude掉 - 针对文件中的某些元素保持px，使用Px
// `Px` or `PX` is ignored by `postcss-pxtorem` but still accepted by browsers
.ignore {
border: 1Px solid; // ignored
border-width: 2PX; // ignored
}
五、结论
整体采用rem+vw+media查询方案，针对特殊的页面采用忽略编译方式，针对页面内某个样式采用PX方式
