手机端页面自适应解决方案—rem布局
只需在页面引入这段原生js代码就可以了
(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
if(clientWidth>=640){
docEl.style.fontSize = '100px';
}else{
docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';
}
}; if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
如何使用?
这是rem布局的核心代码,这段代码的大意是:
如果页面的宽度超过了640px,那么页面中html的font-size恒为100px,否则,页面中html的font-size的大小为: 100 * (当前页面宽度 / 640)
为什么是640px?
设计图一般是640px的,这样相当于100px = 1rem,可以方便计算;
因为是640px所以应限制下页面的大小,所以最外层的盒子应该是:
position: relative;
width: 100%;
max-width: 640px;
min-width: 320px;
margin: 0 auto;
手机端页面自适应解决方案—rem布局的更多相关文章
- 手机端页面自适应解决方案—rem布局进阶版
手机端页面自适应解决方案—rem布局进阶版 https://www.jianshu.com/p/985d26b40199 注:本文转载之处:https://www.cnblogs.com/anni ...
- 手机端页面自适应解决方案—rem布局(进阶版,附源码示例)
转自:https://segmentfault.com/a/1190000007350680 一年前笔者写了一篇 <手机端页面自适应解决方案—rem布局>,意外受到很多朋友的关注和喜欢.但 ...
- 移动端(手机端)页面自适应解决方案—rem布局篇
移动端(手机端)页面自适应解决方案-rem布局 假设设计妹妹给我们的设计稿尺寸为750 * 1340.结合网易.淘宝移动端首页html元素上的动态font-size属性.设计稿尺寸.前端与设计之间协作 ...
- 手机端页面自适应解决方案—rem布局(该方案目前已过时)
转自:https://segmentfault.com/a/1190000004705207 相信很多刚开始写移动端页面的同学都要面对页面自适应的问题,当然解决方案很多,比如:百分比布局,弹性布局fl ...
- 手机端页面自适应解决方案-rem布局
rem布局 布局前插入原生js即可 (function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationch ...
- 70.JS---利用原生js做手机端网页自适应解决方案rem布局
利用原生js做手机端网页自适应解决方案rem布局 刚开始我用的是下面这段代码,然后js通过外部链接引入,最后每次用手机刷新网页的时候都会出现缩略图 function getRem(pwidth, pr ...
- 手机端页面自适应:rem布局
rem布局非常简单,首页你只需在页面引入这段原生js代码就可以了 (function (doc, win) { var docEl = doc.documentElement, resizeEvt = ...
- 手机端页面自适应之rem布局
W3C官网上是这样描述rem的--"font size of the root element" . rem布局在移动端发挥的比较好. 阿里团队高清方案: <script&g ...
- 移动端(手机端)页面自适应解决方案1(rem布局)---750设计稿
设计稿尺寸为750 * 1340.结合网易.淘宝移动端首页html元素上的动态font-size属性.设计稿尺寸.前端与设计之间协作流程一般分为下面两种: 网易做法: 页面开头处引入下面这段代码,用于 ...
随机推荐
- threadid=1: thread exiting with uncaught exception (group=0xb2a86d70)
这个错误是程序运行成功,但是一在虚拟机上运行就报“停止运行了”,如图: 然后我们查看一个日志信息: 查了好久,终于 搞好了,原因是安卓目标SDK版本太高了,我这里创建好默认是这样的如图: 只要把21改 ...
- PV 与 并发数 之间的故事
PV: Page View UV: Unique Visitor 在一些已经上线的项目中,运营会统计每日的PV,UV,IP 等数据 而根据PV量,可以推算出一个相对较科学的并发数,来作为负载测试的一个 ...
- jQuery 中时间显示的模版
function setTime() { var time = new Date(); var year = time.getFullY ...
- html学习第二天—— 第八章—— CSS选择器
标签选择器其实就是html代码中的标签.如右侧代码编辑器中的<html>.<body>.<h1>.<p>.<img>.例如下面代码:p{fo ...
- js最佳继承范型
先回想下怎么给一个类设置属性:1.构造函数 内 通过this2.prototype中的属性两者的区别就是构造函数中的属性是每个实例私有的,而prototype中的属性是所有实例共有的(一般方法和静态 ...
- 用介个新的blog咯..
之前csdn实在是太卡了.. 只要一写比较长的blog就卡的要死.. 转过来这吧,比较好吧.. 原blog地址 啊为啥域名叫darklove呢.. 这是很久之前创建的.. 简单来说是一个和clearl ...
- phpcmsv9 阿里云OSS云存储整合教程
该教程算不上是phpcmsv9阿里云oss插件,所以整个修改及其代码覆盖前请一定记得备份.还有一点就是后台发布文章时上传的附件还是会保存在你的服务器上,基于以下原因:1.个人的需求是前台页面需要使用t ...
- MySQL支持的数据类型(2)( 日期)
日期和时间类型 字节 最小值 最大值 date 4 1000-01-01 9999-12-31 datetime 8 1000-01-01 00:00:00 9999-12-31 23:59:59 t ...
- union
union是C++中一个类,平时自己用的比较少,了解了一些特性后觉得在内存要求比较高的地方还是大有可为,总结一下. C++中的struct和union内部都可以定义 数据 和 函数, 两个跟 clas ...
- 影响前端的Chrome浏览器36
新发现,在我开发过的组件中表格组件是采用Table生成的,而在Webkit内核浏览器中,Table的列顺序是倒着生成的,所以在组件中要做兼容. 现在Chrome浏览器版本已经升级到36了.发现Tabl ...