响应式开发中的rem

最新推荐文章于 2022-01-06 11:09:51 发布

yiyingcsdn

最新推荐文章于 2022-01-06 11:09:51 发布

阅读量578

点赞数

文章标签：响应式开发 rem 等比缩放

本文链接：https://blog.csdn.net/yiyingcsdn/article/details/72642641

版权

用rem做为响应式开发中的单位（包括字体，宽度，高度），页面的显示可以自适应设备宽高。比如我们的设计稿是根据iphone6（375 X 667）的尺寸设计的，我们用rem为单位，就按照inphone6的尺寸做好页面就ok了，页面在其他设备里就可以响应显示。

1.设置rem;字体和高度我们可以使用rem,宽度的话我们依然可以使用百分比。

rem是相对于根元素<html>的。浏览器的默认字号是16px。即：1rem= 16px = 100%;

我们是从小屏幕到大屏幕的开发模式，那么我们的设置如下：（下面的height是例子，实际开发中不需要的。）

2.通过下面的设置，高度自适应是可以解决的，但是有的浏览器或移动端设备有最小字体的限制，下面我总结一下最小字体的限制情况可以参考http://www.cnblogs.com/he-lian/p/4512276.html。
移动端最小字体为12px(仅chrome有此限制)，inphone类移动设备没有最小字体限制。其他设备可能会受8px的限制。

html {
		font-size: 62.5%;/* 相当于font-size:10px; 1rem=10px */
                height:10rem;/* height:100px; */
	}

@media screen and (min-width:414px) {
	html {
		font-size:75%;/* 相当于font-size:12px; 1rem=12px */

                height:10rem; /* height=120px */
	}
}

@media screen and (min-width:640px) {
	html {
		font-size:87.5%;/*相当于font-size:14px*/
                height:10rem; /* height:140px; */
	}
}



@media screen and (min-width:1024px) {
	html {
		font-size:100%;/*相当于font-size:16px*/



                height:10rem; /* height:160px;*/
	}
}