移动页面缩放方法之(三)rem布局
<!DOCTYPE HTML> <html lang="zh-cn"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"/> <title>无标题文档</title> <style> *{ padding:0; margin:0; } body{ background:#000; } div{ width:6.4rem; height:5rem; margin:0 auto; line-height:5rem; font-size:.3rem; text-align:center; color:#fff; background:red; } </style> </head> <body> <div>我是测试的</div> <script> ;!function(top){ var doc=top.document; top.SetSize=function(width){ this.obj=doc.querySelector('html'); this.width=width; this.fontSize=100; this.init().resize(); }; SetSize.prototype={ init:function(){ this.scale=this.obj.clientWidth/this.width; this.obj.setAttribute("style","font-size:"+(this.scale*this.fontSize)+"px !important"); return this; }, resize:function(){ top.addEventListener('resize',this.init.bind(this),false); } }; SetSize.prototype.constructor=SetSize; doc.addEventListener('DOMContentLoaded',function(){ new SetSize(640); },false); }(parent); </script> </body> </html>
移动页面缩放方法之(三)rem布局的更多相关文章
- 移动端(手机端)页面自适应解决方案1(rem布局)---750设计稿
设计稿尺寸为750 * 1340.结合网易.淘宝移动端首页html元素上的动态font-size属性.设计稿尺寸.前端与设计之间协作流程一般分为下面两种: 网易做法: 页面开头处引入下面这段代码,用于 ...
- 移动页面缩放方法之(二)控制HTML
<!DOCTYPE HTML> <html lang="zh-cn"> <head> <meta http-equiv="Con ...
- 移动页面缩放方法之(一)控制meta法
<!DOCTYPE HTML> <html lang="zh-cn"> <head> <meta http-equiv="Con ...
- CSS实现三列布局
三列布局指的是两边两列定宽,中间的宽度自适应. 常用三种方法: 定位 浮动 弹性盒布局 定位方式 最直观和容易理解的一种方法,左右两栏选择绝对定位,固定于页面的两侧,中间的主体选择用margin确定位 ...
- 移动端rem布局实现(vw)
什么是rem?在W3C官网上是这样描述的:“font size of the root element (根元素的字体大小)”.就是说rem是相当于html的,因为网页的默认字体大小是 16px,所以 ...
- H5 页面 rem 布局适配方法
rem 布局适配方案 主要方法为: 按照设计稿与设备宽度的比例,动态计算并设置 html 根标签的 font-size 大小: css 中,设计稿元素的宽.高.相对位置等取值,按照同等比例换算为 re ...
- 手机端页面自适应:rem布局
rem布局非常简单,首页你只需在页面引入这段原生js代码就可以了 (function (doc, win) { var docEl = doc.documentElement, resizeEvt = ...
- 手机端页面自适应解决方案—rem布局进阶版
手机端页面自适应解决方案—rem布局进阶版 https://www.jianshu.com/p/985d26b40199 注:本文转载之处:https://www.cnblogs.com/anni ...
- 手机端页面自适应解决方案—rem布局(进阶版,附源码示例)
转自:https://segmentfault.com/a/1190000007350680 一年前笔者写了一篇 <手机端页面自适应解决方案—rem布局>,意外受到很多朋友的关注和喜欢.但 ...
随机推荐
- ios新特征 ARC详解
IOS ARC 分类: IOS ARC2013-01-17 09:16 2069人阅读 评论(0) 收藏 举报 目录(?)[+] 关闭工程的ARC(Automatic Reference Co ...
- 在 iOS 应用中直接跳转到 AppStore 的方法--备用
找到应用程序的描述链接,比如:http://itunes.apple.com/gb/app/yi-dong-cai-bian/id391945719?mt=8 然后将 http:// 替换为 itms ...
- BZOJ 1032 祖玛
Description 这是一个流行在Jsoi的游戏,名称为祖玛.精致细腻的背景,外加神秘的印加音乐衬托,彷佛置身在古老的国度里面,进行一个神秘的游戏——这就是著名的祖玛游戏.祖玛游戏的主角是一只石青 ...
- 关于javaBean中boolean类型变量的set和get注入后传到前端JS中的问题
set和get方法如下: public boolean isLine() { return isLine; } public void setLine(boolean isLine ...
- GitHub超详细图文攻略 - Git客户端下载安装 GitHub提交修改源码工作流程 Git分支 标签 过滤 Git版本工作流
最近听同事说他都在使用GitHub,GitHub是程序员的社区,在里面可以学到很多书上学不到的东西,所以最近在准备入手这方面的知识去尝试学习,正好碰到这么详细完整的文章,就转载了,希望对自己和大家有帮 ...
- table 的边框变细
table { border-width: 0px 0px 1px 1px; border-style:solid;border-color:black} td { border-width: 1px ...
- AlgorithmsI PA2: Randomized Queues and Deques RandomizedQueue
RandomizedQueue 有几个关键点: 1. 选择合适的数据结构,因为需要任意位置删除元素,Linked list 做不到,必须使用resizing arrays. 2. resizing 的 ...
- bzoj2724
分块大法好!首先预处理第i块到第j块的答案,这是可以在O(n*tot)内处理出来的 tot表示块数然后考虑询问对于[l,r],答案只可能是[l,r]之间所夹整块[i,j]的答案和非整块中的位置上的数下 ...
- weblogic启动报错之未修改hosts产生错误
报错如下: Enter username to boot WebLogic server:weblogic Enter password to boot WebLogic server: <Ju ...
- 数据结构(Splay平衡树):COGS 339. [NOI2005] 维护数列
339. [NOI2005] 维护数列 时间限制:3 s 内存限制:256 MB [问题描述] 请写一个程序,要求维护一个数列,支持以下 6 种操作:(请注意,格式栏 中的下划线‘ _ ’表示实际 ...