为什么要用rem
为什么要用rem
- 参考文章web app变革之rem
- 公司使用的
375*667
(也就是iPhone6)作为缩放比例标准,设计师是按照750px的标准出图 - 为了保证在不同的屏幕下显示效果基本等同,为此规定了缩放比例
document.documentElement.clientWidth
/ 25 = 15 - 这里的根字体大小可以按照喜好自定义
- 因此在计算
rem
值时,需要按照设计师给定的px
值除以50
,如给定字体大小为30px
,那么计算出来的rem
是30/2/25=.6rem
- 下面的css只是罗列了基本常见的机型,实际上通过
js
来计算更易读易维护,如下
/*默认根字体值50px,计算rem值时,我的习惯是先将UI给的值/2,然后再/25*/
/*测试一下看看是不是所有的比例都是15*/
html {
font-size: 50px
}
body {
font-size: 24px
}
@media screen and (min-width: 320px) {
html {
font-size:21.333333333333332px
}
body {
font-size: 12px
}
}
@media screen and (min-width: 360px) {
html {
font-size:24px
}
body {
font-size: 12px
}
}
@media screen and (min-width: 375px) {
html {
font-size:25px
}
body {
font-size: 12px
}
}
@media screen and (min-width: 384px) {
html {
font-size:25.6px
}
body {
font-size: 14px
}
}
@media screen and (min-width: 400px) {
html {
font-size:26.666666666666668px
}
body {
font-size: 14px
}
}
@media screen and (min-width: 414px) {
html {
font-size:27.6px
}
body {
font-size: 14px
}
}
@media screen and (min-width: 424px) {
html {
font-size:28.266666666666667px
}
body {
font-size: 14px
}
}
@media screen and (min-width: 480px) {
html {
font-size:32px
}
body {
font-size: 15.36px
}
}
@media screen and (min-width: 540px) {
html {
font-size:36px
}
body {
font-size: 17.28px
}
}
@media screen and (min-width: 720px) {
html {
font-size:48px
}
body {
font-size: 23.04px
}
}
@media screen and (min-width: 750px) {
html {
font-size:50px
}
body {
font-size: 24px
}
}
(function(doc, win) {
var docEl = doc.documentElement,
resizeEvt = ‘orientationchange’ in window ? ‘orientationchange’ : ‘resize’,
recalc = function() {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
/*选定一款机型作为缩放标准*/
docEl.style.fontSize = 25 * (clientWidth / 375) + ‘px’;
/*根字体最大50px*/
docEl.style.fontSize = docEl.style.fontSize > 50 ? 50 : docEl.style.fontSize;
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener(‘DOMContentLoaded’, recalc, false);
})(document, window);
为了减少同学的工作量,就做了一个pexilToRem的对照表,如下
px | rem |
---|---|
1px | 0.04rem |
2px | 0.08rem |
3px | 0.12rem |
4px | 0.16rem |
5px | 0.2rem |
6px | 0.24rem |
7px | 0.28rem |
8px | 0.32rem |
9px | 0.36rem |
10px | 0.4rem |
11px | 0.44rem |
12px | 0.48rem |
13px | 0.52rem |
14px | 0.56rem |
15px | 0.6rem |
16px | 0.64rem |
17px | 0.68rem |
18px | 0.72rem |
19px | 0.76rem |
20px | 0.8rem |
21px | 0.84rem |
22px | 0.88rem |
23px | 0.92rem |
24px | 0.96rem |
25px | 1rem |
26px | 1.04rem |
27px | 1.08rem |
28px | 1.12rem |
29px | 1.16rem |
30px | 1.2rem |
31px | 1.24rem |
32px | 1.28rem |
33px | 1.32rem |
34px | 1.36rem |
35px | 1.4rem |
36px | 1.44rem |
37px | 1.48rem |
38px | 1.52rem |
39px | 1.56rem |
40px | 1.6rem |
41px | 1.64rem |
42px | 1.68rem |
43px | 1.72rem |
44px | 1.76rem |
45px | 1.8rem |
46px | 1.84rem |
47px | 1.88rem |
48px | 1.92rem |
49px | 1.96rem |
50px | 2rem |
以上是直接在控制台转换的
var pexilToRem=[];
for(var i=1;i<51;i++){
pexilToRem.push({'px':i+'px','rem':i/25+'rem'})
}
console.table(pexilToRem)
当然也可以用scss
$browser-default-font-size: 25px !default;//变量的值可以根据自己需求定义
@function pxTorem($px){//$px为需要转换的字号
@return $px / $browser-default-font-size * 1rem;
}
为什么要用rem的更多相关文章
- 在rem布局下使用背景图片以及sprite
现在移动端页面用rem布局已经是一大流派了,成熟的框架如淘宝的flexiable.js,以及我的好友@墨尘写的更轻量级的hotcss.用rem作单位使得元素能够自适应后,还有一块需要关注的,那就是背景 ...
- 移动端自适应之——rem与font-size
需求:在不同的移动终端设备中实现,UI设计稿的等比例适配. 方案:布局排版都用rem做单位,然后不同宽度的屏,js动态计算根节点的font-size. 假设设计稿是宽750px来做的,书写css方便计 ...
- px-rem px转换为rem的工具
将px转换为rem的工具,github地址:https://github.com/finance-sh/px-rem 将px转换为rem的工具 怎样转换静态文件 安装: npm install px- ...
- px-rem 一个将px转换为rem的工具
将px转换为rem的工具,github地址:https://github.com/finance-sh/px-rem 怎样转换静态文件 安装: npm install px-rem -g 然后跑下命令 ...
- 基于rem的移动端自适应解决方案
代码有更新,最好直接查看github: https://github.com/finance-sh/adaptive adaptivejs原理: 利用rem布局,根据公式 html元素字体大小 = d ...
- px和em,rem的区别
1.px是你屏幕设备物理上能显示出的最小的一个点,这个点不是固定宽度的,不同设备上点的长宽.比例有可能会不同.假设:你现在用的显示器上1px宽=1毫米,但我用的显示器1px宽=两毫米,那么你定义一个d ...
- Sublime 插件- px 转rem
一个CSS的px值转rem值的Sublime Text 3自动完成插件. 插件效果如下: 安装 克隆项目 https://github.com/hyb628/cssrem.git 进入packag ...
- 响应式布局-Rem的用法
前言: 文章较为系统地介绍了rem这个新的文字大小单位,绝对干货,绝对好文.转载时略有改动. 先来看看一些基本理念,比如: 响应式网页不仅仅是响应不同类型的设备,而且需要响应不同的用户需求.响应式 ...
- 手机端页面自适应之rem布局
W3C官网上是这样描述rem的--"font size of the root element" . rem布局在移动端发挥的比较好. 阿里团队高清方案: <script&g ...
- WebApp开发之--"rem"单位
随着web app的兴起,rem这是个低调的css单位,近一两年开始崭露头角,有许多朋友对于它的评价不一,有的在尝试使用,有的在使用过程中遇到坑就弃用了.但是我认为rem是用来做web app它绝对是 ...
随机推荐
- POJ 1308 Is It A Tree?
Is It A Tree? Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 18778 Accepted: 6395 De ...
- 微信公众号API返回不可打印字符的处理。
引言 在使用微信公众号的"批量获取用户基本信息"API时,发现在某些时候不能使用php的json_decode转为数组,打印出curl获取到的内容中,发现了几个不可打印字符.相信不 ...
- 消息中间件Notify和MetaQ-阿里中间件
3.1.Notify Notify是淘宝自主研发的一套消息服务引擎,是支撑双11最为核心的系统之一,在淘宝和支付宝的核心交易场景中都有大量使用.消息系统的核心作用就是三点:解耦,异步和并行.下面让我以 ...
- Apache Tomcat关于shtml和SSI技术
Tomcat http://blog.csdn.net/leftfist/article/details/8520773 http://webdevelop.jzxue.com/shtml/ http ...
- java实现二叉树查找树
二叉树(binary)是一种特殊的树.二叉树的每个节点最多只能有2个子节点: 二叉树 由于二叉树的子节点数目确定,所以可以直接采用上图方式在内存中实现.每个节点有一个左子节点(left childre ...
- HMM 自学教程(三)隐藏模式
本系列文章摘自 52nlp(我爱自然语言处理: http://www.52nlp.cn/),原文链接在 HMM 学习最佳范例,这是针对 国外网站上一个 HMM 教程 的翻译,作者功底很深,翻译得很精彩 ...
- Mysql学习笔记(五)数学与日期时间函数
学习内容: 1.数学函数 2.日期时间函数 这些函数都是很常用的函数...在这里进行简单的介绍... 数学函数: mysql); //取绝对值函数 这个函数可安全地使用于 BIGINT 值. mysq ...
- static、final、static final 用法
1.使用范围:类.方法.变量.2.区别和联系:2.1.static 含义:静态的,被 static 修饰的方法和属性只属于类不属于类的任何对象.2.2.static 用法:2.2.1.static 可 ...
- 软件工程——sprint 1回顾总结
主题:“我们在本次sprint中做了什么?接下来的打算?” sprint总结:在本次sprint里,这是我们团队的成员们第一次开始以团队的形式进行一次团队项目开发,早在第一次团队会议之时,我们便因团队 ...
- Scrum4.0+5.0 数独游戏
1.题目: 1.准备看板. 形式参考图4. 2.任务认领,并把认领人标注在看板上的任务标签上. 先由个人主动领任务,PM根据具体情况进行任务的平衡. 然后每个人都着手实现自己的任务. 3.为了团队合作 ...