@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. Array类型中的检测数组,转换方法,栈方法,队列方法

    我的新博客==> http://www.suanliutudousi.com/2017/08/24/array%E7%B1%BB%E5%9E%8B%E4%B8%AD%E7%9A%84%E6%A3 ...

  2. JAVA利用JXL导出 EXCEL (在原有的excel模板上把数据导到excel上)

    添加依赖 <dependency> <groupId>net.sourceforge.jexcelapi</groupId> <artifactId>j ...

  3. Spring Boot + kkFileView-2.1.2 实现文档在线预览

    1. 下载kkFileview:https://gitee.com/kekingcn/file-online-preview/releases 2. 启动服务 进入 bin 目录,双击 startup ...

  4. vue 配置微信分享

    参考:https://www.cnblogs.com/goloving/p/9256212.html 1. main.js import WXConfig from '../../assets/js/ ...

  5. HTTP入门简介

    一.概念:Hyper Text Transfer Protocol 超文本传输协议 传输协议:定义了客户端和服务器端通信时,发送数据的格式 特点: 1.基于TCP/IP的高级协议 2.默认端口号:80 ...

  6. shell 命令 修改文件权限 chmod

    1. 所有者+.-权限 更改那个拥有者的权限 u  表示文件的所有者 g  表示文件所在的组 o  表示其他用户 a  所有,以上三者 增加 / 减少权限 + 表示增加权限 - 表示取消权限 更改具体 ...

  7. MySQL数据库之DDL(数据定义语言)

    1.MySQL数据库之DDL创建.删除.切换 (1)查看所有数据库 show databases: (2)切换数据库 use 数据库名: (3)创建数据库 create database 数据库名: ...

  8. 用Jquery写返回顶部代码

    <!DOCTYPE html><html><head><meta charset="utf-8" /><title>jq ...

  9. js实现F5键刷新后菜单保持之前状态以及监听F5页面刷新子iframe 而父页面不刷新

    利用layui实现菜单效果时,刷新页面仍回到首页状态,需要 实现iframe子页面刷新父元素不刷新,下面是代码 //刷新时禁用F5的默认事件 $(document).keydown(function ...

  10. 【JZOJ6378】小w与数字游戏(game)

    description analysis 对于\(n\)很大,一眼看出来肯定有两个相等的数减出来是\(0\),答案肯定是\(0\) 其实只要\(n>7\),由于斐波那契数列,肯定能有几个数的和减 ...