rem 自适应方案
宽度 1920 时, 1rem 等于 100px.方便换算
1 | (function(doc, win) { |
使用开发工具 计算rem
默认 1920 下16px,插件 px to rem 默认配置 16px
1 | window.addEventListener('resize', () => { |
vue+amfe-flexible开发移动端
(手淘移动端适配方案)
1 | cnpm install amfe-flexible -S |
配置main.js
1 | //引入 |
配置 vue.config.js
1 | module.exports = { |
修改 index.html
1 | <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> |
此插件也可直接于页面引入
1 | <script src="<%= BASE_URL %>static/amfe-flexible.js"></script> |
在CSS样式中可直接书写750PX,既表明 整屏的宽度,若是设计图不是750的,可在vue.config.js中 rootValue属性,修改成设计图宽度便可,详见vue.config.js注释说明**css
postcss-pxtorem 缺陷
内联样式,行内样式 px单位不会自动转换,需要手动处理
1 | function px2rem(px){ |
1 | <Dialog |
- 本文作者: 王不留行
- 本文链接: https://wyf195075595.github.io/2022/07/21/programming/javascript/rem适配/
- 版权声明: 本博客所有文章除特别声明外,均采用 MIT 许可协议。转载请注明出处!