移动页面缩放方法之(三)rem布局
2024-10-15 13:45:09
<!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>
最新文章
- 用RMAN备份EBS数据库的脚本
- hadoop中MapReduce多种join实现实例分析
- Java学习随笔1:Java是值传递还是引用传递?
- HDU 2065 “红色病毒”问题 --指数型母函数
- Mysql查询比较
- 【Linux高频命令专题(14)】nl
- hdu-4833-Best-Financing(DP)
- object类和内部类
- jQuery的each使用陷阱
- python基础之 列表,元组,字典
- 06:合法 C 标识符
- 二分插入、bisect
- python的_thread模块来实现多线程(<;python核心编程例子>;)
- nginx-port-Permission-denied
- Angular简介与程序架构
- [Auto Testing] 工具准备:Selenium 与 ChromeDriver
- 前端项目中使用git来做分支和合并分支,管理生产版本
- MVC3 ajax功能
- 系统编程--标准IO
- 51nod_1255字典序最小的子序列