手机端rem自适应布局实例
2016-02-24 13:39
615 查看
首先要书写核心js代码,控制住页面的初始大小:我是以750px(即iPhone6)的标准,设置font-size:100px;
<script>
(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
</script>
接下来再设置一下html和body:
html { height: 100%; width: 100%; font-family: 'Heiti SC', 'Microsoft YaHei'; font-size: 100px; outline: 0; -webkit-text-size-adjust:none;}
body { height: 100%; margin: 0; -webkit-user-select: none; position: relative;}
现在就可以开始布局了。
假设你现在需要一个宽度为全屏;高度为100px;的div。你可以这么写:
div{ width:7.5rem;height:1rem;}//因为我是以750px为标准的,默认又是100px所以全屏宽度就是750/100=7.5rem;高度是:100/100=1rem;以此换算。
假设你要设置24号的字体的话,则为:24/100=0.24rem;
其他屏幕的手机将会自动适配。
来源于:http://tieba.baidu.com/p/3870227753
<script>
(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
</script>
接下来再设置一下html和body:
html { height: 100%; width: 100%; font-family: 'Heiti SC', 'Microsoft YaHei'; font-size: 100px; outline: 0; -webkit-text-size-adjust:none;}
body { height: 100%; margin: 0; -webkit-user-select: none; position: relative;}
现在就可以开始布局了。
假设你现在需要一个宽度为全屏;高度为100px;的div。你可以这么写:
div{ width:7.5rem;height:1rem;}//因为我是以750px为标准的,默认又是100px所以全屏宽度就是750/100=7.5rem;高度是:100/100=1rem;以此换算。
假设你要设置24号的字体的话,则为:24/100=0.24rem;
其他屏幕的手机将会自动适配。
来源于:http://tieba.baidu.com/p/3870227753
相关文章推荐
- android:scaleType属性
- Swift 与 Objective-C混合编程
- swift2.0中文版教程
- unity, AnimatorCullingMode的一个bug
- iOS 支付 [支付宝 银联 微信]
- android中xmlns:tools属性详解
- 30、微信-表情相关
- 对android四大启动模式的理解
- ios学习之 关于Certificate、Provisioning Profile、App ID的介绍及其之间的关系
- 27、微信聊天Fragment_Msg的代码实现
- 26、微信聊天Fragment_Msg的界面布局
- Android 系统稳定性
- 24、微信-标题栏上的下拉菜单式弹窗TitlePopup
- 23、微信-温馨提示对话框WarnTipDialog
- 22、微信 - 主界面实现
- 21、微信 - 主界面布局
- iOS 拦截系统自带的Pop事件
- 微信从无到有
- IOS 字体表
- iOS学习----------SDWebImage框架解析(1)