Less适配移动端rem
@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的更多相关文章
- 关于移动端rem适配
var num = 1 / window.devicePixelRatio; var fontSize = document.documentElement.clientWidth / 10; doc ...
- 谈谈我的移动端rem适配方案
最近有点怀疑人生,毕竟一个人写前端,有时候会怀疑自己理解的一些东西包括用法有没有符合标准.趁着这阵子闲下来,翻了翻别人的rem适配博客,发现有点绕口,怪自己是个强迫症,啥都要自己去试试结果并从中理解, ...
- Vue将px转化为rem适配移动端
Vue将px转化为rem适配移动端 1.下载lib-flexible我使用的是vue-cli+webpack,所以是通过npm来安装的npm i lib-flexible --save 2.引入lib ...
- 07. 如何实现移动端rem适配
如何实现移动端rem适配 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...
- 本周汇总 动态rem适配移动端/块状元素居中/透明度
1.动态rem适配移动端 !function(){ var width = document.documentElement.clientWidth; var head=document.getEle ...
- 九、响应式发:rem和less(适配移动端)
一.响应式开发 响应式开发优先适配移动端又兼容到pc端 官网:https://less.bootcss.com/usage/ 教程:https://www.w3cschool.cn/less/ rem ...
- 移动端rem适配&iOS兼容
移动端rem适配js // 默认375,750设计稿请将375替换为750 (function (doc, win) { // 移动端适配 var docEl = doc.documentElemen ...
- H5 端 rem 适配方案与 viewport 适配
H5 端 rem 适配方案与 viewport 适配 rem rem 是 CSS3 新增的一个相对单位(root em,根 em) 只根据当前页面 HTML 页面的 font-size 设置,如果根目 ...
- 移动web开发适配方案之Rem
移动端为什么要做适配 移动端相对PC端来说大部分浏览器内核都是基于Webkit的,所以大部分都支持CSS3的最新语法.但是由于手机的屏幕尺寸和分辨率都不太一样(尤其是安卓),所以不得不对不同分辨率的手 ...
随机推荐
- 剑指offer——08斐波那契数列
题目描述 大家都知道斐波那契数列,现在要求输入一个整数n,请你输出斐波那契数列的第n项(从0开始,第0项为0). n<=39 有多种方法,简单的循环.递归.动态规划: class Solutio ...
- 数据库和java Bean
·1. 数据库和java Bean,字段类型要一致.不一致查询不出来,但不会报错. 字段名称也一样,不一致查询不出来,但不会报错. 2. 数据库和java Bean字段的个数可以不一样,也不会包错 3 ...
- 初探分布式环境的指挥官ZooKeeper
目录 1. 从单机到集群,分布式环境中的挑战 1.1 集中式的特点 1.2 集中式的痛点 1.3 从单体到SOA的转变 1.4 分布式服务总体框架 1.5 分布式应用概述 2. ZK基本概念及核心原理 ...
- 面试问烂的 MySQL 查询优化,看完屌打面试官!
Java技术栈 ,一般把连接数设置得大一些). 并发量:同一时刻数据库服务器处理的请求数量 3.超高的 CPU使用率:CPU资源耗尽出现宕机. 4.磁盘 IO:磁盘 IO性能突然下降.大量消耗磁盘性能 ...
- 28-Ubuntu-远程管理命令-02-查看网卡的配置信息
命令 功能 ifconfig 查看网卡配置信息 ifconfig | grep inet 查看网卡对应的IP地址 ping 127.0.0.1 检测本地网卡是否正常 ping IP地址 检测到目标 ...
- Error resolving template,template might not exist or might not be accessible by any of the configured Template Resolvers
template might not exist or might not be accessible by any of the configured Template Resolvers at o ...
- iptables failed: iptables --wait -t nat -A DOCKER -p tcp -d 0/0 --dport 5000 -j DNAT --to-destination
启动docker容器时报错: iptables failed: iptables --wait -t nat -A DOCKER -p tcp -d 0/0 --dport 5000 -j DNAT ...
- YARN框架与MapReduce1.0框架的对比分析
- PHP微信公众号支付弹出“NaN:undefined”解决方法
最近研究php微信支付开发,从微信官方下载了微信支付的demo后,测试时总是弹出NaN:Undefined这样的错误提示.不过这个并不影响支付的操作,支付成功后依然可以正常获取到支付状态,并进行跳转. ...
- R语言 包
R语言包 R语言的包是R函数,编译代码和样本数据的集合. 它们存储在R语言环境中名为"library"的目录下. 默认情况下,R语言在安装期间安装一组软件包. 随后添加更多包,当它 ...