rem自适应布局
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%)。
rem自适应布局的更多相关文章
- rem自适应布局的回顾总结
使用rem实现自适应布局,应该算是当前移动前端的一大趋势,有些人对此还有点迷惑,搞不懂rem是如何实现自适应布局,如何根据设计稿来调整rem的值?rem布局如何用雪碧背景图片?rem一定要加载JS吗? ...
- 【转载】rem自适应布局-移动端自适应必备
原文链接:rem自适应布局-移动端自适应必备 版权所有,转载时请注明出处,违者必究. 由于移动端特殊性,本文讲的是如何使用rem实现自适应,或叫rem响应式布局,通过使用一个脚本就可以rem自适应,不 ...
- 【转】rem自适应布局
rem自适应原理 rem是根据html的font-size大小来变化,正是基于这个出发,我们可以在每一个设备下根据设备的宽度设置对应的html字号,从而实现了自适应布局.更多介绍请看这篇文章:rem是 ...
- rem自适应布局小结001
在最近的移动端布局当中,最炙手可热的方式便是使用rem进行元素的布局.以下便是从最近的文章中所总结出来的一点东西. 首先,我们必须有以下的疑问: rem的本质是什么? rem如何实现自适应布局? 如何 ...
- 移动端rem自适应布局(切图)
本篇适用于初次使用rem为单位切图而无从下手的童鞋.核心是根据屏幕动态改变根元素字体大小,以达到适配各种屏幕.这只是一个拿来就用的教程.很多东西没有详细说明.不过对于快速做手机端切图很有帮助. 模板: ...
- rem 自适应布局 bootstrap 移动端适配
移动端适配用:rem 自使用布局用:bootstrap
- 手机端rem自适应布局实例
首先要书写核心js代码,控制住页面的初始大小:我是以750px(即iPhone6)的标准,设置font-size:100px:<script> (function (doc, ...
- 移动端rem自适应布局关键代码
function resi() { var html = document.querySelector("html"); var wW = document.body.client ...
- rem自适应布局-移动端自适应必备:flexible.js
http://caibaojian.com/flexible-js.html
随机推荐
- 3、Spring Cloud - Eureka(高可用Eureka Server集群)
在实际的项目中,可能有几十个或者几百个的微服务实例,这时 Eureka Server 承担了非 常高的负载.由于 Eureka Server 在微服务架构中有着举足重轻的作用,所以需要对 Eureka ...
- sql连接查询INNER JOIN,LEFT JOIN,RIGHT JOIN区别
测试表 课程表cource 教师表teacher 查询老师教的课程 1.inner join内链接 ,只显示完全匹配的查询结果 SELECT cource.cname,teacher.tname f ...
- BigDecimal.setScale用法总结
1. BigDecimal num1 = new BigDecimal(2.225667);//这种写法不允许,会造成精度损失 2. BigDecimal num2 = new BigDecimal( ...
- PAT——1072. 开学寄语(20)
下图是上海某校的新学期开学寄语:天将降大任于斯人也,必先删其微博,卸其QQ,封其电脑,夺其手机,收其ipad,断其wifi,使其百无聊赖,然后,净面.理发.整衣,然后思过.读书.锻炼.明智.开悟.精进 ...
- Intellij IDEA 2018.2.2 SpringBoot热启动 (Maven)
一.IDEA 工具配置 1. 打开IDEA 设置界面,选择编译,按图打勾. 2 . 然后 Shift+Ctrl+Alt+/,选择Registry 3 . compiler.automake.allow ...
- Android小游戏应用---撕破美女衣服游戏
ImageView after; ImageView before; @Override protected void onCreate(Bundle savedInstanceState) { su ...
- VB.NET & Visual Basic
当看到VB.NET者这本书籍的时候,翻开文件夹唯一的感受就是:这不和VB一样吗?究竟有什么差别呢? 1)版本号: 又一次回想VB,能够发现事实上他是Microsoft退出的基于Windows操作系统环 ...
- 深入理解java虚拟机读后总结
之前看过,很多会遗忘,标记一下,温故知新.(明天的我一定会感谢现在努力的自己. ) 一.运行时数据区域 Java虚拟机管理的内存包括几个运行时数据内存:方法区.虚拟机栈.本地方法栈.堆.程序计数器,其 ...
- vue中使用swiper并自定义分页器样式
一,安装swiper 执行命令 npm install vue-awesome-swiper --save 二,引入swiper import {Swiper} from "vue-awes ...
- 校内胡策 T9270 mjt树
题目背景 从前森林里有一棵很大的mjt树,树上有很多小动物. 题目描述 mjt树上有 n 个房间,第 i 个房间住着 ai 只第bi 种小动物. 这n个房间用n-1条路连接起来,其中房间1位mjt树的 ...