手机端布局 - 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 ...
随机推荐
- 深入探究js中无所不在的this
黄金守则: this对象是在运行时基于函数的执行环境绑定的:在全局函数中,this等于window而当函数被作为某个对象的方法调用时, this等于那个对象. 下面是一些相关实践: --------- ...
- [异常解决] android studio检测不到手机的解决办法——ADB驱动自己安装
用android studio搭建安卓开发环境比eclipse简单的多,仅仅下载一个1个G左右的安装包安装即可. 安装好之后随便建一个hello world工程,想用实体手机调试要点: 选择USB设备 ...
- HTML5打造的炫酷本地音乐播放器-喵喵Player
将之前捣腾的音乐频谱效果加上一个播放列表就成了现在的喵喵播放器(Meow meow Player,额知道这名字很二很装萌~),全HTML5打造的网页程序,可本地运行也可以挂服务器上用. 在线Demo及 ...
- jmx完整示例
很早就开始去了解这个了,不过一直都是皮毛,基本概念明白,具体api几乎一无不知... 认真看了几篇文章,做了测试,终于有所了解 参考 入门级别: http://www.cnblogs.com/agou ...
- 每天一个linux命令（53）：route命令
Linux系统的route命令用于显示和操作IP路由表(show / manipulate the IP routing table).要实现两个不同的子网之间的通信,需要一台连接两个网络的路由器,或 ...
- PHP基础 创建
注意:1.网页文件放在wamp中的www文件下: 2.www文件下不能出现中文: 网页浏览的方法: 1.没有建立站点:localhost/文件所在位置 2.建立站点: (1)站点-新建站点-打开对话框 ...
- 22．编写一个类A，该类创建的对象可以调用方法showA输出小写的英文字母表。然后再编写一个A类的子类B，子类B创建的对象不仅可以调用方法showA输出小写的英文字母表，而且可以调用子类新增的方法showB输出大写的英文字母表。最后编写主类C，在主类的main方法 中测试类A与类B。
22．编写一个类A,该类创建的对象可以调用方法showA输出小写的英文字母表.然后再编写一个A类的子类B,子类B创建的对象不仅可以调用方法showA输出小写的英文字母表,而且可以调用子类新增的方法sh ...
- python 多线程网络编程 ( 二 ）
背景 我在[第一篇文章中]已经介绍了如何实现一个多线程的todo应用,接下来我将会研究如何使这个服务器完成下面这几个功能. 1.使用正则表达式解析用户发送的请求数据: 2.使用ThreadLocal技 ...
- C#学习系列-.NET体系结构
.NET框架概述 .NET 框架为.NET应用程序运行提供虚拟机环境,为.NET应用程序提供编译.运行.内存管理.垃圾回收.安全等服务. .NET框架组成部分 1.公共语言运行时(Common L ...
- python 数据的拷贝
# -*- config=utf-8 -*- #数据的拷贝 a=[1,2,3,4,5,6,"a","C"]; b=a;# a 与 b 的地址空间相同 a.app ...