移动端开发rem布局之less+媒体查询布局的原理步骤

来源:http://www.chinese-glasses.com 作者:Web前端 人气:64 发布时间:2020-03-24
摘要:时间: 2019-11-03阅读: 98标签: rem 时间: 2019-09-13阅读: 108标签: lessrem: 最近在学习小程序,要把html的代码转换成小程序界面,其中就遇到了rem的转换问题,但小程序不太兼容rem,不是不能

时间: 2019-11-03阅读: 98标签: rem

时间: 2019-09-13阅读: 108标签: lessrem:

最近在学习小程序,要把html的代码转换成小程序界面,其中就遇到了rem的转换问题,但小程序不太兼容rem,不是不能用rem,而是没办法设置根元素的font-size,因为rem是相对于根元素的font-size,而小程序的根元素font-size一直是16px。既然我设置了page{ font-size:1px }也不起作用,那要怎么实现rem呢

rem即是以html文件中font-size的大小的倍数

这里我用css变量来实现伪rem,定义一个css变量--app-rem-size,然后在各个屏幕尺寸中定义--app-rem-size大小值;

rem布局的原理:

以下是app.wxss文件

通过媒体查询设置不同屏幕宽度下的html的font-size大小,然后在css布局时用rem单位取代px,从而实现页面元素大小的动态适配,做出更漂亮整洁的页面

page{ --app-rem-size:10px; font-size:calc(var(--app-rem-size)*1.2);}@media screen and (min-width: 320px) and (max-width: 359px) { page { --app-rem-size: 10px; }}@media screen and (min-width: 360px) and (max-width: 413px) { page { --app-rem-size: 12px; }}@media screen and (min-width: 414px) { page { --app-rem-size: 14px; }}

rem布局的好处:1.页面整洁2.动态适配

然后在我需要用到rem的地方,比如 height:calc(var(--app-rem-size)*2) 这样使用,虽然有点麻烦,但也是没办法中的办法了。

缺点:1.需要计算rem,但可以通过自动转化单位插件弥补

less:

是一门css扩展语言,也成为css预处理器,引入了变量,mixin(混入)、运算以及函数等功能

css弊端:

1.冗余度高

2.维护成本高

3.没有很好的计算能力less变量定义:

本文由10bet发布于Web前端,转载请注明出处:移动端开发rem布局之less+媒体查询布局的原理步骤

关键词:

上一篇:自学WEB前端的详细路线

下一篇:没有了

最火资讯