REM实现自适应布局

想给博客换个主题,到处找找不到满意的,最后发现默认主题twentytwelve越看越顺眼,于是就想动手改一下用。

看CCS文件的时候发现引入了一个新大小单位:rem,CSS文件里有介绍,看半天拿着手机计算了几下愣是没搞明白,怕是新东西搜出来的都是英文看着累就没找google,而是百度了一下,百度的结果就是看到一篇文章被转来转去,来转去,转去,去。。。

郁闷之下回到主题的CSS再看那介绍,打开电脑的计算器,一计算,居然被我整明白了,原来原先计算值不等是因为我手机的计算器设置了保留两位小数点的原因,真实囧。。。

其实px和em的关系我都没整明白,就来说这个rem让我觉得很忐忑的。。。

rem好像也是一个相对大小的值,它是相对于根元素<html>,比如假设,我们设置html的字体大小的值为 html{font-size: 87.5%;}(也就是14px,这是twentytwelve默认主题里的设置)。然后其他的字体就是将你要的值除以14得到的值;比如默认的twentytwelve主题大小是960px;换算成rem就是960/14=68.57142857142857rem(我这个用电脑的计算器计算的,比默认的更精确,嘿嘿);padding的24px也就是24/14=1.714285714285714rem(当然还是比css文件里的精确),以此类推。

上面的14是个变量,相对于你对根元素html字体大小的设定,如果你设定的是62.5%,那除数就变成10了,对照表如下图:

CSS3中的rem值与px之间的换算

用这个rem单位的好处有啥我不知道,不过如果你根元素的字体大小选62.5%,那px和rem之间的换算就是px直接除以10就得到rem了,这比em简单多了,到现在我都没搞清楚em和px之间是如何换算的。

另外rem在ie8及ie8以下的版本不支持外其他浏览器都支持,如果你要考虑ie8及一下,可以像twentytwelve默认文件那样设置个px再设置个rem就可以了。

再另外,有许多朋友问我,为啥 html 设置成 62.5%,或者 10px 时,这种换算无效了呢?经过研究发现,不知道什么时候开始,小于 12px 或者 75% 的字体大小 rem 确实不支持这种换算,这可能与现在有些浏览器不支持 12px 以下的大小有关,具体原因不知,反正记住一点:html 必须 12px 以上大小才行。

至于其他的我就不懂了,继续我的主题去。

转载自:http://lms.im/css/1069.html


小案例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.box{
				width: 100px;
				height: 100px;
				overflow: auto;
				background-color: red;
			}
			.sunbox{
				width: 100%;
				height: 100%;
				border: 4px solid red;
				background-color: greenyellow;
			}
			.box2{
				width: 100px;
				height: 100px;
				overflow: auto;
			}
			.sunbox2{
				width: 100%;
				height: 100%;
				border: 0px solid red;
				background-color: gold;
				margin-top: 40px;
				margin-left: 5px;
				border: 4px solid green;
			}
			/*calc*/
			.calc-box{
				width:calc(20% + 2px + 2em + 2rem);
				height:calc(10rem);
				background-color: green;
			}
			/*自适应小案例*/
			@media screen and (min-width: 768px) {
				html{
					/*14px*/
					height: 100%;
					width: 100%;
					font-size: 87.5%;
				}
			}
			@media screen and (min-width: 1366px) {
				html{
					/*18px*/
					height: 100%;
					width: 100%;
					font-size: 112.5%;
				}
			}
			@media screen and (min-width: 1920px) {
				html{
					/*20px*/
					height: 100%;
					width: 100%;
					font-size: 125%;
				}
			}
			.rem{
				width: 10rem;
				height: 10rem;
				background-color: grey;
			}
			
			
		</style>
	</head>
	<body>
		<h1>盒模型的边框一般会把盒子撑破</h1>
		<div class="box">
			<div class="sunbox"></div>
		</div>
		
		<div class="box2">
			<div class="sunbox2"></div>
		</div>
		
		<div class="calc-box">
			<span>CSS3的calc很强大啊!!!</span>
			<br>
			<span>CSS3的calc很强大啊!!!</span>
		</div>
		<h1>通过rem实现自适应</h1>
		<div class="rem"></div>
	</body>
</html>


CSS3中的rem值与px之间的换算CSS3中的rem值与px之间的换算



浏览 797 评论 0 赞 0 砸 0 标签: css3
评论
还可以再输入500个字

请您注意

·自觉遵守:爱国、守法、自律、真实、文明的原则
·尊重网上道德,遵守《全国人大常委会关于维护互联网安全的决定》及中华人民共和国其他各项有关法律法规
·严禁发表危害国家安全,破坏民族团结、国家宗教政策和社会稳定,含侮辱、诽谤、教唆、淫秽等内容的作品
·承担一切因您的行为而直接或间接导致的民事或刑事法律责任
·您在NoteShare上发表的作品,NoteShare有权在网站内保留、转载、引用或者删除
·参与本评论即表明您已经阅读并接受上述条款