关于pc端适配走了很多弯路。
现有设计图 1920
方案一:
1.使用postcss-pxtorem + amfe-flexible
2.创建postcss.config.js 文件
postcss.config.js配置如下
module.exports = {
plugins: {
"postcss-pxtorem": {
rootValue: 192, // 设计图尺寸
propList: ["*", '!border'],
unitPrecision: 4,//px变为rem后保留的小数位数
minPixelValue: 2 //px小于2px时不替换为rem
}
}
}`
方案可行性: 不可行,因为谷歌浏览器最小字体大小12px,根据设计图配置rem 后 存在很多比12小的字体。这样造成了很多地方不能100%还原设计图。 rem只使用与移动端开发
方案二:
设计图1920,可视区域肯定是1200, 所有就有了720的安全距离,所以开发的时候设置最小宽度1200, 剩余的所有空间设置成安全距离(外边距) 。 然后严格按照设计尺寸进行开发,(px为单位进行开发)
方案可行性: 方案可行