移动端rem的使用
时间:2019-09-19
本文章向大家介绍移动端rem的使用,主要包括移动端rem的使用使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <!-- <link rel="stylesheet" href="../css/reset-min.css"/> --> <script> window.onload = function(){ getRem(750,100) }; window.onresize = function(){ getRem(750,100) }; function getRem(pwidth,prem){ var html = document.getElementsByTagName("html")[0]; var oWidth = document.body.clientWidth || document.documentElement.clientWidth; html.style.fontSize = oWidth/pwidth*prem + "px"; } /* //小米官网的写法 !function(n){ var e=n.document, t=e.documentElement, i=720, d=i/100, o="orientationchange"in n?"orientationchange":"resize", a=function(){ var n=t.clientWidth||320;n>720&&(n=720); t.style.fontSize=n/d+"px" }; e.addEventListener&&(n.addEventListener(o,a,!1),e.addEventListener("DOMContentLoaded",a,!1)) }(window);*/ </script> <style> * { padding: 0; margin: 0; } .wrap{position:absolute;top:0;left:0;bottom:0;right:0;background:#fefefe;} .title{width:100%;height:0.98rem;line-height:0.98rem;color:#fff;background:#e02222;text-align: center;font-size:0.32rem;} </style> </head> <body> <div class="wrap"> <div class="title">首页</div> </div> </body> </html>
原文地址:https://www.cnblogs.com/bao2333/p/11546804.html
- OpenCV中图像修复技术介绍与演示
- 44个Java代码性能优化总结
- LDA(Linear Discriminant Analysis)算法介绍
- Express.js 4,Node.js,MongoDB REST API 简易教程
- 基于梯度下降算法求解线性回归
- 彩色图像高斯反向投影
- OpenCV中直方图反向投影算法详解与实现
- 基于一维级联快速膨胀与腐蚀算法
- mac下利用Breakpad的dump文件进行调试
- OpenCV3.2集成Android Studio2.2开发配置
- laravel中使用gulp打包发布前端部分
- Spring的编程式事务和声明式事务
- Java过滤器Filter的使用详解
- 基于积分图的二值图像膨胀算法实现
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法