随着移动设备的普及和屏幕尺寸的不断增加，CSS 响应式设计已经成为了前端开发中的重要概念。在设计响应式页面时，长宽的设置是非常关键的一环。在本文中，我们将介绍 CSS 响应式设计中长宽的最佳实践，包括单位的选择、比例的应用和布局的优化。
1. 单位的选择
在 CSS 中，我们可以使用多种单位来表示长度和宽度，如像素（px）、百分比（%）、em 和 rem 等。在响应式设计中，最常用的单位是百分比和 em/rem。
1.1 百分比
百分比单位指的是相对于父元素的长度或宽度，比如设置一个元素的宽度为 50% 则表示该元素的宽度为其父元素宽度的一半。百分比单位在响应式设计中非常有用，因为它可以根据屏幕尺寸的变化自动适应。例如，下面的示例代码展示了如何使用百分比设置一个响应式图片：
<div class="image-wrapper"> <img src="image.jpg"> </div>
-- -------------------- ---- ------- -------------- - ------ ---- ------- - ----- - --- - ------ ----- ------- ----- -------- ------ -
在这个示例中，我们使用了百分比单位将图片以响应式的方式展示在页面中。图片的宽度为其父元素 .image-wrapper 宽度的 100%，因此它会根据屏幕尺寸的变化自动适应。
1.2 em/rem
em 和 rem 都是相对单位，它们的区别在于 em 单位是相对于元素的父元素字体大小，而 rem 单位是相对于根元素字体大小。em 和 rem 都可以用于响应式设计中设置长宽，它们的主要作用是根据页面字体大小的变化自动适应。
例如，下面的示例代码展示了如何使用 rem 单位设置响应式的导航菜单：
<nav class="main-nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>-- -------------------- ---- ------- --------- - ---------- ------- - -- - ------- -- -------- -- ----------- ----- -------- ----- ---------------- -------------- - -- - ----- -- ----------- ------- -------- ----- -
在这个示例中，我们使用了 rem 单位设置导航菜单的字体大小和每个菜单项的 padding。由于 rem 单位是相对于根元素的字体大小，因此设置为 1.2rem 的导航菜单字体大小和 1rem 的菜单项 padding 都可以根据页面字体大小的变化自动适应。
2. 比例的应用
在响应式设计中，比例的应用也是非常重要的。比例可以使页面元素更加协调和美观，同时也可以让页面在不同的设备上有更好的适应性。常用的比例包括黄金比例和平方根比例。
2.1 黄金比例
黄金比例（1:1.618）是人类最喜欢的比例之一，在设计响应式页面时可以使用黄金比例来增强页面的美感。例如，下面的示例代码展示了如何使用黄金比例设置响应式的头部：
-- -------------------- ---- -------
--------
---- -------------
---- ---------------
------
-----
----
------ ----------------------
------ -----------------------
------ --------------------------
------ -------------------------
-----
------
----------- -------------------- ---- ------- ------ - -------- ----- ---------- ----- ---------------- -------------- -------- ----- - ----- - ----------- ------ ------------- --- - --- - ----------- ------ - -- - ------- -- -------- -- ----------- ----- -------- ----- ---------------- -------------- - -- - ----- -- ----------- ------- -
在这个示例中，我们使用黄金比例将头部分成了两部分：logo 和导航菜单。由于 38.2% 和 58.8% 的比例非常接近黄金比例的 38.2% 和 61.8%，因此这个页面看起来非常协调和美观。
2.2 平方根比例
平方根比例（1:1.414）也是一种流行的比例，它在设计响应式页面时也非常有用。例如，下面的示例代码展示了如何使用平方根比例设置响应式的图片列表：
<ul class="image-list"> <li><img src="image1.jpg"></li> <li><img src="image2.jpg"></li> <li><img src="image3.jpg"></li> <li><img src="image4.jpg"></li> <li><img src="image5.jpg"></li> <li><img src="image6.jpg"></li> </ul>
-- -------------------- ---- ------- ----------- - -------- ----- ---------- --- ----- - -- - ----------- --------- - - - ------ ------- ----- - --- - ------ ----- ------- --------- - ------- ----------- ------ -
在这个示例中，我们使用平方根比例和 flexbox 布局将图片列表分成了三列。由于每个列表项的宽度是 calc(100% / 3 - 2rem)，因此它们可以很好地适应不同的屏幕宽度。每个图片的高度是 calc(100% / 1.414)，这个高度也是平方根比例的结果。
3. 布局的优化
在响应式设计中，布局的优化也是非常重要的一步。根据不同的屏幕尺寸，我们可以使用不同的布局方案来优化页面的展示效果。
3.1 媒体查询
媒体查询是 CSS 中的一种功能，它可以根据设备的屏幕尺寸、分辨率和方向来选择不同的样式规则。例如，下面的示例代码展示了如何使用媒体查询来优化响应式页面的布局：
<div class="content"> <h1>Hello, world!</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quam dolor, faucibus eu fringilla vitae, volutpat ut justo. Vestibulum porttitor, purus eget vehicula tempor, elit elit mattis ex, vel dapibus metus turpis sit amet ex.</p> </div>
-- -------------------- ---- -------
-------- -
---------- ------
------- - -----
-------- -----
-
------ ------ --- ----------- ------ -
-------- -
-------- -----
---------- -----
---------------- --------------
------------ -------
-
-- -
----------- ----
-
- -
----------- ----
-
-在这个示例中，我们使用了媒体查询来优化大屏幕上的页面布局。在小屏幕上，页面的布局是默认的，即标题和文本都是上下排列；在大屏幕上，我们使用了 flexbox 布局将标题和文本放在同一行，这样页面看起来更加醒目和协调。
3.2 flexbox 布局
flexbox 布局可以让我们更加方便地排列页面元素，它在响应式设计中也非常有用。例如，下面的示例代码展示了如何使用 flexbox 布局优化响应式页面的导航菜单：
<nav class="main-nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>-- -------------------- ---- -------
--------- -- -
-------- -----
---------------- -------
-
-- -
------- - -----
-
------ ------ --- ----------- ------ -
--------- -- -
---------------- --------------
-
-在这个示例中，我们使用了 flexbox 布局将导航菜单的四个项水平排列。在小屏幕上，菜单项都居中显示；在大屏幕上，我们使用了媒体查询将菜单项均匀分布在导航栏两侧，这样页面看起来更加美观和协调。
总结
在 CSS 响应式设计中，长宽的设置是非常关键的一环。选择合适的单位、应用比例和优化页面布局都可以让我们实现更加优秀的响应式页面。例如，我们可以使用百分比和 em/rem 单位来实现自适应的长宽；使用黄金比例和平方根比例来增强页面的美感；使用媒体查询和 flexbox 布局来根据不同设备的尺寸和分辨率来优化页面布局。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64c30f1c83d39b48816fdc36