vue中使用rem布局
2019-08-20 10:28
316 查看
版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_43925811/article/details/99824090
此处已vue为例,在使用vue-cli搭建好项目框架后,在目录结构的index.html文件中添加一段js代码:
fnResize(); window.onresize = function () { fnResize(); } function fnResize() { var deviceWidth = document.documentElement.clientWidth || window.innerWidth; if (deviceWidth >= 750) { deviceWidth = 750; } if (deviceWidth <= 320) { deviceWidth = 320; } document.documentElement.style.fontSize = (deviceWidth / 7.5) + 'px'; }
然后在写css就可以将px单位换成rem.
这里设置的比例是100px=1rem,
例如:宽度为100px时,可以直接写成1rem
相关文章推荐
- vue 项目使用 rem 布局
- vue.js中使用rem布局
- 关于使用rem单位,calc()进行自适应布局
- 移动端使用rem布局,在华为机型上超出屏幕
- 关于使用rem单位,calc()进行自适应布局
- 关于使用rem单位,calc()进行自适应布局
- Vue-cli3.X使用px2 rem遇到的问题及解决方法
- Html5移动开发(2)rem使用和基本布局
- vue项目使用webpack loader把px转换为rem
- less在浏览器直接使用以及rem布局
- 如何在vue项目中使用递归组件配合Element-ui布局侧边栏
- [Vue] 九、使用名命视图实现经典布局!!!
- `移动端布局``rem单位使用``flexible适配``gulp中的sass插件和bowsersync的使用
- 使用rem实现全屏幕自动适配(等比例缩放布局样式)
- rem布局封装及使用
- 使用 rem 实现 适配各种屏幕布局
- 浅谈使用element ui + vuedraggable + sortablejs实现多种版式布局及托拽(1)
- vue 移动端屏幕适配 使用rem
- 移动端rem布局背景图片使用以及sprite雪碧图
- 在rem布局下使用背景图片以及sprite