等比缩放之自适应神器——css3的rem

最新推荐文章于 2023-07-19 14:51:02 发布

weixin_30341735

最新推荐文章于 2023-07-19 14:51:02 发布

阅读量515

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/yzycoder/p/6084126.html

版权

1.rem简介

rem是CSS3中新增加的一个单位值，他和em单位一样，都是一个相对单位。不同的是em是相对于元素的父元素的font-size进行计算；rem是相对于根元素html的font-size进行计算。这样一来rem就绕开了复杂的层级关系，实现了类似于em单位的功能。

2.rem兼容性

rem是CSS3新引进来的一个度量单位，大家心里肯定会觉得心灰意冷呀，担心浏览器的支持情况。其实大家不用害怕，你可能会惊讶，支持的浏览器还是蛮多的，比如：Mozilla Firefox 3.6+、Apple Safari 5+、Google Chrome、IE9+和Opera11+。只是可怜的IE6-8无法支持。

不过使用单位设置字体，可不能完全不考虑IE了，如果你想使用这个REM，但也想兼容IE下的效果，可你可考虑“px”和“rem”一起使用，用"px"来实现IE6-8下的效果，然后使用“Rem”来实现代浏览器的效果。就让IE6-8不能随文字的改变而改变吧，谁让这个Ie6-8这么老呢？可以针对低版本的IE浏览器做一定的处理：

[javascript] view plain copy

html { font-size: 62.5%; }
body { font-size: 14px; font-size: 1.4rem; } /* =14px */
h1 { font-size: 24px; font-size: 2.4rem; } /* =24px */

这样一来解决了IE低版本的不能兼容的问题，但生出另一个不足地方，就是增加了代码量。必竟鱼和熊掌很多时候不能兼得嘛。

3.rem使用

前面说了 em是相对于其父元素来设置字体大小的，这样就会存在一个问题，进行任何元素设置，都有可能需要知道他父元素的大小，在我们多次使用时，就会带来无法预知的错误风险。而 rem是相对于根元素 <html>，这样就意味着，我们只需要在根元素确定一个参考值，这个参考值设置为多少，完全可以根据您自己的需求来定。

假设就使用浏览器默认的字号16px，来看一些px单位与rem之间的转换关系：

如果你要设置一个不同的值，那么需要在根元素<html>中定义，为了方便计算，时常将在<html>元素中设置font-size值为62.5%:

[javascript] view plain copy

html {
font-size: 62.5%; /* 10 ÷ 16 × 100% = 62.5% */
}

相当于在<html>中设置font-size为10px。

4.例子：图片文字等等比缩放自适应

[html] view plain copy

<!DOCTYPE HTML>
<html>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="jquery-1.7.1.min.js"></script>
<title>home</title>
<style>
body {
margin: 0;
padding: 0;
border: 0;
background: #fd3b36;
font-family: Microsoft Yahei, Arial, sans-serif;
overflow-x: hidden;
}
#mainpage {
background: url(home.png) no-repeat;
background-size: 100%;
width: 6.4rem;
height: 11.36rem;
}
#content {
width: 5.5rem;
font-size: 0.26rem;
margin: 0 auto;
padding-top: 4.4rem;
color: #fff;
line-height: 0.38rem;
}
#btn {
text-align: center;
}
#btn img {
width: 3.66rem;
height: 0.96rem;
margin-top: 0.64rem;
}
</style>
<title>活动首页</title>
<body>
<div id="mainpage">
<div id="content">在这个阖家团圆、祝福新年的节日，祝大家新年快乐，万事大吉，平平安安，羊年行大运，发大财。</div>
<div id="btn">
<img src="btn.png">
</div>
</div>
<script>
/*将根元素字号大小设置为：屏宽与图宽的比；
由于chrom对10px以下的字不再缩小，而且手机屏
都比较小，所以作为默认字体大小又乘了100，这样
计算其他元素大小时，量出图上大小再除以100就可以了*/
function defaultfont() {
var sw = $(window).width();
var pw = 640;
var f = 100*sw/pw;
$('html').css('font-size', f+'px');
}
/*之所以要延时100ms再调用这个函数是因为
如果不这样屏幕宽度加载会有误差*/
defaultfont();
setTimeout(function(){
defaultfont();
}, 100);
</script>
</body>
</html>

转载于:https://www.cnblogs.com/yzycoder/p/6084126.html

weixin_30341735

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
等比缩放之自适应神器——css3的rem

1.rem简介 rem是CSS3中新增加的一个单位值，他和em单位一样，都是一个相对单位。不同的是em是相对于元素的父元素的font-size进行计算；rem是相对于根元素html的font-size进行计算。这样一来rem就绕开了复杂的层级关系，实现了类似于em单位的功能。2.rem兼容性 rem是CSS3新引进来的一个度量单位，大家心里肯定会觉得心灰意冷呀，...
复制链接

扫一扫