@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. SpringMVC(day1搭建SpringWebMvc项目)

    MVC和webMVC的区别 Model(模型) 数据模型,提供要展示的数据,因此包含数据和行为,行为是用来处理这些数据的.不过现在一般都分离开来:Value Object(数据) 和 服务层(行为). ...

  2. python学习2—python3特性与各种运算符

    python学习2—python3特性与各种运算符 python3与python2相比具有的新特性 在python2中可以使用__future__模块调用python3的特性 print()函数必须带 ...

  3. 面试系列38 分库分表之后,id主键如何处理?

    (1)数据库自增id 这个就是说你的系统里每次得到一个id,都是往一个库的一个表里插入一条没什么业务含义的数据,然后获取一个数据库自增的一个id.拿到这个id之后再往对应的分库分表里去写入. 这个方案 ...

  4. vue 父子组件、兄弟组件传值

    参考文章:Vue2.0子同级组件之间数据交互 1.父组件可以使用 props 把数据传给子组件.2.子组件可以使用 $emit 触发父组件的自定义事件. (一)父组件给子组件传值,关键字:props ...

  5. cpu子系统(优化)

    如果业务已经在线上,你要优化,第一步如何做 首先进行服务器数据采集,和性能监测分析 一:使用cacti,nagios,zabbix 等监控工具 二:使用linux 自带的一些监控指令:vmstat,i ...

  6. Spring Boot 成长之路(一) 快速上手

    1.创建工程 利用IntelliJ IDEA新建一个Spring Boot项目的Web工程 2.查看初始化的spring boot项目 工程建好之后会出现如下的目录结构: 值得注意的第一件事是,整个项 ...

  7. 判断MDI窗体的子窗体是否存在

    //***************************************************************************//函 数名: CreateForm//返 回 ...

  8. Delphi 实现窗体无标题栏有边框

    1.在窗体的public区写下这一句: Procedure CreateParams(var Params :TCreateParams);override;2然后把光标停在这一行上,按下Ctrl+S ...

  9. android studio 正式版本

    注意:以下 Android Studio 下载链接全是 dl.google.com 开头的官方下载,无需tizi,建议用浏览器直接从官方原始链接下载,不要用迅雷下载.不要用迅雷下载.不要用迅雷下载,重 ...

  10. day 84 Vue学习之vue-cli脚手架下载安装及配置

    Vue学习之vue-cli脚手架下载安装及配置   1. 先下载node.js,下载地址:https://nodejs.org/en/download/ 找个目录保存,解压下载的文件,然后配置环境变量 ...