经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » Vue.js » 查看文章
vue 移动端屏幕适配 使用rem
来源:cnblogs  作者:huangenai  时间:2018/9/26 17:54:59  对本文有异议

要想移动端适配 并使用 rem  您需要先看这篇文章,配置好less ?? 在vue 中使用 less,就可以使用rem了

 

如果项目已经开发的差不多了,没有用到rem 又要使用rem,您用这招。

postcss-pxtorem:转换px为rem的插件

安装 postcss-pxtorem

  1. npm install postcss-pxtorem --save

 

新建rem.js文件

  1. const baseSize = 32
  2. // 设置 rem 函数
  3. function setRem () {
  4. // 当前页面宽度相对于 750 宽的缩放比例,可根据自己需要修改。
  5. const scale = document.documentElement.clientWidth / 750
  6. // 设置页面根节点字体大小
  7. document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px'
  8. }
  9. // 初始化
  10. setRem()
  11. // 改变窗口大小时重新设置 rem
  12. window.onresize = function () {
  13. setRem()
  14. }

并引用进main.js文件内

  1. import './rem'

 

 修改.postcssrc.js 文件

.postcssrc.js文件内的 plugins 添加以下配置,配后就可以在开发中直接使用 px 单位开发了

  1. "postcss-pxtorem": {
  2. "rootValue": 32,
  3. "propList": ["*"]
  4. }

 

helloworld.vue

  1. <template>
  2. <div class="hello">
  3. test
  4. </div>
  5. </template>
  6.  
  7. <script>
  8. export default {
  9. name: 'HelloWorld',
  10. data() {
  11. return {
  12. msg: 'Welcome to Your Vue.js App'
  13. }
  14. }
  15. }
  16. </script>
  17.  
  18. <style scoped>
  19. .hello {
  20. text-align: center;
  21. font-size: 20px;
  22. width: 300px;
  23. height: 400px;
  24. background:red;
  25. }
  26. </style>

效果

 

 

此随笔乃本人学习工作记录,如有疑问欢迎在下面评论,转载请标明出处。

如果对您有帮助请动动鼠标右下方给我来个赞,您的支持是我最大的动力

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号