手机端布局 - rem计算
功能说明：以一个640px的宽度为基准，最小不低于320px，当大于640px时，让其在页面中居中。
如果正处于640 - 320之中的，都按照js进行等比例的缩放。
这里我们规定1rem = 100px
--------------------------------------------------------------------------------------------------------
代码：
function Rem(){
var radio = function(){
var r = document.documentElement.clientWidth / 6.4;
return r>=100?100:r<=50?50:r;
}
document.documentElement.style.fontSize = radio() +'px';
window.addEventListener('resize',Rem,false);
}
调用代码：
Rem();
应用举例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" id="viewport" content="width=device-width" />
<title>phone</title>
<script>
function Rem(){
var radio = function(){
var r = document.documentElement.clientWidth / 6.4;
return r>=100?100:r<=50?50:r;
}
document.documentElement.style.fontSize = radio() +'px';
window.addEventListener('resize',Rem,false);
}
Rem();
</script>
<style>
*{margin:0px;padding:0px;list-style:none;}
.wrap{width:100%;max-width:640px;min-width:320px;margin:0px auto;}
.box,.box ul{width: 100%;background:#eee;}
.box li{width: 1rem;height: 1rem;background:red;margin:0px auto;}
</style>
</head>
<body>
<div class="wrap">
<div class="box">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</body>
</html>
手机端布局 - rem计算的更多相关文章
- 手机端布局rem 与vm的使用
手机端原来的时候,在项目中使用js判断出html的字体,然后根据rem设置字体,但是js本着少用的原则,考虑用vm,vh等(顺带说一句,vm vh是网页可视区域宽度 高度 即浏览器宽度减去约16px) ...
- 手机端布局，rem布局动态获取根字体大小
手机端布局,rem布局动态获取根字体大小. 以下代码: //rem布局动态获取根字体大小 function remDynamicLayout(){ var $windowWidth = $(windo ...
- 手机端页面rem自适应脚本
什么是rem 参照 web app变革之rem 在我看来,rem就是1rem单位就等于html节点fontsize的像素值.所以改变html节点的fontsize是最为关键的一步.根据手机宽度改变相对 ...
- 手机端使用rem适配
最近一直在做手机端的东西,各种型号的手机适配很是无解.经过同事及百度找到了这么一个方法 html font-size默认100px 将rem进行换算1px==0.01rem; 页面在各个手机适配个别会 ...
- 适配手机端之 rem
(function() { var psdWidth = 1080, maxRem = 100, ch = document.documentElement.clientHeight || docum ...
- flex 实例 豆瓣手机端布局实现
0.最终成品
- 手机端使用rem的适配
<html> <body> <!-- http://www.w3cfuns.com/notes/29143/79dafb7c07f6865f435af641869d312 ...
- 手机端适配rem代码片段
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- rem自适应手机端布局
通过js根据屏幕设备尺寸的大小,改变根元素的值: <script> var html = document.querySelector("html"); var rem ...
随机推荐
- mongodb（副本集）
副本集是mongo下的一种集群配置方式: 1.通过oplog的方式将主节点数据同步到副本节点,oplog不记录查询语句(因为不改变数据): 2.mongo的副本集可以有一个主节点,多个副本节点,主节点 ...
- 【读书笔记】WebApi 和 SPA(单页应用)--knockout的使用
Web API从MVC4开始出现,可以服务于Asp.Net下的任何web应用,本文将介绍Web api在单页应用中的使用.什么是单页应用?Single-Page Application最常用的定义:一 ...
- C#性能优化之Lazy<T> 实现延迟初始化
在.NET4.0中,可以使用Lazy<T> 来实现对象的延迟初始化,从而优化系统的性能.延迟初始化就是将对象的初始化延迟到第一次使用该对象时.延迟初始化是我们在写程序时经常会遇到的情形,例 ...
- Senparc.Weixin.MP SDK 微信公众平台开发教程（十）：多客服接口说明
微信官方的多客服接口原理是通过用户发送的信息,开发者服务器返回一条指定类型的响应信息,使用户的对话状态切换到官方的多客服状态(持续一段时间),这段时间内用户发送的所有信息都不会到达开发者的服务器,而是 ...
- 基于Task的异步模式--全面介绍
今天是国庆长假第一天,也是今天十月的开始.每到这个时候都是看海的季节-一个看"人海"的季节.反正我是不想在这样一个尴尬期出去放松自己,于是不如在家写写博客,长点本领呢.今天就来给大 ...
- EF架构~二级域名中共享Session
回到目录 对于一个有点规模的网站,都会有各个子网站,说是子网站,其实也都是独立的站点,一般通过二次域名来分开,如www.zzl.com,它可以有很多子网站,如image.zzl.com,file.zz ...
- Atitit ocr识别原理 与概论 attilax总结
Atitit ocr识别原理 与概论 attilax总结 1.1. Ocr的过程与流程1 1.2. OCR不同技术细分略有不同,但大概原理是一样的. 即主要技术过程是:二值化(又叫归一化)----- ...
- js相册展示
自己写来用的,第一版草稿源码+效果图,功能优先,其他的再说,有时间再改进. <script src="http://common.cnblogs.com/script/jquery.j ...
- Codeforces Round #380 (Div. 2) 总结分享
B. Spotlights 题意 有n×m个格子的矩形舞台,每个格子里面可以安排一个演员或聚光灯,聚光灯仅可照射一个方向(俯视,上下左右).若聚光灯能照到演员,则称为"good positi ...
- iReport 中使用 Chart 图
iReport 中使用 Chart 图 SSH2项目中需要引入如下两个jar包: jfreechart-1.0.12.jar jcommon-1.0.15.jar 从 iReport 的安装目录下搜索 ...