一、Rem 布局适配
如果需要使用 rem 单位进行适配，推荐使用以下两个工具：
- postcss-pxtorem 是一款 PostCSS 插件，用于将 px 单位转化为 rem 单位
- lib-flexible 用于设置 rem 基准值
PostCSS 示例配置
下面提供了一份基本的 PostCSS 示例配置，可以在此配置的基础上根据项目需求进行修改。文章来源：https://www.toymoban.com/news/detail-429447.html
// postcss.config.js
module.exports = {
plugins: {
'postcss-pxtorem': {
rootValue: 37.5,
propList: ['*'],
},
},
};
其他设计稿尺寸
如果设计稿的尺寸不是 375，而是 750 或其他大小，可以将 rootValue 配置调整为:
// postcss.config.js
module.exports = {
plugins: {
// postcss-pxtorem 插件的版本需要 >= 5.0.0
'postcss-pxtorem': {
rootValue({ file }) {
return file.indexOf('vant') !== -1 ? 37.5 : 75;
},
propList: ['*'],
},
},
};其他方案
不使用插件的情况下，也可以直接在js里引入这段代码，1920是设计图的设计宽度，也可以自己根据UI给的设计图的宽度进行设置，然后就可以在css里使用rem单位了，如设计图里div为100px，则转化为rem则为1rem
(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'onorientationchange' in window ? 'onorientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
console.log('clientWidth-----------------', clientWidth)
console.log('clientHeight-----------------', docEl.clientHeight)
if (!clientWidth) return;
// if (clientWidth >= 375) { //可以设置适配屏幕大小
// docEl.style.fontSize = '100px';
// } else {
// docEl.style.fontSize = 100 * (clientWidth / 375) + 'px';
// }
docEl.style.fontSize = 100 * (clientWidth / 1920) + 'px';
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);二、Viewport 布局
如果需要使用 viewport 单位 (vw, vh, vmin, vmax)，推荐使用 postcss-px-to-viewport 进行转换。
postcss-px-to-viewport 是一款 PostCSS 插件，用于将 px 单位转化为 vw/vh 单位。
PostCSS PostCSS 示例配置
下面提供了一份基本的 PostCSS 示例配置，可以在此配置的基础上根据项目需求进行修改。
// postcss.config.js
module.exports = {
plugins: {
'postcss-px-to-viewport': {
viewportWidth: 375,
},
},
};
文章来源地址https://www.toymoban.com/news/detail-429447.html
到了这里，关于关于浏览器适配的方案的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
