wap移动端 设计图是px 自适应不同手机尺寸 px2rem vue样式初始化

 

 需求点 : 产品给的设计图是750px宽度的    要求适配所有机型的移动端  

参考 https://www.cnblogs.com/wtsx-2019/p/12656554.html

移动端vue配置 REM 适配

设计图给的 使用px作为单位,如果需要使用rem单位,推荐使用以下两个工具:

 

postcss-pxtorem 是一款 postcss 插件,用于将单位转化为 rem

amfe-flexible 用于设置 rem 基准值

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

 

1、安装

# yarn add amfe-flexible

npm i amfe-flexible

 

2、然后在 main.js 中加载执行该模块

...

import ‘amfe-flexible‘

 

最后测试:在浏览器中切换不同的手机设备尺寸,观察 html 标签 font-size 的变化。

 

二、使用 postcss-pxtorem 将 px 转为 rem

 

1、安装

 

# yarn add -D postcss-pxtorem

# -D 是 --save-dev 的简写

npm install postcss-pxtorem -D

 

2、然后在项目根目录中创建 vue.config.js 文件

wap移动端 设计图是px  自适应不同手机尺寸  px2rem  vue样式初始化
// vue.config.js
module.exports = {
  lintOnSave: true,
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          require(‘postcss-pxtorem‘)({
            // 设计稿 375:37.5
            // 设计稿:750:75
            rootValue: 75,
            selectorBlackList: [], // 忽略转换正则匹配项
            propList: [‘*‘],
          }),
        ]
      }
    }
  }
}
wap移动端 设计图是px  自适应不同手机尺寸  px2rem  vue样式初始化

 

3、配置完毕,重新启动服务

 

最后测试:在浏览器中审查元素的样式查看是否已将 px 转换为 rem。

注意:

1.只能转换单独的 .css|.less|.scss 之类的文件、.vue 文件中的 style 中的 px

2.不能转换行内样式中的 px

 

 

然后初始化样式

参考 https://www.jianshu.com/p/43f8ac0a11a2

 

一、样式初始化

normalize.css 是什么?
它是css样式初始化的插件。
在实际的开发中,我们经常会将浏览器默认的样式重置,比如如下办法:

* {
    margin: 0;
    padding: 0;
    border:0;
}

通过上述办法可以重置样式,但是太过于简单粗暴,*是通配符,需要把所有的标签都遍历一遍,当网站较大时,样式比较多,这样写就大大的加强了网站运行的负载,会使网站加载的时候需要很长一段时间,因此不建议使用。与此同时,normalize.css就诞生了,它与许多CSS重置不同,保留了有用的默认值,更正了常见浏览器不一致性等错误。

二、组件安装

npm install --save normalize.css

三、组件引入

import ‘normalize.css/normalize.css‘


作者:无剑_君
链接:https://www.jianshu.com/p/43f8ac0a11a2
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

wap移动端 设计图是px 自适应不同手机尺寸 px2rem vue样式初始化

上一篇:Android中view.getViewTreeObserver()使用


下一篇:appium原理