手机端布局 - 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 ...
随机推荐
- 接口分离原则（Interface Segregation Principle）
接口分离原则(Interface Segregation Principle)用于处理胖接口(fat interface)所带来的问题.如果类的接口定义暴露了过多的行为,则说明这个类的接口定义内聚程度 ...
- Fix catalyst driver in Ubuntu 13.04 / 13.10
Fix catalyst driver in Ubuntu 13.04 / 13.10(墙外文章备份) 1. Introduction I found lots of people strugglin ...
- 虚拟化平台cloudstack（6）——使用maven:jetty调试
调试环境 ubuntu 12.04 JDK1.7 apache-maven-3.10 eclipse 4.2 Juno mysql 5 apache ant JDK的配置和安装 安装可以参考: htt ...
- 什么是P3O？
P3O(Portfolio, Programme and Project Offices)项目组合.项目群和项目办公室资格认证. 是由英国商务部 OGC 于2008年10月28日发布的最新的最佳实践指 ...
- 说说设计模式~观察者模式(Observer)
返回目录 观察者模式,也叫发布/订阅模式(publish/subscribe),监视器模式等.在此种模式中,一个目标物件管理所有相依于它的观察者物件,并且在它本身的状态改变时主动发出通知.这通常透过呼 ...
- 爱上MVC系列~带扩展名的路由失效问题
回到目录 对MVC中,对URL进行重写变得非常方便,你只要设置相应的路由规则即可完成,但进行MVC3后,发现设置了以下路由,系统具体不认 routes.MapRoute( name: "De ...
- [常见问题]Project facet Java versin 1.8 is not support.
发生这个问题的原因是我们的java编译环境(JDK版本),与tomcat运行环境(JDK或JRE版本)不一致导致的. 到eclipse的设置中找到compile项(或右键项目进入),看一下编译环境的J ...
- ECMAScript5中数组的方法
1.forEach()方法 遍历数组,为每个数组元素调用指定函数,三个参数分别为:数组元素 item.元素索引 index.数组本身 arr,无返回值 例: 2.map()方法 调用数组的每个元素传递 ...
- Jasmine入门（上）
什么是Jasmine Jasmine是一个Javascript的BDD(Behavior-Driven Development)测试框架,不依赖任何其他框架. 如何使用Jasmine 从Github上 ...
- Liferay7 BPM门户开发之45: 集成Activiti文件上传部署流程BPMN模型
开发文件上传,部署流程模板. 首先,开发jsp页面,deploy.jsp <%@ include file="/init.jsp" %> <h3>${RET ...