为什么要用rem

  • 参考文章web app变革之rem
  • 公司使用的375*667(也就是iPhone6)作为缩放比例标准,设计师是按照750px的标准出图
  • 为了保证在不同的屏幕下显示效果基本等同,为此规定了缩放比例 document.documentElement.clientWidth / 25 = 15
  • 这里的根字体大小可以按照喜好自定义
  • 因此在计算rem值时,需要按照设计师给定的px值除以50,如给定字体大小为30px,那么计算出来的rem30/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的更多相关文章

  1. 在rem布局下使用背景图片以及sprite

    现在移动端页面用rem布局已经是一大流派了,成熟的框架如淘宝的flexiable.js,以及我的好友@墨尘写的更轻量级的hotcss.用rem作单位使得元素能够自适应后,还有一块需要关注的,那就是背景 ...

  2. 移动端自适应之——rem与font-size

    需求:在不同的移动终端设备中实现,UI设计稿的等比例适配. 方案:布局排版都用rem做单位,然后不同宽度的屏,js动态计算根节点的font-size. 假设设计稿是宽750px来做的,书写css方便计 ...

  3. px-rem px转换为rem的工具

    将px转换为rem的工具,github地址:https://github.com/finance-sh/px-rem 将px转换为rem的工具 怎样转换静态文件 安装: npm install px- ...

  4. px-rem 一个将px转换为rem的工具

    将px转换为rem的工具,github地址:https://github.com/finance-sh/px-rem 怎样转换静态文件 安装: npm install px-rem -g 然后跑下命令 ...

  5. 基于rem的移动端自适应解决方案

    代码有更新,最好直接查看github: https://github.com/finance-sh/adaptive adaptivejs原理: 利用rem布局,根据公式 html元素字体大小 = d ...

  6. px和em,rem的区别

    1.px是你屏幕设备物理上能显示出的最小的一个点,这个点不是固定宽度的,不同设备上点的长宽.比例有可能会不同.假设:你现在用的显示器上1px宽=1毫米,但我用的显示器1px宽=两毫米,那么你定义一个d ...

  7. Sublime 插件- px 转rem

    一个CSS的px值转rem值的Sublime Text 3自动完成插件. 插件效果如下: 安装 克隆项目   https://github.com/hyb628/cssrem.git 进入packag ...

  8. 响应式布局-Rem的用法

    前言: 文章较为系统地介绍了rem这个新的文字大小单位,绝对干货,绝对好文.转载时略有改动.   先来看看一些基本理念,比如: 响应式网页不仅仅是响应不同类型的设备,而且需要响应不同的用户需求.响应式 ...

  9. 手机端页面自适应之rem布局

    W3C官网上是这样描述rem的--"font size of the root element" . rem布局在移动端发挥的比较好. 阿里团队高清方案: <script&g ...

  10. WebApp开发之--"rem"单位

    随着web app的兴起,rem这是个低调的css单位,近一两年开始崭露头角,有许多朋友对于它的评价不一,有的在尝试使用,有的在使用过程中遇到坑就弃用了.但是我认为rem是用来做web app它绝对是 ...

随机推荐

  1. 【Xamarin报错】 COMPILETODALVIK : UNEXPECTED TOP-LEVEL error java.lang.OutOfMemoryError: Java heap space

    Xamarin Android 编译报错: COMPILETODALVIK : UNEXPECTED TOP-LEVEL error java.lang.OutOfMemoryError: Java ...

  2. 安装cvxpy遇到的问题与解决方案(ubuntu14.10,python 2.7.8)

    应该说,cvxpy的安装说明是很棒的,一步一步非常清楚,www.cvxpy.org/en/latest/install/index.html 可是,我照着做完之后,还是不能import cvxpy,不 ...

  3. c/c++: c++继承 内存分布 虚表 虚指针 (转)

    http://www.cnblogs.com/DylanWind/archive/2009/01/12/1373919.html 前部分原创,转载请注明出处,谢谢! class Base  {  pu ...

  4. JavaScript备忘录(2)——闭包

    语句 JavaScript是解释型语言,解释器是按照顺序逐句执行的(除了进行一些少量预处理,如将函数声明提前). 顺序是由流程控制语句来控制的,常用的流程控制语句包括: 条件控制语句:if...els ...

  5. debian7.1 sources.list

    deb http://mirrors.163.com/debian wheezy main non-free contribdeb http://mirrors.163.com/debian whee ...

  6. C++ async task

    最近在搞Android 开发,里面多线程的使用比较频繁,java多线程接口很方便. Thread, AysncTask, Handler 这些接口比起posix提供的pthread_create()等 ...

  7. php动态获取函数参数

    PHP 在用户自定义函数中支持可变数量的参数列表.其实很简单,只需使用 func_num_args() , func_get_arg() ,和 func_get_args()  函数即可. 可变参数并 ...

  8. 探索jdk8之ConcurrentHashMap 的实现机制

    在介绍ConcurrentHashMap源码之前,很有必要复习下java并发编程中的一些基础知识,比如内存模型等. 存储模型 并发编程中的三个概念 1.原子性 2.可见性 3.重排序 对HashMap ...

  9. JavaScript之旅(二)

    JavaScript之旅(二) 二.进阶知识 js的正则表达式 异常处理 调试 变量提升 表单验证 JSON javascript:void(0) JavaScript 代码规范 二.进阶知识 1. ...

  10. lnmp_auto:自动化安装lnmp环境脚本

    朋友找我在一台机器上帮忙安装下discuz.想着搭建过好几次的lnmp了,但是还没有使用过"一键安装"的自动化脚本,去网上有搜索出来,但是运行的时候发现用root运行别人的脚本还是 ...