一种简单的 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单位在 ...
随机推荐
- git(windows)
windows下比较比较好用的git客户端: 1. msysgit + TortoiseGit(乌龟git) 2. GitHub for Windows 3. Git Extensions
- bounding box的简单理解
1. 小吐槽 OverFeat是我看的第一篇深度学习目标检测paper,因为它是第一次用深度学习来做定位.目标检测问题.可是,很难懂...那个bounding box写得也太简单了吧.虽然,很努力地想 ...
- 设计模式 — 抽象工厂模式(Abstract Factory)
工厂模式已经分析了简单工厂模式和工厂方法模式.并且了解了工厂方法模式去简单工厂模式的延伸,工厂方法模式如果不把工厂类抽象的话,就是简单工厂模式.由前面两个工厂模式可以猜测出抽象工厂模式应该是这两种工厂 ...
- auth组件
Django auth认证组件 简介 ''' Django auth认证组件提供了用户表的构建方式,认证接口,会话登录与注销接口. 中间件将会话登录用户保存到request对象中,这样不用从会话中获取 ...
- 使用token做认证
对当前用户,使用base64加密token,再解密token,但是不如JWT加密安全 import time import base64 import hmac def generate_token( ...
- 3. ORACLE DATAGUARD 进程
欢迎指正与讨论. 3.1 主库 LNS LNS:一般理解为log network serviceLNS 进程负责将主库redo传输到备库.在11gR1及之前版本进程命名为LNSn,其负责ASYNC和S ...
- 记录下在阿里云linux上安装与配置Mysql
环境:阿里云ECS服务器,系统为centos7.2 用户:root 参考博客:https://blog.csdn.net/kunzai6/article/details/81938613 师兄的哈哈哈 ...
- mysql主从不同步原理
mysql replication 中slave机器上有两个关键的进程,死一个都不行,一个是slave_sql_running,一个是Slave_IO_Running,一个负责与主机的io通信,一个负 ...
- 仓位管理 V4.3
之前设计的仓位管理算法一直比较有效,往往能在市场的不断的上涨下跌中获利.不过感觉短期变动的仓位占整体的仓位较低,使得盈利较低.所以这个月对仓位管理算法进行了升级,尝试了几个版本.这里做一个记录. V4 ...
- 为什么要使用getters和setters/访问器?
Why use getters and setters/accessors? 实际上会有很多人问这个问题....尤其是它成为Coding Style中一部分的时候. 文章出自LBushkin的回答 T ...