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的页面一般分为两种,一种是用来做市场营销的,主要特征是图多,页面 ...
随机推荐
- Python time strptime()方法
Python time strptime()方法 描述 Python time strptime() 函数根据指定的格式把一个时间字符串解析为时间元组. 语法 strptime()方法语法: time ...
- 小记--------spark的Master的Application注册机制源码分析及Master的注册机制原理分析
原理图解: Master类位置所在:spark-core_2.11-2.1.0.jar的org.apache.spark.deploy.master下的Master类 //截取了部分代码 //处理 ...
- selenium的使用与chromedriver的下载配置
Selenium是一个web自动化测试工具,最初是为网站自动化测试而开发的,Selenium可以直接运行在浏览器上,它支持所有主流的浏览器,可以接受指令,让浏览器自动加载页面,获得需要的数据,甚至页面 ...
- FFmpeg4.0笔记:封装ffmpeg的解封装功能类CDemux
Github https://github.com/gongluck/FFmpeg4.0-study/tree/master/Cff CDemux.h /*********************** ...
- RESTful、共用接口、前后端分离、接口约定的实践 (转)
出处: 某小公司RESTful.共用接口.前后端分离.接口约定的实践 前言 随着互联网高速发展,公司对项目开发周期不断缩短,我们面对各种需求,使用原有对接方式,各端已经很难快速应对各种需求,更难以提 ...
- JS中的继承(上)
JS中的继承(上) 学过java或者c#之类语言的同学,应该会对js的继承感到很困惑--不要问我怎么知道的,js的继承主要是基于原型(prototype)的,对js的原型感兴趣的同学,可以了解一下我之 ...
- GukiZ and Binary Operations CodeForces - 551D (组合计数)
大意: 给定$n,k,l,m$, 求有多少个长度为$n$, 元素全部严格小于$2^l$, 且满足 的序列. 刚开始想着暴力枚举当前or和上一个数二进制中$1$的分布, 但这样状态数是$O(64^3)$ ...
- 阿里云自动获取token值(python)
一,token说明 token的意思是“令牌”,是服务端生成的一串字符串,作为客户端进行请求的一个标识.当用户第一次登录后,服务器生成一个token并将此token返回给客户端,以后客户端只需带上这个 ...
- golang(9):网络编程 & redis
网络编程 TCP/IP 协议: . TCP(传输控制协议) -- 应用程序之间通信 . UDP(用户数据包协议)-- 应用程序之间的简单通信 . IP(网际协议) -- 计算机之间的通信 . DHCP ...
- 转:Git和Github简单教程
转自:https://www.cnblogs.com/schaepher/p/5561193.html Git和Github简单教程 原文链接:Git和Github简单教程 网络上关于Git和Gi ...