手机端布局 - 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 ...
随机推荐
- 分享一个简单程序(webApi+castle+Automapper+Ef+angular)
前段时间在周末给朋友做了一个小程序,用来记录他们单位的一些调度信息(免费,无版权问题).把代码分享出来.整个程序没有做任何架构.但是麻雀虽小,用到的技术也没少.WebApi+Castle+AutoMa ...
- Nginx做前端Proxy时TIME_WAIT过多的问题
我们的DSP系统目前基本非凌晨时段的QPS都在10W以上,我们使用Golang来处理这些HTTP请求,Web服务器的前端用Nginx来做负载均衡,通过Nginx的proxy_pass来与Golang交 ...
- [开源]微信在线信息模拟测试工具（基于Senparc.Weixin.MP开发）
目前为止似乎还没有看到过Web版的普通消息测试工具(除了官方针对高级接口的),现有的一些桌面版的几个测试工具也都是使用XML直接请求,非常不友好,我们来尝试做一个“面向对象”操作的测试工具. 测试工具 ...
- C#对七牛云的操作
1.配置环境 项目中引用 QiNiu.4.0.dll 在webconfig:<add key="USER_AGENT" value="qiniu csharp-sd ...
- Centos Another app is currently holding the yum lock
yum命令用ctrl+z命令中断后,再运行yum时,出现: Existing lock /var/run/. Another app is currently holding the yum lock ...
- EF架构~DefaultValue让我的UnitOfWork更可读
回到目录 在编程世界里,使用“否定式”不是一件好事,因为它的可读性并不高,但有时,为了让使用者减少代码量,还是使用了双重否定,直到DefaultValue的出现,它改变了这一切,它可以为你的属性设置你 ...
- JAVA环境配置-Eclipse新建项目
首先配置安装jdk和jre 安装如下: 然后配置变量环境:右键我的电脑--属性--高级系统设置--环境变量--系统变量--找到PATH--编辑 将安装配置的jdk的目录和jdk目录下的bin目录放入其 ...
- [全文检索]Lucene基础入门.
本打算直接来学习Solr, 现在先把Lucene的只是捋一遍. 本文内容: 1. 搜索引擎的发展史 2. Lucene入门 3. Lucene的API详解 4. 索引调优 5. Lucene搜索结果排 ...
- iOS-----Xcode-Debug尝试
在Xcode中,Debug时,不能像eclipse ,或VS那些集成开发那样,能直接查看变量的值.那怎么在调试的时候查看XCode的变量呢? 有一些方法的. 1.新建一个Single View App ...
- ViewPager 的页面重置问题
当我们使用ViewPager控件时,假设我们的ViewPager有三页,当我们第一次启动ViewPager显示第一页的时候,ViewPager会预加载第二页,这样当我们向第二页滑动的时候就可以看见第二 ...