一种简单的 rem 单位基准设置
1rem 换算成的像素值等于 html 元素的 font-size 值
如果 设置 html 的 font-size 为 100px, 那么设计稿的 像素转换成 rem 只需要除以 100 即可。
function setRem(designWidth, maxWidth) {
var htmlElm = document.documentElement;
var pageWidth = htmlElm.getBoundingClientRect().width;
pageWidth = Math.min(pageWidth ,maxWidth || designWidth);
var rempx = 100*pageWidth/designWidth;
htmlElm.style.fontSize = rempx+'px';
document.body.style.fontSize = '0.16rem'; //16px
}
setRem(750,1920) //pc
setRem(750,680) //mobile
vw 与 rem 混合使用:
如果使用 vw 作为单位,那么 设计稿的 100px 换算 vw 就是 100/(desiginWidth/100) vw ,
设置 html 样式 font-size:100/(desiginWidth/100) vw, 那么设计稿上像素转换成 rem 也是除以 100 即可. 这个方法甚至不需要 js 来动态设置 html 的 font-size.
一种简单的 rem 单位基准设置的更多相关文章
- iOS开发UI篇—iOS开发中三种简单的动画设置
iOS开发UI篇—iOS开发中三种简单的动画设置 [在ios开发中,动画是廉价的] 一.首尾式动画 代码示例: // beginAnimations表示此后的代码要“参与到”动画中 [UIView b ...
- WebApp开发之--"rem"单位
随着web app的兴起,rem这是个低调的css单位,近一两年开始崭露头角,有许多朋友对于它的评价不一,有的在尝试使用,有的在使用过程中遇到坑就弃用了.但是我认为rem是用来做web app它绝对是 ...
- 移动端rem单位用法[转]
标签: 1.rem(font size of the root element)是指相对于根元素的字体大小的单位,em(font size of the element)是指相对于父元素的字体大小的单 ...
- WebApp开发之--"rem"单位(转)
随着web app的兴起,rem这是个低调的css单位,近一两年开始崭露头角,有许多朋友对于它的评价不一,有的在尝试使用,有的在使用过程中遇到坑就弃用了.但是我认为rem是用来做web app它绝对是 ...
- 偏前端 - 不是固定宽高,页面随设备同比 放大/缩小 展示。不妨看看rem单位,你就有眉目上手做了!!!
为什么要使用rem 之前有些适配做法,是通过js动态计算viewport的缩放值(initial-scale). 例如以屏幕320像素为基准,设置1,那屏幕375像素就是375/320=1.18以此类 ...
- rem单位怎么使用
rem这是个低调的css单位,近一两年开始崭露头角,有许多同学对rem的评价不一,有的在尝试使用,有的在使用过程中遇到坑就弃用了.但是我对rem综合评价是用来做web app它绝对是最合适的人选之一. ...
- 如何在手机项目中使用rem单位
rem这是个低调的css单位,近一两年开始崭露头角,有许多同学对rem的评价不一,有的在尝试使用,有的在使用过程中遇到坑就弃用了.但是我对rem综合评价是用来做web app它绝对是最合适的人选之一. ...
- 移动端rem单位用法
1.rem(font size of the root element)是指相对于根元素的字体大小的单位,em(font size of the element)是指相对于父元素的字体大小的单位.它们 ...
- 关于使用rem单位,calc()进行自适应布局
关于css中的单位 大家都知道在css中的单位,一般都包括有px,%,em等单位,另外css3新增加一个单位rem. 其中px,%等单位平时在传统布局当中使用的比较频繁,大家也比较熟悉,不过px单位在 ...
随机推荐
- Java_File类
File类以抽象的方式代表文件名和目录路径.该类主要用于文件和目录的创建.查找.删除等.先来看一下File的构造方法: // 通过将给定的路径名字符串转换为抽象路径名来创建新的 File实例 File ...
- Ajax原理一篇就够了
Ajax原理一篇就够了 一.什么是Ajax Ajax(Asynchronous JavaScript and XML的缩写)是一种异步请求数据的web开发技术,对于改善用户的体验和页面性能很有帮助.简 ...
- 生产宕机dunp配置
修改线程数 <self-tuning-thread-pool-size-min>100</self-tuning-thread-pool-size-min> <self- ...
- 转导推理——Transductive Learning
在统计学习中,转导推理(Transductive Inference)是一种通过观察特定的训练样本,进而预测特定的测试样本的方法.另一方面,归纳推理(Induction Inference)先从训练样 ...
- 初探storm
Storm入门之Storm示例及UI参数讲解 Storm UI REST API Storm 1.1.0 中文文档 Apache Storm 1.1.0 中文文档 | ApacheCN Storm U ...
- F7里利用DIV 模拟 textarea 显示回行的问题解决
<div class="card-content-inner" style="word-wrap:break-word;word-break:break-all;w ...
- IIS+Tomcat功能iis端口2
之前写过IIS桥接Tomcat是通过isapi_redirect.dll,组件方式实现共用端口的,但是在Windows2012服务器 iis8.0版本中,配置完成后没有效果,比较抓狂,分析发现如下信息 ...
- JVM调优入门之初探
JVM:程序计数器,jvm栈,本地方法栈,堆,方法区 JVM:虚拟机内存又分有:年轻代(eden,servivor s0,servivor s1),年老代(tenured),永久代() 问题1:如何查 ...
- 1.3 正则表达式和python语言-1.3.8 创建字符集([ ])
1.3.8 创建字符集([ ]) (2018-05-0815:24:00) 下面的示例将说明对于 r2d2|c3po 的限制将比[cr][23][dp][o2]更为严格 import re # 下面的 ...
- POJ3436 Command Network [最小树形图]
POJ3436 Command Network 最小树形图裸题 傻逼poj回我青春 wa wa wa 的原因竟然是需要%.2f而不是.2lf 我还有英语作业音乐作业写不完了啊啊啊啊啊啊啊啊啊 #inc ...