@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. python list基本操作一

    a = [1,2,3,1,2,3] 一.删除元素 1.按索引删除: a.pop(1) # 删除第二个值 # in:[1,2,3,2] # out:[1,3,2] 返回值:被删除的元素,这个时候list ...

  2. css玩转文字

    <div style=" direction:rtl; unicode-bidi:bidi-override">文字被反转过来了</div> 执行后的效果为 ...

  3. Alice拜年 模板题 /// 最短路Dijk oj1344

    题目大意: 大年初一,Alice带上拜年礼物去给N-1位亲朋好友长辈拜年,亲友真多啊,是个大家族.由于Alice才2岁,力气不大,每次只能拿一份礼物,拜完年之后,要回家取第二份礼物,然后去下一家拜年( ...

  4. Read-Write lock 看可以,不过看的时候不能写

    当线程“读取”实例的状态时,实例的状态不会改变,只有线程对实例“写入”操作时才会改变.read-write lock 模式将读取和写入分开来处理,在读取数据前获取读锁定,而写入之前,必须获取写锁定. ...

  5. Java oop第08章_JDBC01(入门)

    一. JDBC的概念: JDBC(Java Database Connectivity)java数据库链接,是SUN公司为了方便我们Java程序员使用Java程序操作各种数据库管理系统制定的一套标准( ...

  6. (上线时清缓存)laravel 5.1 的程序性能优化(配置文件) - 简书

    代码上到正式环境后执行这六步 php artisan config:clear php artisan config:cache php artisan route:clear php artisan ...

  7. Linux 添加时间

    添加在指令后面 `date +%Y%m%d%H%M`注意date和+之间一定要有空格 ps: %%    一个文字的 %  %a    当前locale 的星期名缩写(例如: 日,代表星期日)  %A ...

  8. day13 python-001 简介及循环、判断、复制等

    Python之路,Day1 = Python基础1 本节内容 1.Python历史简介以及安装.环境变量的配置: 2.Pycharm的简单设置: 3.变量的使用及定义: 4.获取键盘输入及打印: 5. ...

  9. Eclipse中servlet简易模版

    package ${enclosing_package}; import java.io.IOException; import javax.servlet.ServletException; imp ...

  10. duilib库分析1.消息流程分析

    看下CWindowWnd类与CPaintManagerUI类是咋进行消息分发的吧. 1. 先看下CPaintManagerUI类的MessageLoop函数: void CPaintManagerUI ...