自适应rem布局
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>圣诞主题</title>
<style type="text/css">
section {
width: 100%;
height: 100%;
background: red;
}
.page{
width: 5rem;
height: 10rem;
background: yellow;
font-size: 0.3rem;
}
</style>
</head>
<body>
<section>
<div class="page">rem跟着html:font-size变化</div>
</section>
</body>
<script type="text/javascript">
var docEl = document.documentElement,
//当设备的方向变化（设备横向持或纵向持）此事件被触发。绑定此事件时，
//注意现在当浏览器不支持orientationChange事件的时候我们绑定了resize 事件。
//总来的来就是监听当然窗口的变化，一旦有变化就需要重新设置根字体的值
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function() {
//设置根字体大小
docEl.style.fontSize = 20 * (docEl.clientWidth / 320) + 'px';
};
//绑定浏览器缩放与加载时间
window.addEventListener(resizeEvt, recalc, false);
document.addEventListener('DOMContentLoaded', recalc, false);
</script>
</html>
来自：http://www.imooc.com/code/10547
js动态计算rem
!(function(doc, win) {
var docEle = doc.documentElement,
evt = "onorientationchange" in window ? "orientationchange" : "resize",
fn = function() {
var width = docEle.clientWidth;
width && (docEle.style.fontSize = 20 * (width / 320) + "px");
};
win.addEventListener(evt, fn, false);
doc.addEventListener("DOMContentLoaded", fn, false);
}(document, window));
来自：https://segmentfault.com/a/1190000003690140
自适应rem布局的更多相关文章
- 移动端自适应rem布局
补充一个基本知识,不许笑,1rem等于HTML中设置的字体大小(px) 首先,HTML 的 head 部分中加入如下代码: <meta name="viewport" con ...
- 移动端自适应rem 布局篇
相信很多刚开始写移动端页面的同学都要面对页面自适应的问题,当然解决方案很多,比如:百分比布局,弹性布局flex(什么是flex),也都能获得不错的效果,这里主要介绍的是本人在实践中用的最顺手最简单的布 ...
- HTML5 自适应rem布局
(function(doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? ' ...
- 手机端页面自适应：rem布局
rem布局非常简单,首页你只需在页面引入这段原生js代码就可以了 (function (doc, win) { var docEl = doc.documentElement, resizeEvt = ...
- 手机端页面自适应解决方案—rem布局进阶版
手机端页面自适应解决方案—rem布局进阶版 https://www.jianshu.com/p/985d26b40199 注:本文转载之处:https://www.cnblogs.com/anni ...
- 手机端页面自适应解决方案—rem布局（进阶版，附源码示例）
转自:https://segmentfault.com/a/1190000007350680 一年前笔者写了一篇 <手机端页面自适应解决方案—rem布局>,意外受到很多朋友的关注和喜欢.但 ...
- 手机端页面自适应解决方案—rem布局（该方案目前已过时）
转自:https://segmentfault.com/a/1190000004705207 相信很多刚开始写移动端页面的同学都要面对页面自适应的问题,当然解决方案很多,比如:百分比布局,弹性布局fl ...
- 移动端(手机端)页面自适应解决方案—rem布局篇
移动端(手机端)页面自适应解决方案-rem布局 假设设计妹妹给我们的设计稿尺寸为750 * 1340.结合网易.淘宝移动端首页html元素上的动态font-size属性.设计稿尺寸.前端与设计之间协作 ...
- 70.JS---利用原生js做手机端网页自适应解决方案rem布局
利用原生js做手机端网页自适应解决方案rem布局 刚开始我用的是下面这段代码,然后js通过外部链接引入,最后每次用手机刷新网页的时候都会出现缩略图 function getRem(pwidth, pr ...
随机推荐
- 分布式缓存技术redis学习（一）——redis简介以及linux上的安装
redis简介 redis是NoSQL(No Only SQL,非关系型数据库)的一种,NoSQL是以Key-Value的形式存储数据.当前主流的分布式缓存技术有redis,memcached,ssd ...
- C++对象内存模型2 （虚函数，虚指针，虚函数表）
从例子入手,考察如下带有虚函数的类的对象内存模型: class A { public: virtual void vfunc1(); virtual void vfunc2(); void func1 ...
- 沈逸老师PHP魔鬼特训笔记（4）
上一课我们通过shell脚本拷贝代码,了解了静态方法和静态属性.(还有个附件PHAR包,我直接无视了) 然后在GOD文件中写了一些参数, 我们也可以这样,把方法名像拼凑字符串一样拼起来. $get_p ...
- 安卓Design包之CoordinatorLayout配合AppBarLayout,ToolBar,TabLaout的使用
转载: CoordinatorLayout配合AppBarLayout,Toolbar和TabLayout的使用 控件的简单介绍: AppBarLayout:它是继承LinerLayout实现的一个V ...
- ubuntu下安装redis
(1)进去 /usr/local目录下 cd /usr/local 若没有local这个文件夹则创建一个 sudo mkdir /usr/local sudo chmod 777 ...
- codeforces 675B B. Restoring Painting(暴力枚举)
题目链接: B. Restoring Painting time limit per test 1 second memory limit per test 256 megabytes input s ...
- Simofox 2.7 - 基于 pcxFirefox 定制（停更）
••• 现已停止更新,无良作者转战 Google Chrome ••• 项目名称:Simofox (Simple + Cool + Firefox) 项目介绍:Simofox 中译名西蒙狐,目前项目版 ...
- centos 6.5 安装lnmp(linux+nginx+mysql+php)
参考:http://www.cnblogs.com/AloneSword/archive/2013/03/18/2966750.html (总结并简要) 一安装cmake wget -c http:/ ...
- 浅析js中的this
this的用法 this在日常javascript编码中很常见, 但是一直以来没有好好总结过. 今天在这里好好总结一下. 本文只讨论浏览器环境. this指向全局 var name = "w ...
- 初见，Devexpress
[绥江一百]http://www.sj100.net 欢迎,进入绥江一百感谢点击[我的小网站,请大家多 ...