11.7-vue-pxtorem行内样式不会自动转换-头条项目初始化

404 阅读1分钟

1.vue原理回顾

1.1每日面试题(watch与computed)

image.png image.png

2.vue2项目练习--头条项目

2.1项目初始化

按照流程去初始化一个项目,详细看文档,并及时反思。

2.2封装网络请求axios

image.png

3.浏览器适配---面试常问(rem适配)

**postcss进行rem布局适配(postcss-pxtorem行内样式不会自动转换)**

image.png

3.1rem适配原理--postcss

image.png

3.2安装插件使用---postcss-pxtorem行内样式不会自动转换

image.png

3.2.1使用 lib-flexible 动态设置 REM 基准值(html 标签的字体大小)

image.png

3.2.2使用 postcss-pxtorempx 转为 rem----无需手动计算----行内样式不会自动转换

image.png 注意

image.png 正确配置

/**

  • PostCSS 配置文件 */

module.exports = { // 配置要使用的 PostCSS 插件 plugins: { // 配置使用 postcss-pxtorem 插件 // 作用:把 px 转为 rem 'postcss-pxtorem': { rootValue ({ file }) { return file.indexOf('vant') !== -1 ? 37.5 : 75 }, propList: ['*'] } } }