vue移动端屏幕自适应

移动端屏幕自适应

1.rem:

rem(font size of the root element)是指相对于根元素的字体大小的单位


2.想法:

使用rem,字体大小与html标签的font-size属性相关,那么只要根据屏幕大小改变html标签的font-size属性,字体大小就与屏幕大小相关,就能使得移动端屏幕自适应


3.根据屏幕大小改变html标签的font-size属性:

使用单位vw,1vw === 1/10屏幕宽度,这样就可以根据屏幕大小改变html标签的font-size属性


4.px转rem:

设计图使用px为单位,难道要自己一个个去换算rem吗?使用postcss-pxtorem插件自动转换

npm install postcss-pxtorem --save-dev

在项目根目录新建postcss.config.js,参考配置如下:

module.exports = {
  plugins: {
    'autoprefixer': {
      overrideBrowserslist: ['Android 4.1', 'iOS 7.1', 'Chrome > 31', 'ff > 31', 'ie >&#
  • 0
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值