一种简单的 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单位在 ...
随机推荐
- 课堂小练习 设计、定义并实现Complex类
定义一个负数类Complex使得下面的代码能够工作.(课本P145) #include<iostream> #include<cmath> using namespace st ...
- django-form字段form 和插件widgets
26)django-form字段和插件widgets 创建Form类时,主要涉及到 [字段] 和 [插件],字段用于对用户请求数据的验证,插件用于自动生成HTML 一:常用字段 1.Django中Fo ...
- layUI实现可选项 弹框
需求描述:点击插入,会让选择,插入的类型,选择之后,点击确定,执行后续的一些操作.先摆效果图. 代码: //html代码<style> #imp{ display: none; }< ...
- 《剑指offer》二叉树的深度
本题来自<剑指offer> 反转链表 题目: 思路: C++ Code: Python Code: 总结:
- 洛谷 P1983 车站分级
题目链接 https://www.luogu.org/problemnew/show/P1983 题目描述 一条单向的铁路线上,依次有编号为 1,2,…,n的 n个火车站.每个火车站都有一个级别,最低 ...
- Spring boot实现原生websocket
网上的大部分教程是基于sockjs,这篇文章内容则是基于原生协议. 后台Spring boot 配置 @Configuration @EnableWebSocket public class WebS ...
- 译文 - Recommender Systems: Issues, Challenges, and Research Opportunities
REF: 原文 Recommender Systems: Issues, Challenges, and Research Opportunities Shah Khusro, Zafar Ali a ...
- Java - 数组详解(图解数组的基本操作)
目录 什么是数组 数组的定义和内存分配 数组的赋值和访问 数组的注意事项 数组的内存图解 数组的插入 数组的删除 数组的扩容 数组的反转 首先 什么是数组 数组是一组地址连续.长度固定的具有相同类型的 ...
- 数组实现int随机数的阶乘(避免大数问题)
面试的一道题目,实现int随机数的阶乘.这道题就是考察你考没考虑大数问题,如何避免它. 我能想到的就是用数组去实现,然后写了一下代码.但是当i的值很大,接近Max_value时的情况还没有考虑到. 直 ...
- tomcat运行后提示Could not create the Java Virtual Machine.
大致的问题是Java虚拟机(JVM)分配的内存大于系统可用内存,一开始去网上找了些资料,大多是都是说修改MyEclipse安装目录下的elicpse.ini文件中的内存大小.但我试了之后发现然并软,后 ...