介绍 (function (医生,,赢),{
var 才能;docEl =, doc.documentElement,
,,,resizeEvt =, & # 39; orientationchange& # 39;, window ?拷贝,& # 39;orientationchange& # 39;,:, & # 39;调整# 39;
,,,recalc =, function (), {
,,,,,var clientWidth =, docEl.clientWidth;
,,,,,if (! clientWidth),返回;
,,,,,如果(clientWidth>=640) {
,,,,,,,docEl.style.fontSize =, & # 39; 100 px # 39;;
,,,,,其他}{
,,,,,,,docEl.style.fontSize =, 100, *,(时间/clientWidth 640), +, & # 39; px # 39;;
,,,,,}
,,,};
if 才能;(! doc.addEventListener),返回;
win.addEventListener才能(resizeEvt, recalc,,假);
doc.addEventListener才能(& # 39;DOMContentLoaded& # 39;,, recalc,,假);
})(文档,窗口); {
宽度:0.6雷姆,才能
高度:0.65才能快速眼动
} & lt; ! DOCTYPE html>
& lt; html>
,& lt; head>
,& lt; meta http-equiv=癈ontent-Type",内容=皌ext/html;, charset=utf-8",/比;
,,& lt; meta 内容=翱矶?设备宽度,初始=1.0,,最大范围=1.0,user-scalable=0;“, name=皏iewport",/比;
,,& lt; meta 内容=暗缁?no", name=癴ormat-detection",/比;
,,& lt; meta name=癴ormat-detection",内容=坝始?no",/比;
,,& lt; meta http-equiv=癈ache-Control",内容=皀o-cache"/比;
,& lt; title>响应式布局& lt;/title>
,& lt; style>
html才能{字体大小:20 px;宽度:,100%;高度:,100%;}
身体才能{保证金:0;填充:0;}
页眉,页脚才能{宽度:100%;背景:,# 17 a578;颜色:,# fff;字体大小:1 rem; text-align:,中心;行高:,2眼动;}
.footer才能{位置:固定;底:0;}
.box才能{}
学派才能{宽度:5 rem;高度:,5眼动;字体大小:,1.2雷姆;显示:,inline-block; text-align:,中心;颜色:,# fff;行高:,5眼动;margin-top:, 1眼动;}
.left才能{背景:# f00;}
.center才能{背景:# 048 f74;}
铃声才能{背景:# 000;}
,& lt;/style>
,& lt;/head>
,& lt; body>
,& lt; header>页面头部& lt;/header>
,& lt; div 类=癰ox"比;
& lt;才能div 类=皃ublic left"在左& lt;/div>
& lt;才能div 类=皃ublic center"祝辞中& lt;/div>
& lt;才能div 类=皃ublic right"在右& lt;/div>
& lt;才能div 类=皃ublic left"在左& lt;/div>
& lt;才能div 类=皃ublic center"祝辞中& lt;/div>
& lt;才能div 类=皃ublic right"在右& lt;/div>
,& lt;/div>
,& lt; footer 类=癴ooter"在页面底部& lt;/footer>
& lt;才能script>
,,,//orientationchange方向改变事件
,,,(function (医生,,赢),{
,,,,var docEl =, doc.documentElement,//根元素html
,,,,//判断窗口有没有orientationchange这个方法,有就赋值给一个变量,没有就返回调整方法。
,,,,,resizeEvt =, & # 39; orientationchange& # 39;, window ?拷贝,& # 39;orientationchange& # 39;,:, & # 39;调整# 39;
,,,,,recalc =, function (), {
,,,,,,var clientWidth =, docEl.clientWidth;
,,,,,,if (! clientWidth),返回;
null
null
null
null
null
null
null
null
null
null
null
null
null
本篇文章为大家展示了怎么在加班利用雷自动匹配计算字体大小,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。
此代码选640 px为基准值,为什么选640呢,
640 px的页面宽度是一个安全的最大宽度,保证了移动端页面两边不会留白。注意这里的px是css逻辑像素,与设备的物理像素是有区别的。如iPhone 5使用的是视网膜视网膜屏幕,使用2 px x 2 px的设备像素代表1 px x 1 px的css像素,所以设备像素数为640 x 1136像素,而它的css逻辑像素数为320 x 568 px。
所以当要切移动端的页面的时候,需要把效果图宽度等比例缩放到640 px。
比如当页面中某一div的宽度为60岁的高度为65的时候,就可以直接这样写样式:
<>强浏览器的兼容性
快速眼动是CSS3新引进来的一个度量单位,大家心里肯定会觉得心灰意冷呀,担心浏览器的支持情况。其实大家不用害怕,你可能会惊讶,支持的浏览器还是蛮多的,比如:Mozilla Firefox 3.6 +,苹果Safari 5 +, Google Chrome, IE9 +和Opera11 +。只是可怜的IE6-8无法,你们就把他们当透明了吧,我向来都是如此。
不过使用单位设置字体,可不能完全不考虑IE了,如果你想使用这个rem,但也想兼容IE下的效果,可你可考虑“px”和“快速眼动”一起使用,用“px"来实现IE6-8下的效果,然后使用“快速眼动”来实现代浏览器的效果,就让IE6-8不能随文字的改变而改变吧,谁让这个IE6-8这么老呢?大家不仿试试,还蛮有意思,说不定这个就是主流的度量单位了。
完整实例代码:
