背景:
满屏高保证图片,无法适应不同款高比例 小屏幕无法展示完全,大屏幕空白区域过大
适配进化历程
静态布局 采用px 加meta 标签缩放
流式布局 宽度百分比 高度px (会被拉伸,高度不变 全屏展示会出问题)
弹性布局 rem vw em ()
媒体查询 Bootstrap 样式多 布局不一 开发设计工作量大
淘宝: 实时生成行内样式 不随视口变化
京东: rem + px 部分高度rem 部分px
网易: vw + rem
58 : 百分比 + px / 子页面 rem + 媒体查询
rem 实现方式:
方案一:
-- dpr + rem
-- 设置标签 `<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5">`
-- 优点: 根据不同手机 还原度高 1px 问题
代码:
const vpFunc = () => {
var dpr = window.devicePixelRatio;
var meta = document.createElement('meta');
var scale = 1 / dpr;
const resizeEvt ='orientationchange' in window ? 'orientationchange' : 'resize';
meta.setAttribute('name', 'viewport');
meta.setAttribute('content', 'width=device-width, user-scalable=no, initial-scale=' + scale +
', maximum-scale=' + scale + ', minimum-scale=' + scale);
document.getElementsByTagName('head')[0].appendChild(meta);
const recalc = function () {
var deviceWidth = document.documentElement.clientWidth;
console.log(deviceWidth,'--deviceWidth')
document.documentElement.style.fontSize = (deviceWidth / 10) +'px';
};
if (!document.addEventListener) return;
document.addEventListener('DOMContentLoaded', recalc, false);
window.addEventListener(resizeEvt, recalc, false);
recalc()
}
方案二:
不缩放 + rem ` <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />`
只需监听屏幕变化 设置font-size
缺点:分辨率 细节不清晰
开发书写:
1、写开发时写rem
2、开发时写px
— 插件转 rem(
postcss-pxtorem、
postcss-px2rem、
postcss-px-to-viewport (不需要监听屏幕宽度改变,不用设置font-size)
)
过滤不想转译的px 使用PX 或者在配置过滤掉
优点: 无需计算、可兼容老项目修复 配置灵活
缺点: 行内样式无法转译成功
层次较深文件 无法转译rem (还未知)
// require('postcss-pxtorem')({
// rootValue: 10, //结果为:设计稿元素尺寸/16,比如元素宽320px,最终页面会换算成 20rem
// propList: ["*"], //是一个存储哪些将被转换的属性列表,这里设置为['*']全部,假设需要仅对边框进行设置,可以写['*', '!border*']
// unitPrecision: 5, //保留rem小数点多少位
// //selectorBlackList: ['.radius'], //则是一个对css选择器进行过滤的数组,比如你设置为['fs'],那例如fs-xl类名,里面有关px的样式将不被转换,这里也支持正则写法。
// replace: true, //这个真不知到干嘛用的。有知道的告诉我一下
// mediaQuery: false, //媒体查询( @media screen 之类的)中不生效
// minPixelValue: 2, //px小于12的不会被转换
// }),
// require('postcss-px-to-viewport')({
// viewportWidth: 375, // 视窗的宽度,对应的是我们设计稿的宽度
// // viewportHeight: 667, // 视窗的高度,对应的是我们设计稿的高度(也可以不配置)
// unitPrecision: 5, // 指定'px'转换为视窗单位值的小数位数(很多时候无法整除)
// viewportUnit: 'vw', // 指定需要转换成的视窗单位,建议使用vw
// minPixelValue: 1, // 小于或者等于'1px'不转换为视窗单位
// mediaQuery: false, // 允许在媒体查询中转换'px'
// selectorBlackList: [] // 指定不需要转换的类,或者在不需要转换的,写的时候后面多跟一个类名
// // exclude: [/tabbar/]
// }),
扩展阅读:
lib-flexible 源码
https://github.com/imochen/hotcss