h5构建页面(rem布局准备)
新建一个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布局准备)的更多相关文章
- Flexible实现H5页面的rem布局适配
		1.https://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.html (使用Flexible实现手淘H5页面的终端适配) 2.http ... 
- H5 页面 rem 布局适配方法
		rem 布局适配方案 主要方法为: 按照设计稿与设备宽度的比例,动态计算并设置 html 根标签的 font-size 大小: css 中,设计稿元素的宽.高.相对位置等取值,按照同等比例换算为 re ... 
- 手机页面rem布局
		手机页面设计一般的大小是640,但是,手机屏幕大小确实不确定的,这样,怎么才能做出适应所有手机的手机页面呢?一般的解决方案有两种,rem布局和百分比布局,更推荐用rem布局来制作手机页面. 首先,给页 ... 
- 在页面rem布局中用到的js代码
		在你的页面加入以下代码,就初步搞定了 function fontSize() { var view_width = document.getElementsByTagName('html')[0].g ... 
- 移动端开发rem布局之less+媒体查询布局的原理步骤和心得
		rem即是以html文件中font-size的大小的倍数rem布局的原理:通过媒体查询设置不同屏幕宽度下的html的font-size大小,然后在css布局时用rem单位取代px,从而实现页面元素大小 ... 
- 手机端页面自适应解决方案-rem布局
		rem布局 布局前插入原生js即可 (function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationch ... 
- 快速构建H5单页面切换骨架
		在Web App和Hybrid App横行的时代,为了拥有更好的用户体验,单页面应用顺势而生,单页面应用简称`SPA`,即Single Page Application,就是只有一个HTML页面的应用 ... 
- 手机端页面自适应之rem布局
		W3C官网上是这样描述rem的--"font size of the root element" . rem布局在移动端发挥的比较好. 阿里团队高清方案: <script&g ... 
- 关于H5填写信息类页面横向布局总结
		接触h5已经有快一年了,因为一直偏向页面重构所以在页面布局方面也算是经历过风风雨雨.所以总结一下自己用过的方法来比较归纳 首先来说,H5的页面一般分为两种,一种是用来做市场营销的,主要特征是图多,页面 ... 
随机推荐
- UI语言杂集
			最适合做 GUI 的是 DSL 或者 XML(以及 XML 的扩展)之类的标记语言,而不是编程语言. 例如 Qt 的 QML,Android 的 XML 或者 WPF 的 XAML 以及大家都再熟悉不 ... 
- [js]$.ajax标准写法
			$.ajax({ url:"http://www.microsoft.com", //请求的url地址 dataType:"json", ... 
- python操作MySQL数据库(转)
			先来一个简单的例子吧: ? 1 2 3 4 5 6 7 8 9 10 import MySQLdb try: conn=MySQLdb.connect(host='localhost',u ... 
- linux mint 安装微信
			安装nodejs 到nodejs官网下载node js压缩包,然后解压到自己设置的目录.我的解压路径是 /home/congwiny/Develop/SoftWare/node-v6.10.3-lin ... 
- LeetCode:595.大的国家
			题目链接:https://leetcode-cn.com/problems/big-countries/ 题目 这里有张 World 表 +-----------------+------------ ... 
- python 常见内置函数setattr、getattr、delattr、setitem、getitem、delitem
			常见内置函数 内置函数:在类的内部,特定时机自动触发的函数 示例1:setattr.getattr.delattr class Person: # def __init__(self, name): ... 
- C# 知识点笔记:IEnumerable<>的使用,利用反射动态调用方法
			IEnumerable<T>的使用 创建一个IEnumerable对象 List<string> fruits = new List<string> { " ... 
- Shiro学习笔记总结,附加" 身份认证 "源码案例(一)
			Shiro学习笔记总结 内容介绍: 一.Shiro介绍 二.subject认证主体 三.身份认证流程 四.Realm & JDBC reaml介绍 五.Shiro.ini配置介绍 六.源码案例 ... 
- GitLab端口冲突 解决办法
			访问gitlab,出现:502 GitLab在使用的过程中,会开启80端口,如果80端口被其他的应用程序占用,则GitLab的该项服务不能使用,所以访问GitLab会失败.大多数皆是此问题. ... 
- 如何判断kbmMWClientQuery当前记录的增改状态?
			有朋友问我,客户端使用了kbmMWClientQuery,对其进行了编辑后,对于指定的记录,如何判断是否是增加的记录,或者是被修改后的记录? 下面这个函数,返回aDataSet当前记录的修改状态: f ... 
