一种简单的 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单位在 ...
随机推荐
- 分布式事务2PC_PENDING异常处理
set heading off;set feedback off;set echo off;Set lines 999;Spool rollback.sqlselect 'ROLLBACK FORCE ...
- nginx+uwsgi+django开发环境搭建
Nginx+uWSGI+Djangoi开发环境搭建 Django简介,环境搭建 uWSGI简介,安装与配置 Nginx安装与配置 Nginx+uWSGI+Django原理解析 1.django简介,环 ...
- C - Heavy Transportation && B - Frogger(迪杰斯变形)
Background Hugo Heavy is happy. After the breakdown of the Cargolifter project he can now expand bus ...
- Uni-app页面生命周期
学习任何框架必须将其生命周期了然于胸. uni-app支持如下页面生命周期函数: onLoad 监听页面加载,其参数为上个页面传递的数据,参数类型为object(用于页面传参),示例中可参考 onSh ...
- codeblocks 配置 opengl 编程宝典 的 gltools 环境
懒得多说,亲测,这个问题,csdn 和 cnblog 上的博客真的没有一个能解决的. 这个帖子2L的答案则完美解决了问题,虽然步骤有些繁琐,过程还是英文,但考虑到了可能出现的各种问题,跟着走一遍就完美 ...
- 关于kafka生产者相关监控指标的理解(未解决)
关于生产者相关的监控指标含义的理解,希望大神帮忙进行确定下. 这边找了官网,看了网上各样的资料,但都无法帮我理解监控项目相关含义. 相关的监控项目是从jconsole获取的,并接入到了 ...
- Gradle安装步骤
一. Gralde介绍 Gradle是基于Groovy语言的项目自动化建构工具,在使用Gradle之前常用的构建工具有Ant和Maven,使用这些工具我们可以用来管理项目依赖,打包,部署和发布等.使用 ...
- Runtime个别API的使用
Runtime 关于属性部分API的说明以及使用方法 使用Runtime机制需要引入头文件: #import <objc/runtime.h> 1: Ivar *class_copyIv ...
- CAS5.3.0安装部署
部署环境:JDK1.8.x maven-3.5.2 tomcat-8.x.x 1.下载地址 https://github.com/apereo/cas-overlay-template/tree/5. ...
- RabbitMQ 消息确认机制以及lazy queue+ disk消息持久化
一:Basic的一些属性,一些方法 1. 消费端的确认 自动确认: message出队列的时候就自动确认[broke] basicget... 手工确认: message出队列之后,要应用程序自己去确 ...