rem自适应原理

rem是根据html的font-size大小来变化,正是基于这个出发,我们可以在每一个设备下根据设备的宽度设置对应的html字号,从而实现了自适应布局。更多介绍请看这篇文章:rem是如何实现自适应布局的

rem的值

目前有两种,一种是根据js来调整html的字号,另一种则是通过媒体查询来调整字号。

使用js

;(function(designWidth, maxWidth) {
var doc = document,
win = window;
var docEl = doc.documentElement;
var tid;
var rootItem,rootStyle; function refreshRem() {
var width = docEl.getBoundingClientRect().width;
if (!maxWidth) {
maxWidth = 540;
};
if (width > maxWidth) {
width = maxWidth;
}
//与淘宝做法不同,直接采用简单的rem换算方法1rem=100px
var rem = width * 100 / designWidth;
//兼容UC开始
rootStyle="html{font-size:"+rem+'px !important}';
rootItem = document.getElementById('rootsize') || document.createElement("style");
if(!document.getElementById('rootsize')){
document.getElementsByTagName("head")[0].appendChild(rootItem);
rootItem.id='rootsize';
}
if(rootItem.styleSheet){
rootItem.styleSheet.disabled||(rootItem.styleSheet.cssText=rootStyle)
}else{
try{rootItem.innerHTML=rootStyle}catch(f){rootItem.innerText=rootStyle}
}
//兼容UC结束
docEl.style.fontSize = rem + "px";
};
refreshRem(); win.addEventListener("resize", function() {
clearTimeout(tid); //防止执行两次
tid = setTimeout(refreshRem, 300);
}, false); win.addEventListener("pageshow", function(e) {
if (e.persisted) { // 浏览器后退的时候重新计算
clearTimeout(tid);
tid = setTimeout(refreshRem, 300);
}
}, false); if (doc.readyState === "complete") {
doc.body.style.fontSize = "16px";
} else {
doc.addEventListener("DOMContentLoaded", function(e) {
doc.body.style.fontSize = "16px";
}, false);
}
})(640, 640);

你可以把上面的代码内嵌到html的head中,换算比例是1rem=100px,为了计算方便,你可以在我的一个github项目下载完整的结构和一个压缩的js。

项目主页

上面代码中的关键代码是:

var width = docEl.getBoundingClientRect().width;
var rem = width * 100 / designWidth;
docEl.style.fontSize = rem + "px";
  • 第一行代码,获取移动设备的宽度,第二行,rem的值等于(设备的宽度)x100/(设计稿宽度),第三行,设置html的字号为第二行的值。
  • 有些人可能会注意到第二行代码跟淘宝的那个有所区别,区别就在于rem的换算比例,这里你可以任意改动为实际中的情况,比如有人喜欢用20px,那你可以将上面的100改为20,换算比例则改为1rem=20px。关于上面这段代码可以看之前的文章:Rem精简版实现自适应
  • 还有的人要用回淘宝的那个,那么第二行代码可以变为var rem = width/10; 换算比例则改为根据设计稿的宽度来调整了,假设我们的设计稿宽是640的,则html的字体大小则被设为64px.则相当于1rem=64px。具体实现请看之前的文章:rem自适应布局-flexible

使用媒体查询

说到底,上面的js代码不就是根据不同的设备调整对应的html字号嘛,那么我们根据实际的设备,来加上相应的字号不就行了吗?

我们知道html的默认字号是16px,则对应的设备下可以通过设置对应的font-size使其有一致的缩放比例。

html {
font-size: 62.5%
} @media only screen and (min-width: 481px) {
html {
font-size:94%!important
}
} @media only screen and (min-width: 561px) {
html {
font-size:109%!important
}
} @media only screen and (min-width: 641px) {
html {
font-size:125%!important
} body {
max-width: 640px
}
}

上面的代码则是通过1rem=20px来换算的,从哪里看出来呢?从最大的一个值640出发,假如你的设计稿是750的话,那你还要设计更多的媒体 查询,换算比例保持一致就可以了。那如果我想要换算比例为1rem=100呢?按照上面的规则,最大的值为:html:font- size:100/16*100%,其它的则按比例,比如480px,则为480/640*(100/16*100%)。

使用雪碧图

国内的很多人都提倡使用字体图标或者用SVG的方式来实现,但这些在小项目中明显是有点不实际。我通常使用下面两种方式。

  1. 第一种将背景图片切成一个,然后换算成base64.的方式,或者使用sass的方式转换,不过有弊端就是样式文件会增大,看个人衡量。
  2. 第二种则是通过背景图片的百分比精准定位,详情见这篇文章:CSS3背景图片百分比及应用
  3. 或者对于精准度不太高,其实使用rem定位也可以,就是要把相邻图片隔开些。

本文后面将继续更新关于rem实现自适应的相关问题,如果你有问题,还请留言给我。

原文链接:rem自适应布局的回顾总结 版权所有,转载时请注明出处,违者必究。
注明出处格式:前端开发博客 (http://caibaojian.com/rem-responsive-2.html)

【转】rem自适应布局的更多相关文章

  1. rem自适应布局的回顾总结

    使用rem实现自适应布局,应该算是当前移动前端的一大趋势,有些人对此还有点迷惑,搞不懂rem是如何实现自适应布局,如何根据设计稿来调整rem的值?rem布局如何用雪碧背景图片?rem一定要加载JS吗? ...

  2. 【转载】rem自适应布局-移动端自适应必备

    原文链接:rem自适应布局-移动端自适应必备 版权所有,转载时请注明出处,违者必究. 由于移动端特殊性,本文讲的是如何使用rem实现自适应,或叫rem响应式布局,通过使用一个脚本就可以rem自适应,不 ...

  3. rem自适应布局

    rem自适应原理 rem是根据html的font-size大小来变化,正是基于这个出发,我们可以在每一个设备下根据设备的宽度设置对应的html字号,从而实现了自适应布局.更多介绍请看这篇文章:rem是 ...

  4. rem自适应布局小结001

    在最近的移动端布局当中,最炙手可热的方式便是使用rem进行元素的布局.以下便是从最近的文章中所总结出来的一点东西. 首先,我们必须有以下的疑问: rem的本质是什么? rem如何实现自适应布局? 如何 ...

  5. 移动端rem自适应布局(切图)

    本篇适用于初次使用rem为单位切图而无从下手的童鞋.核心是根据屏幕动态改变根元素字体大小,以达到适配各种屏幕.这只是一个拿来就用的教程.很多东西没有详细说明.不过对于快速做手机端切图很有帮助. 模板: ...

  6. rem 自适应布局 bootstrap 移动端适配

    移动端适配用:rem 自使用布局用:bootstrap

  7. 手机端rem自适应布局实例

    首先要书写核心js代码,控制住页面的初始大小:我是以750px(即iPhone6)的标准,设置font-size:100px:<script>        (function (doc, ...

  8. 移动端rem自适应布局关键代码

    function resi() { var html = document.querySelector("html"); var wW = document.body.client ...

  9. rem自适应布局-移动端自适应必备:flexible.js

    http://caibaojian.com/flexible-js.html

随机推荐

  1. 解决Warning: mysql_connect(): Headers and client library minor version mismatch. 警告

    php -i|grep Client 查询当前Client 版本,结果如下: Client API version => 5.6.31Client API library version =&g ...

  2. boostrap 日期插件(带中文显示)

    不知道大家用什么样的日期插件,我最近用了bootstrap插件,整理了下,分享给大家,第四部分是我找的插件源码,可以省去大家的找的时间,按1-3的步骤用就好了,有些样式上的小问题就自己调一调: (1) ...

  3. puts方法要点

    puts是print string的缩写.尽管没有直观的表示会调用换行符,但是puts会这样做:如同print,打印用户的数据,之后自动地转到新一行.假如让puts打印已经以换行符结束的一行,它不会再 ...

  4. 微信小程序 画布drawImage实现图片截取

    大多数图片都大小不一,选择框的尺寸也是宽高相等的,就会有图片被压缩 解决方法: 1.可以使用画布对图片先进行截取,保存截取图片(用户自己选取,或者指定图片中心区域截取),但是对于多张图片手动截取,会影 ...

  5. Exp0 Kali安装 Week1

    20165214 2018-2019-2 <网络对抗技术>Exp0 Kali安装 Week1 任务要求 Kali的下载.安装.共享.软件源. 步骤 1.从Kali的官网下载镜像文件.(直接 ...

  6. 2018-2019-2 学号20175223 实验二《Java面向对象程序设计》实验报告

    目录 北京电子科技学院(BESTI)实验报告 实验名称:实验二 面向对象程序设计 实验内容.步骤与体会: 一.实验二 面向对象程序设计-1 二.实验二 面向对象程序设计-2 三.实验二 面向对象程序设 ...

  7. IP通信基础课堂笔记----简答题

    1.局域网优点:局域网特点(5) 2.10BASE-T技术特性(8) 3.网桥/交换机的优点(3):缺点(3) 4.虚拟局域网特点(4) *转发表或原MAC地址规则:记录源MAC地址 *VLAN帧格式 ...

  8. WeX5学习笔记 - 01

    了解WeX5,有朋友突然自己开始学习WeX5,我了解后觉得挺不错的实用范围广,现在手机上的主流软件基本都可以采用WeX5进行开发,如淘宝,美团.手机银行等,所以自己也开始学习WeX5,WeX5是Ecl ...

  9. java对excel操作

    package test; import jxl.*; import jxl.Cell; import java.io.*; /** * 读取excel */ public class TestExc ...

  10. python del关键字的用法

    del Keyword 注意del是python关键字,就像def.and.or一样.它不是字典.列表的方法,但是可以用来删除字典.列表的元素.比如: del list_item[4] del dic ...