读jquery-weui的rem.less

Posted Merrys

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了读jquery-weui的rem.less相关的知识,希望对你有一定的参考价值。

和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的主要内容,如果未能解决你的问题,请参考以下文章

关于jquery-weui.js中时间控件datetimepicker的使用

jquery-weui滚动事件的注册与注销

JQuery-WeUI

vue怎么引入jquery-weui

vue-cli搭建项目引入jquery和jquery-weui步骤详解

Android 逆向Linux 文件权限 ( Linux 权限简介 | 系统权限 | 用户权限 | 匿名用户权限 | 读 | 写 | 执行 | 更改组 | 更改用户 | 粘滞 )(代码片段