为什么要用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它绝对是 ...
随机推荐
- 【Xamarin报错】 COMPILETODALVIK : UNEXPECTED TOP-LEVEL error java.lang.OutOfMemoryError: Java heap space
Xamarin Android 编译报错: COMPILETODALVIK : UNEXPECTED TOP-LEVEL error java.lang.OutOfMemoryError: Java ...
- 安装cvxpy遇到的问题与解决方案(ubuntu14.10,python 2.7.8)
应该说,cvxpy的安装说明是很棒的,一步一步非常清楚,www.cvxpy.org/en/latest/install/index.html 可是,我照着做完之后,还是不能import cvxpy,不 ...
- c/c++: c++继承 内存分布 虚表 虚指针 (转)
http://www.cnblogs.com/DylanWind/archive/2009/01/12/1373919.html 前部分原创,转载请注明出处,谢谢! class Base { pu ...
- JavaScript备忘录(2)——闭包
语句 JavaScript是解释型语言,解释器是按照顺序逐句执行的(除了进行一些少量预处理,如将函数声明提前). 顺序是由流程控制语句来控制的,常用的流程控制语句包括: 条件控制语句:if...els ...
- debian7.1 sources.list
deb http://mirrors.163.com/debian wheezy main non-free contribdeb http://mirrors.163.com/debian whee ...
- C++ async task
最近在搞Android 开发,里面多线程的使用比较频繁,java多线程接口很方便. Thread, AysncTask, Handler 这些接口比起posix提供的pthread_create()等 ...
- php动态获取函数参数
PHP 在用户自定义函数中支持可变数量的参数列表.其实很简单,只需使用 func_num_args() , func_get_arg() ,和 func_get_args() 函数即可. 可变参数并 ...
- 探索jdk8之ConcurrentHashMap 的实现机制
在介绍ConcurrentHashMap源码之前,很有必要复习下java并发编程中的一些基础知识,比如内存模型等. 存储模型 并发编程中的三个概念 1.原子性 2.可见性 3.重排序 对HashMap ...
- JavaScript之旅(二)
JavaScript之旅(二) 二.进阶知识 js的正则表达式 异常处理 调试 变量提升 表单验证 JSON javascript:void(0) JavaScript 代码规范 二.进阶知识 1. ...
- lnmp_auto:自动化安装lnmp环境脚本
朋友找我在一台机器上帮忙安装下discuz.想着搭建过好几次的lnmp了,但是还没有使用过"一键安装"的自动化脚本,去网上有搜索出来,但是运行的时候发现用root运行别人的脚本还是 ...