新建一个flex.js

! function () {
function t(t) {
return this.config = t, this
}
t.prototype = {
reset: function () {
var t = Math.min(document.documentElement.clientWidth, 750) / 750 * 100;
document.documentElement.style.fontSize = t + "px";
var e = parseFloat(window.getComputedStyle(document.documentElement).fontSize),
n = t / e;
/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent) || document.documentElement
.setAttribute("flatform", "android"), 1 != n && (document.documentElement.style
.fontSize = t * n + "px")
}
}, window.Adapter = new t, window.Adapter.reset(), window.onload = function () {
window.Adapter.reset()
}, window.onresize = function () {
window.Adapter.reset()
}
}();

  引入页面,此时1rem=100px,我们就可以利用这个比例进行换算了。

h5构建页面(rem布局准备)的更多相关文章

  1. Flexible实现H5页面的rem布局适配

    1.https://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.html (使用Flexible实现手淘H5页面的终端适配) 2.http ...

  2. H5 页面 rem 布局适配方法

    rem 布局适配方案 主要方法为: 按照设计稿与设备宽度的比例,动态计算并设置 html 根标签的 font-size 大小: css 中,设计稿元素的宽.高.相对位置等取值,按照同等比例换算为 re ...

  3. 手机页面rem布局

    手机页面设计一般的大小是640,但是,手机屏幕大小确实不确定的,这样,怎么才能做出适应所有手机的手机页面呢?一般的解决方案有两种,rem布局和百分比布局,更推荐用rem布局来制作手机页面. 首先,给页 ...

  4. 在页面rem布局中用到的js代码

    在你的页面加入以下代码,就初步搞定了 function fontSize() { var view_width = document.getElementsByTagName('html')[0].g ...

  5. 移动端开发rem布局之less+媒体查询布局的原理步骤和心得

    rem即是以html文件中font-size的大小的倍数rem布局的原理:通过媒体查询设置不同屏幕宽度下的html的font-size大小,然后在css布局时用rem单位取代px,从而实现页面元素大小 ...

  6. 手机端页面自适应解决方案-rem布局

    rem布局 布局前插入原生js即可 (function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationch ...

  7. 快速构建H5单页面切换骨架

    在Web App和Hybrid App横行的时代,为了拥有更好的用户体验,单页面应用顺势而生,单页面应用简称`SPA`,即Single Page Application,就是只有一个HTML页面的应用 ...

  8. 手机端页面自适应之rem布局

    W3C官网上是这样描述rem的--"font size of the root element" . rem布局在移动端发挥的比较好. 阿里团队高清方案: <script&g ...

  9. 关于H5填写信息类页面横向布局总结

    接触h5已经有快一年了,因为一直偏向页面重构所以在页面布局方面也算是经历过风风雨雨.所以总结一下自己用过的方法来比较归纳 首先来说,H5的页面一般分为两种,一种是用来做市场营销的,主要特征是图多,页面 ...

随机推荐

  1. 在Docker Container 内部安装 Mono 的方法 ---From官网

    1.首先 mono 是什么 Mono是一个由Xamarin公司(先前是Novell,最早为Ximian)所主持的自由开放源代码项目. 该项目的目标是创建一系列匹配ECMA标准(Ecma-334和Ecm ...

  2. JavaScript引用类型简单记录

    Object Array instanceof Function 引用类型 - Object {} 等价于 new Object() 我们经常使⽤用对象来承载可选参数,⽽而⽤用 命名的形式参数来传递必 ...

  3. Jmeter安装及配置(含JDK安装)

    (一)java环境配置1.官网下载64位的jdkhttp://www.oracle.com/technetwork/java/javase/downloads/index.html 2.环境变量设置变 ...

  4. 1-Perl 简介

    Perl 是 Practical Extraction and Report Language 的缩写,可翻译为 "实用报表提取语言".Perl 是高级.通用.直译式.动态的程序语 ...

  5. 换发型app任性扣费?苹果app订阅任性扣费?怎么办?刚成功

    2019年9月18日17:09:27 什么黑猫举报没用 先关闭订阅 账户中心自助申请试试,不通过再进行下面这步 https://getsupport.apple.com/?caller=home&am ...

  6. BZOJ4241历史研究题解--回滚莫队

    题目链接 https://www.lydsy.com/JudgeOnline/problem.php?id=4241 分析 这题就是求区间权值乘以权值出现次数的最大值,一看莫队法块可搞,但仔细想想,莫 ...

  7. 如何解决windows 80端口被占用的情况

    window下如果在安装某个软件或者启动tomcat时 会遇到80端口被占用的情况,通过命令 netstat -ano 查看端口被占用情况 找到占用80端口的进程ID,然后我们在任务管理器当中将这个进 ...

  8. vue 编译警告 Compiled with 4 warnings

    问题原因: windows下盘符的大小写导致的. 我在cmd里运行的时候,是切换到小写,改成大写的E盘符就没问题了

  9. 02.Zabbix⾃定义监控项

    1.zabbix⾃定义监控初试 如何获取系统中想监控对象的值,获取后⼜如何将该值传递给Zabbix-Server 1.1.监控系统中的对象 #(系统监控命令 + awk + 筛选条件 = 监控的状态值 ...

  10. Java 基本的数据类型(8种)

    1.Java 基本的数据类型(8种) 整型:byte .short .int .long 浮点型:float .double 字符型:char 布尔型:boolean