前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >一次讲清移动端适配解决方案—rem和vw

一次讲清移动端适配解决方案—rem和vw

作者头像
Ewall
发布2020-04-01 21:21:12
1.1K0
发布2020-04-01 21:21:12
举报
文章被收录于专栏:vue学习

目前移动端的适配方案一般就是两种,一个是rem方案,一个就是vw的方案,本篇就是一次性讲清楚如何去运用这两种方案来解决问题。 panda-vue-template 手把手搭建vue小商城2.0

1、关于rem

  • rem的原理什么的我就不说了,网上搜文章一搜一大把。
  • 一般是使用手淘的lib-flexible.js,但是这个作为一种过渡方案已经被废弃了,目前已不推荐在你的新项目中使用这个方案来解决手机适配问题。
  • 感兴趣可以看看我老早以前写的这篇-->手机适配问题之rem和lib-flexible,我们主要还是来谈谈如何用vw来解决这个手机适配问题。

2、安装postcss

  • 要实现使用vw来实现移动端的适配,我们先需要安装postcss。一般来说是这样:
代码语言:javascript
复制
$ npm i postcss-loader --save-dev
代码语言:javascript
复制
$ npm install postcss-px-to-viewport --save-dev
  • 它可以将我们设置px值自动转化为相应的vwvh之类的值。

3、配置

  • 如果你的项目是用最新的vue-cli3.x来构建了,那么我们连postcss-loder都不用安装,它内部就使用了它。
  • 但是一般我一般更加倾向于新建一个postcss.config.js来配置这部分内容,这样可能更加直观点吧。
代码语言:javascript
复制
module.exports = {
  plugins: {
    'postcss-px-to-viewport': {
      unitToConvert: 'px',
      viewportWidth: 750,
      unitPrecision: 3,
      propList: ['*'],
      viewportUnit: 'vw',
      fontViewportUnit: 'vw',
      selectorBlackList: ['.ignore'],
      minPixelValue: 1,
      mediaQuery: false,
      replace: true,
      exclude: [],
      landscape: false,
      landscapeUnit: 'vw',
      landscapeWidth: 568
    }
  }
}

4、小结

  • 其实使用vw来实现移动端的适配还是比较简单的,主要就是使用postcss-px-to-viewport这个插件。
  • 大概就这么多吧。
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1、关于rem
  • 2、安装postcss
  • 3、配置
  • 4、小结
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档