文档章节

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

_
 _qq507570355
发布于 2015/12/01 11:50
字数 322
阅读 19
收藏 0
点赞 0
评论 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 ⋅ 0

移动端开发基础 干货分享

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

WEB攻程狮 ⋅ 2017/12/06 ⋅ 0

浅谈移动端布局问题

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

我是小谷粒 ⋅ 2017/12/05 ⋅ 0

浅谈Web自适应

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

数通畅联 ⋅ 2016/08/19 ⋅ 0

布局方式 - 前端进阶之路

页面布局的方式总是随着技术的更新和创意的涌现不断的更新换代。从最开始的 固定布局「Fixed」到因为宽屏设备和移动互联网的普及产生的响应式和自适应,再到「Mobile First」的设计理念,前端...

果汁凉茶丶 ⋅ 01/07 ⋅ 0

rem 单位实现页面自适应布局

A. 先看一个函数: 咱暂时不讨论上面这个函数的具体功效是什么。 B. rem 单位介绍 既然扯到了 这个单位,那就有必要先解释下这个单位具体含义, 上的解释: 注意图中的画线部分, 这个单位需...

灰色v碰触 ⋅ 2017/11/29 ⋅ 0

自适应设计与网页响应式设计

目前非常流行自适应设计与响应式设计,而且经常让人混淆,自适应设计不应与自适应布局混为一谈,它们是完全不一样的概念。 在这先说明下这两者的异同: 自从移动终端飞速发展以来,各种各样的...

phala ⋅ 2015/07/31 ⋅ 0

微信小程序 尺寸单位rpx与px,rem相互转换

1. rpx :微信小程序开发中新出了尺寸单位rpx(responsive pixel): 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。 如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = ...

qq_31383345 ⋅ 2016/10/14 ⋅ 0

H5端自适应框架--adaptive

H5端自适应框架 使用方法: <script src="js/adaptive.js"></script> <script> window['adaptive'].desinWidth = 640;// 设计图宽度 window['adaptive'].baseFont = 18;// 没有缩放时的字体大......

MUFC-GO ⋅ 2015/07/06 ⋅ 0

通过媒体查询meta和JS转换REM单位实现100%自适应

移动端页面设置根节点(html)font-size大小转换REM单位实现100%自适应,通过媒体查询meta和JS两种方法实现 第一种方法 媒体查询 meta - REM单位字体设置 / 媒体查询 - 字体设置 // 平滑过渡...

pmlinjian ⋅ 2016/05/27 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

解决yum安装报错Protected multilib versions

使用yum安装报错Protected multilib versions原因是因为多个库不能共存,不过更新的话也并不行,但是可以在安装命令后面加上如下一段命令: --setopt=protected_multilib=false 案例: 比如需...

北岩 ⋅ 30分钟前 ⋅ 0

为什么要学习Typescript???

简单来说 目前的typescript就是未来的javascript 为什么?? 这要从ECMA-262标准的第4版说起 对了 我们说的ES5 其实是ECMAScript3.1这个替代性建议被扶正了而已... 那么 第4版标准是什么? 看看...

hang1989 ⋅ 35分钟前 ⋅ 0

linux安装ipfs

一、下载ipfs # cd /usr/local/ipfs/ # wget https://dist.ipfs.io/go-ipfs/v0.4.15/go-ipfs_v0.4.15_linux-amd64.tar.gz # tar -zxvf go-ipfs_v0.4.15_linux-amd64.tar.gz 二、安装ipfs # ......

八戒八戒八戒 ⋅ 41分钟前 ⋅ 0

jvm程序执行慢诊断手册

生产环境最多的几种事故之一就是程序执行慢,如果是web服务的话,表现就是响应时间长。本文分享,从业多年形成的排查守则。 诊断步骤 系统资源查看 首先是系统资源查看,而且必须是在第一步。...

xpbob ⋅ 41分钟前 ⋅ 0

YII2 advanced 高级版本项目搭建-添加API应用以及多应用

一、YII安裝 安裝yii可以用composer安裝,也可以在yii中文社区下载归档文件安装 composer安装就不介绍了,因为要安装composer,比较麻烦,当然安装了composer是最好的,以后安装yii的插件要用...

botkenni ⋅ 42分钟前 ⋅ 0

在jdk1.8的环境下模拟永久代内存溢出

相信不少小伙伴在看深入理解Java虚拟机的时候,作者给我们举例一个demo来发生PermGen space 1、通过List不断添加String.intern(); 2、通过设置对应的-XX:PermSize与-XX:MaxPermSize(更快看到...

虾几把写 ⋅ 今天 ⋅ 0

开发OpenDaylight组件的完整流程

在前面介绍学习了OpenDaylight的几个重要模块后,这里再来介绍下完整开发一个模块的过程。 OSGI的bundles提供被其他OSGI组件调用的服务。这个教程中展示的是Data Packet Service去解析数据包...

wangxuwei ⋅ 今天 ⋅ 0

Java序列化和反序列化

1、什么是序列化和反序列化 序列化:把对象转换为字节序列的过程。 反序列化:把字节序列恢复成对象的过程。 2、被序列化的类需要实现serializable接口,只是为了标注该对象是可以被序列化的...

IT-Mamba ⋅ 今天 ⋅ 0

流式构建原理

流式构建需要达到分钟级的数据更新频率,Kylin采用类似于Spark Streaming的做法,每隔数分钟进行一次微构建。这边的构建需要考虑到一个延迟因素,分布式网络存在延迟等因素,该时间段的数据有...

无精疯 ⋅ 今天 ⋅ 0

在maven项目工程编写solr代码,需要的依赖

solrJ <dependency> <groupId>org.apache.solr</groupId> <artifactId>solr-solrj</artifactId> <version>6.6.2</version> </dependency> <dependency> <groupId>org.apache.httpcomponents<......

爱运动的小乌龟 ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部