rem适配

最新推荐文章于 2025-09-10 11:07:46 发布

转载最新推荐文章于 2025-09-10 11:07:46 发布 · 92 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/zhweb/p/7463255.html

文章标签：

#前端 #javascript #ViewUI

rem适配

一、rem是什么？

rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。rem是相对
于根元素<html>，这样就意味着，我们只需要在根元素确定一个px字号，则可以来算出元素的宽高。

rem与em有什么区别呢？
em是指相对于父元素的字体大小的单位。
rem是指相对大小对比的是HTML根元素。
rem可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。
目前，除了IE8及更早版本外，所有浏览器均已支持rem。对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单
位的声明。这些浏览器会忽略用rem设定的字体大小。

二、前端常用的几个单位的概论：

1、px (pixel，像素)：是一个虚拟长度单位，是计算机系统的数字化图像长度单位，如果px要换算成物理长度，需要指定精度DPI(Dots Per Inch，每英寸像素数)，在扫描打印时一般都有DPI可选。Windows系统默认是96dpi，Apple系统默认是 72dpi。
2、em(相对长度单位，相对于当前对象内文本的字体尺寸)：是一个相对长度单位，最初是指字母M的宽度，故名em。现指的是字符宽度的倍数，用法类似百分比，如：0.8em, 1.2em,2em等。通常1em=16px。
3、pt (point，磅)：是一个物理长度单位，指的是72分之一英寸。pt=1/72(英寸), px=1/dpi(英寸)
4、rem（root em，根em）：是CSS3新增的一个相对单位，这个单位引起了广泛关注。

三、 web app常用布局

1、流式布局做法
2、固定宽度做法
3、响应式做法
4、设置viewport进行缩放

<meta name="viewport" content="width=320,maximum-scale=1.3,user-scalable=no">

5、rem适配

<meta name="viewport" content="initial-scale=1,maximum-scale=1, minimum-scale=1">
<script type="text/javascript">
　　document.documentElement.style.fontSize = document.documentElement.clientWidth / 640*100 + 'px';
</script>
<body style="font-size: 0.32rem">