文档章节

最大宽度为640像素的rem自适应

_
 _qq507570355
发布于 2015/12/01 11:50
字数 322
阅读 20
收藏 0
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>c</title>
<meta name="viewport"content="initial-scale=0.5, minimum-scale=0.5, maximum-scale=0.5,user-scalable=no,minimal-ui"/>
</head>
<body>
<script type="text/javascript">
 !function(win) {
 function resize() {
  var domWidth = domEle.getBoundingClientRect().width;
  if(domWidth / v > 540){
   domWidth = 540 * v;
  }
  win.rem = domWidth / 16;
  domEle.style.fontSize = win.rem + "px";
 }
 var v, initial_scale, timeCode, dom = win.document, domEle = dom.documentElement, viewport = dom.querySelector('meta[name="viewport"]'), flexible = dom.querySelector('meta[name="flexible"]');
 if (viewport) {
  //viewport:<meta name="viewport"content="initial-scale=0.5, minimum-scale=0.5, maximum-scale=0.5,user-scalable=no,minimal-ui"/>
  var o = viewport.getAttribute("content").match(/initial\-scale=(["']?)([\d\.]+)\1?/);
  if(o){
   initial_scale = parseFloat(o[2]);
   v = parseInt(1 / initial_scale);
  }
 } else {
  if (flexible) {
   var o = flexible.getAttribute("content").match(/initial\-dpr=(["']?)([\d\.]+)\1?/);
   if(o){
    v = parseFloat(o[2]);
    initial_scale = parseFloat((1 / v).toFixed(2))
   }
  }
 }
 if (!v && !initial_scale) {
  var n = (win.navigator.appVersion.match(/android/gi), win.navigator.appVersion.match(/iphone/gi));
  v = win.devicePixelRatio;
  v = n ? v >= 3 ? 3 : v >= 2 ? 2 : 1 : 1, initial_scale = 1 / v
 }
 //没有viewport标签的情况下
 if (domEle.setAttribute("data-dpr", v), !viewport) {
  if (viewport = dom.createElement("meta"), viewport.setAttribute("name", "viewport"), viewport.setAttribute("content", "initial-scale=" + initial_scale + ", maximum-scale=" + initial_scale + ", minimum-scale=" + initial_scale + ", user-scalable=no"), domEle.firstElementChild) {
   domEle.firstElementChild.appendChild(viewport)
  } else {
   var m = dom.createElement("div");
   m.appendChild(viewport), dom.write(m.innerHTML)
  }
 }
 win.dpr = v;
 win.addEventListener("resize", function() {
  clearTimeout(timeCode), timeCode = setTimeout(resize, 300)
 }, false);
 win.addEventListener("pageshow", function(b) {
  b.persisted && (clearTimeout(timeCode), timeCode = setTimeout(resize, 300))
 }, false);
 /* 个人觉得没必要完成后就把body的字体设置为12
 "complete" === dom.readyState ? dom.body.style.fontSize = 12 * v + "px" : dom.addEventListener("DOMContentLoaded", function() {
  //dom.body.style.fontSize = 12 * v + "px"
 }, false);
 */
 resize();
}(window);
</script>
<h1 align="center">rem自适应</h1>
<div align="center" style="font-size:1rem; height:2rem; overflow:hidden;background:red;">>
</body>
</html>

本文转载自:http://www.jb51.net/article/66377.htm

共有 人打赏支持
_
粉丝 0
博文 1
码字总数 0
作品 0
西安
手机端页面自适应解决方案—rem布局

rem布局非常简单,首页你只需在页面引入这段原生js代码就可以了 如何使用? 这是rem布局的核心代码,这段代码的大意是: 如果页面的宽度超过了640px,那么页面中html的font-size恒为100px,否...

拉普拉斯婷
2016/10/13
17
0
移动端开发基础 干货分享

移动端开发 我们现在关注的点还在移动M站上,或者我们可以叫做webapp,其实就是运行在移动端浏览器中的web网站 app:application应用程序。手机软件:主要指安装在智能手机上的软件,完善原始系...

WEB攻程狮
2017/12/06
0
0
手机端页面自适应解决方案—rem布局进阶版(附源码示例)

一年前笔者写了一篇 《手机端页面自适应解决方案—rem布局》,意外受到很多朋友的关注和喜欢。但随着时间的推移,该方案已然过时,故为大家介绍一个目前我极力推荐使用的,更加完美的方案——...

临江仙卜算子
06/29
0
0
浅谈移动端布局问题

移动端推广速度快,效果好,越来越多的企业,商家开始重视移动站的建设和移动页面(h5)的制作。随着移动页面的玩法越来越多,对前端技术的要求也会越来越高。选择合适的布局,是写好移动页面...

我是小谷粒
2017/12/05
0
0
浅谈Web自适应

前言 随着移动设备的普及,移动web在前端工程师们的工作中占有越来越重要的位置。移动设备更新速度频繁,手机厂商繁多,导致的问题是每一台机器的屏幕宽度和分辨率不一样。这给我们在编写前端...

数通畅联
2016/08/19
75
0

没有更多内容

加载失败,请刷新页面

加载更多

Univalsal_ImageLoader源码结构与创建者模式 初步小结

最近在回归看Univalsal_ImageLoader源码,本想自己也实现试试写一个,看源码是为了学习看能否使用,助于自己可以写出有自己逻辑结构的代码。 首先我们初始化ImageLoader的配置初始化的时候,...

DannyCoder
30分钟前
0
0
计算卷积神经网络浮点数运算量

前言 本文主要是介绍了,给定一个卷积神经网络的配置之后,如何大概估算它的浮点数运算量。 相关代码:CalFlops,基于MXNet框架的 Scala 接口实现的一个计算MXNet网络模型运算量的demo。 正文...

Ldpe2G
今天
3
0
Sql语言与MySql数据库

1. 数据库简介 1. 数据库,就是存储数据的仓库,只能通过sql语言来访问,数据库也是一个文件系统。通常,MySQL、Oracle等数据库,也被称为关系型数据库,其保存的不仅仅只是数据,还包括数据...

江左煤郎
今天
1
0
IDEA 取消自动import .*

打开设置 > Editor > Code Style > Java > Scheme Default > Imports ① 将 Class count to use import with "*" 改为 99 (导入同一个包的类超过这个数值自动变为 * ) ② 将 Names count ......

乔老哥
今天
3
0
PostGIS学习笔记(开篇)

PostGIS事实上算是笔者开始写博客的第一篇内容。而事实上那篇博文的内容并不丰富,笔者对PostGIS的了解仍然不多,然而17年在OSGeo课程学习时对PostGIS又有了进一步了解,并逐步发现它的强大。...

胖胖雕
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部