分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 前端开发

读jquery-weui的rem.less

发布时间:2023-09-06 01:32责任编辑:苏小强关键词:暂无标签

和sui、light7有一些渊源,项目使用的是light7,不过其他两者的文档也都看了,感觉不到大的差别。

//// Rem// --------------------------------------------------// Vertical screen//375屏幕为 20px,以此为基础计算出每一种宽度的字体大小//375以下不变,375以上等比放大@baseWidth: 375px;@baseFont: 20px;html { ?font-size: @baseFont; ?//默认当做320px宽度的屏幕来处理}body { ?font-size: 16px;}@bps: 400px, 414px, 480px; .loop(@i: 1) when (@i <= length(@bps)) { ?//注意less数组是从1开始的 ?@bp: extract(@bps, @i); ?@font: @bp/@baseWidth*@baseFont; ???@media only screen and (min-width: @bp){ ???html { ?????font-size: @font !important; ???} ?} ?.loop((@i + 1));};.loop;

1.默认的是竖屏情况下的展示。隐约的表明我们要自己禁止横屏或是自己做横屏适应。我的做法是用户横屏时直接出弹框提示。

2.以375px宽设备的逻辑像素为基准---20px=1rem,计算公式为 x/20=width/375;其中width为设备的逻辑像素,反计算出新的rem基准值。赋值给html。sui,light7,和jquery--weui只给常见的375,414等添加了判断。安卓设备逻辑像素大多是360px,不在判断范围内,直接设置成16px了,没有套用计算公式。

3.像是padding,margin,font-size等尽量换算成rem,自适应屏幕。

读jquery-weui的rem.less

原文地址:http://www.cnblogs.com/Merrys/p/8098636.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved