@ue-width: 750; /* 设计图的宽度 */
.px2rem(@px) {
@remValue: @px/@ue-width*10;
@pxToRem: ~"@{remValue}rem";
} /*使用*/
.cat-icon {
.px2rem(100);
width: @pxToRem;
height: @pxToRem;
}

写法比较局限,一个class中只能有一个数值做转换,连续使用会按照最后一个计算出的rem值解析。

多次使用要多次设置类名。累赘。

先记录下。以后有更优化方式再修改。

Less适配移动端rem的更多相关文章

  1. 关于移动端rem适配

    var num = 1 / window.devicePixelRatio; var fontSize = document.documentElement.clientWidth / 10; doc ...

  2. 谈谈我的移动端rem适配方案

    最近有点怀疑人生,毕竟一个人写前端,有时候会怀疑自己理解的一些东西包括用法有没有符合标准.趁着这阵子闲下来,翻了翻别人的rem适配博客,发现有点绕口,怪自己是个强迫症,啥都要自己去试试结果并从中理解, ...

  3. Vue将px转化为rem适配移动端

    Vue将px转化为rem适配移动端 1.下载lib-flexible我使用的是vue-cli+webpack,所以是通过npm来安装的npm i lib-flexible --save 2.引入lib ...

  4. 07. 如何实现移动端rem适配

    如何实现移动端rem适配 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...

  5. 本周汇总 动态rem适配移动端/块状元素居中/透明度

    1.动态rem适配移动端 !function(){ var width = document.documentElement.clientWidth; var head=document.getEle ...

  6. 九、响应式发:rem和less(适配移动端)

    一.响应式开发 响应式开发优先适配移动端又兼容到pc端 官网:https://less.bootcss.com/usage/ 教程:https://www.w3cschool.cn/less/ rem ...

  7. 移动端rem适配&iOS兼容

    移动端rem适配js // 默认375,750设计稿请将375替换为750 (function (doc, win) { // 移动端适配 var docEl = doc.documentElemen ...

  8. H5 端 rem 适配方案与 viewport 适配

    H5 端 rem 适配方案与 viewport 适配 rem rem 是 CSS3 新增的一个相对单位(root em,根 em) 只根据当前页面 HTML 页面的 font-size 设置,如果根目 ...

  9. 移动web开发适配方案之Rem

    移动端为什么要做适配 移动端相对PC端来说大部分浏览器内核都是基于Webkit的,所以大部分都支持CSS3的最新语法.但是由于手机的屏幕尺寸和分辨率都不太一样(尤其是安卓),所以不得不对不同分辨率的手 ...

随机推荐

  1. Codeforces 1176A Divide it!

    题目链接:http://codeforces.com/problemset/problem/1176/A 思路:贪心,对第二个操作进行俩次等于将n变成n/3,第三个操作同理,我们将n不断除以2,再除以 ...

  2. Android 开发 框架系列 OkHttp文件上传功能实现(含断点续传)

    前言 此篇博客只是上传功能的记录demo,如果你还不太了解okhttp可以参考我的另一篇博客https://www.cnblogs.com/guanxinjing/p/9708575.html 代码部 ...

  3. AndroidStudio 搜索导入自己需要的库

    前言 在Androidx的库应用后,导致有需多系统组件库需要重新 implementation 升级为Androidx, 但是你可能会发现不知道怎么导入他们.  当然除了导入Android的组件库,还 ...

  4. layui中的tab切换

    tab切换是常见的效果,为了方便经常使用插架中自带的,下面是layui中自带的tab切换效果, 主要代码如下: <!DOCTYPE html> <html lang="en ...

  5. 帆软报表PC端实施报表心得体会

    1.报表制作完成后,预览时自动显示查询内容,在控件处设置: 2.求一列数据的最小值(除去0),并对最小值字体加粗标绿,需要对对应单元格设置条件属性,并插入公式:C6 = min(greparray(C ...

  6. 【JZOJ6271】锻造 (forging)

    description analysis 首先看一下\(p=1\),即\(1\)以后的合成一定成功的情况 如果按照求期望值的一般做法求两把\(0\)合成\(1\)的期望,会画出一棵无穷大的树 这个的期 ...

  7. String 详解

    String String对象不可变,当对象创建完毕之后,如果内容改变则会创建一个新的String对象,返回到原地址中. 不可变优点: 多线程安全. 节省空间,提高效率. 源码: public fin ...

  8. SpringBoot_05_ssm拦截器和默认欢迎页面的设置

    1.在springBoot下通过使用拦截器完成在没有登陆的前提下,不允许访问其他资源 编写拦截器,要实现HandlerInterceptor @Component public class UserI ...

  9. (转)获取android手机内部存储空间和外部存储空间的参数 && 如何决定一个apk的安装位置

    转:http://blog.csdn.net/zhandoushi1982/article/details/8560233 获取android文件系统的信息,需要Environment类和StatFs ...

  10. Mysql优化系列之查询优化干货1

    从这一篇开始,准备总结一些直接受用的sql语句优化,写sql是第二要紧的,第一要紧的,是会分析怎么查最快, 因为当你写过很多sql后,查询出结果已经不是目标,快,才是目标.另外,通过测试和比较的结果才 ...