美文网首页
在vue中如何使用组件和rem布局(webapp)

在vue中如何使用组件和rem布局(webapp)

作者: 我那么逗 | 来源:发表于2020-09-19 11:23 被阅读0次

# 导入所需要的组件

                   import { Button } from 'vant'

# 把Vant组件变成局部组件

                    components: {

                            [Button.name]: Button

                    }

# 在视图中使用vant组件

                    <van-button type='danger'>按钮</van-button>

# rem布局

dpr = 屏幕像素(px) / 物理尺寸

dpr = 2  二倍屏

dpr = 3  三倍屏

移动端布局:vw/vh,flexible,rem(最常用)

rem:相对html标签的根字体大小,倍数关系

em:相对于父级字体的大小,倍数关系

px:绝对单位

目标:10rem等于满屏

做法:把当前页面的根字体的大小等于当前屏幕宽度的1/10

  第一步获取html标签dom对象 oHTML

  第二步通过js获取当前屏幕的宽度 w(单位是px)

  第三步,oHTML.fontSize = w*0.1 + 'px'

代码实现

原理:等比缩放

建议在vscode安装一个cssrem的插件,它的作用是自动帮我把px单位转化成rem单位。

它需要进行基准单位设置,设置成75(1rem=75px)

相关文章

网友评论

      本文标题:在vue中如何使用组件和rem布局(webapp)

      本文链接:https://www.haomeiwen.com/subject/hvjeyktx.html