rem自适应布局用法及详解

时间:2024-11-12 21:36:09

对于很多新同学来说,rem还是比较熟悉而又陌生的, 熟悉呢是因为rem时常出现在耳边,陌生呢是因为又搞不清原理。

今天咱们一起来弄清楚rem到底是怎么一回事!

原理:css3规定:1rem的大小就是根元素<html>的font-size的值。

        通过设置 根元素<html>的font-size的大小,来控制整个html文档内的字体大小、元素宽高、内外边距等,

        根据移动设备的宽度大小来实现自适应,不同的设备都展示一致的页面效果。

rem布局简单分析 分三步:

第一步:前端开发者首先拿到UI设计原型稿的宽度,如 320px 或者640px或者750px;

第二部:增加脚本

    以640px设计稿为例:

<script>
		/*设置根元素<html>字体大小*/
		function getRem() {
			var html = ("html")[0]; /*获取标签元素<html>*/
			var oWidth =  || ; /*获取设备的宽度  ||后为兼容IE低版本写法*/
			 = oWidth / 6.4 + "px"; /*设置根元素<html>字体大小   计算出的值 就相当于1rem;为什么? 这就是rem单位的规定 1rem就等于根元素<html>字体大小*/
		}

		/*6.4: 为设计稿宽度640px; 若是750px的设计稿 只需要将6.4改为7.5即可。
		 * 在手机屏幕宽度与设计稿一致时,即:oWidth = 750px 那么上面的计算 oWidth / 6.4 + "px" 结果就是100px;   = 100px 
		 *css3中规定 1rem就对应这<html>的font-size的大小,所以100px = 1rem 这样方便大家将px转化为rem 按照这个比例来设置字体大小、元素宽高、内外边距等的单位为rem;
		 *举例:在设计稿中,某一行字体大小为14px,则我们需要在css文件中将对应的字体设置为0.14rem;
		 *      在设计稿中,某一个元素宽高分别为 100px与20px;则我们需要在css中将对应的宽高设置为1rem与0.2rem;
		 */

		/*页面初始化调用getRem()*/
		 = function() {
			/*初始化*/
			getRem();
			/*getRem绑定监听*/
			("resize", getRem, false);
		};
	</script>


第三步:css文件中记得都使用rem单位。 关键点:字体大小,元素宽高,内外边距一定是根据设计稿测量得来的。对 是设计稿!  举例是640px宽的设计稿,