随着手机和平板电脑的普及，越来越多的用户使用这些设备来浏览网站和应用程序。因此，我们需要在前端设计中考虑响应式设计，以确保网站或应用程序在各种设备上都有良好的显示效果。
在这篇文章中，我们将探讨在响应式设计中如何避免使用绝对尺寸，并提供一些示例代码以帮助你更好地理解。
为什么要避免使用绝对尺寸？
在响应式设计中，使用绝对尺寸会导致以下问题：
无法适应不同屏幕大小。如果我们在设计中使用绝对尺寸，那么我们的设计只适用于某些特定的屏幕大小，而不能自适应不同的屏幕尺寸。这会导致我们的设计在不同的设备上显示效果不佳。
不利于可访问性。如果我们使用绝对尺寸设置网站或应用程序中的文本、按钮等元素的大小，那么用户可能不能调整其在自己设备上的大小。这会影响他们的可访问性，并可能导致他们无法浏览我们的内容。
因此，在响应式设计中，最好使用相对尺寸。
响应式设计中常用的相对尺寸
在响应式设计中，常用的相对尺寸有两种：em 和 rem。
em
em是相对于父元素的字体大小而言的。简单来讲，它的大小是相对于所处环境的字体大小而言的。
-- -------------------- ---- ------- -- ----------- -- ---- - ---------- ----- - -- -------- -- ----- - ---------- ---- -
在这个例子中，我们设置1em等于16像素。如果我们将文字大小设置为2em，它的大小将是32像素（2 * 16像素）。
em的缺点在于，当页面元素的嵌套层级过多时，em继承的字体大小会越来越大，导致页面出现了混乱的情况。
rem
与em不同，rem是相对于根元素的字体大小而言的。这个根元素通常是<html>元素。
-- -------------------- ---- ------- -- ------------ -- ---- - ---------- ----- - -- --------- -- ----- - ---------- ----- -
在这个例子中，我们设置1rem等于16像素。如果我们将文字大小设置为2rem，它的大小将是32像素（2 * 16像素）。
rem的优点是，它不会受到层级嵌套的影响，更容易计算。
实际应用
让我们看一个示例，展示如何在响应式设计中使用相对尺寸。
<div class="container"> <h1 class="title">我是标题</h1> <p class="text">我是文本内容</p> <button class="btn">我是按钮</button> </div>
在CSS中，我们使用rem作为相对尺寸，并且使用媒体查询来对不同的屏幕尺寸进行调整。
-- -------------------- ---- -------
-- ------------ --
---- -
---------- -----
-
-- -- --
------ -
---------- -----
-------------- -----
-
-- -- --
----- -
---------- -----
------------ ----
-------------- -----
-
-- -- --
---- -
---------- -----
-------- ------ -----
-
-- ---- --
------ ----------- ------ -
-- -- --
------ -
---------- -----
-
-- -- --
----- -
---------- -------
-
-- -- --
---- -
---------- -------
-------- ---- -----
-
-在这个例子中，我们使用了相对尺寸rem，并使用媒体查询来调整元素的大小和间距。在这种情况下，我们的设计将在不同的屏幕尺寸下自适应调整。
结论
在响应式设计中，使用相对尺寸是很重要的。不要使用绝对尺寸，因为它们不能自适应不同的屏幕尺寸，并可能导致可访问性问题。在实践中，使用rem作为相对尺寸是明智的选择，它不会受到层级嵌套的影响，更容易计算。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f1287b6fbf96019736d077