对于前端开发人员来说，实现网页的手机适配是一项非常重要的工作。一个合理的手机适配可以使网站更加美观、易于操作，从而提高用户体验。而实现手机适配的关键之一便是 CSS Reset。
什么是 CSS Reset
CSS Reset 是一种预先定义的 CSS 样式集，它可以消除浏览器默认的样式，从而使网页在不同的浏览器中表现相似。通常情况下，不同浏览器对某些元素的默认样式是有区别的，这会给我们的页面设计带来很大的挑战。而 CSS Reset 则可以将这些差异消除，为我们的网页设计提供更为统一的基础。
为什么要使用 CSS Reset
使用 CSS Reset 的主要目的是消除浏览器对元素默认样式的影响。这种影响可能会导致网页在不同浏览器中表现出现差异，进而影响我们的设计效果。通过使用 CSS Reset，我们可以同一浏览器的默认样式，从而保持页面的一致性。
此外，CSS Reset 还可以让我们更容易地设计网页。毕竟，在消除默认样式的基础上，我们可以更加方便地自定义样式，从而实现更加美观的页面效果。
怎么实现手机适配
了解了 CSS Reset 的基本概念和作用，我们就可以讨论如何通过 CSS Reset 实现手机适配了。通常情况下，实现网页的手机适配需要考虑以下几个方面：viewport、字体、行距、宽度等。下面来分别介绍一下。
Viewport
Viewport 可以理解为可视窗口的大小。在手机设备上，Viewport 受到设备屏幕大小的限制，因此需要针对不同的设备进行适配。为此，我们可以使用以下代码：
<meta name="viewport" content="width=device-width, initial-scale=1">
这段代码会将网页的宽度设置为设备的宽度，并将网页的缩放比例设置为 1。这样，我们的页面就可以在不同的设备上表现得更加统一和美观了。
字体
在手机设备上，字体大小可以影响网页的可读性。因此，我们需要为不同的设备设置不同的字体大小。一般而言，我们可以将网页的根元素字体大小设置为一个比较小的值（比如 10px），然后通过 em 或 rem 进行相对控制。
html {
font-size: 62.5%; // 10px
}
body {
font-size: 1.6rem; // 16px
}这样，我们就可以实现比较好的字体适配了。
行距
在手机设备上，行距也是需要特别注意的一点。因为太小的行距会导致网页难以阅读，而太大的行距则会使得网页显得紧凑不易阅读。一般而言，我们可以将行距设置为字体大小的 1.5 倍到 2 倍左右，例如：
body {
font-size: 1.6rem;
line-height: 2.4rem;
}宽度
在手机设备上，网页的宽度也需要根据不同的设备进行适配。通常情况下，我们可以将网页的宽度设置为 100%，然后通过百分比来控制网页内部元素的大小。
-- -------------------- ---- ------- ----- ---- - ------ ----- - ---------- - ------ ---- ---------- ------- ------- - ----- -
上面的代码会将网页内部容器的宽度设置为 90%（即占满整个页面的 90%），并限制宽度最大值为 1000px。这样一来，我们的网页就可以适应不同的设备了。
示例代码
最后，本文提供一份完整的示例代码，供大家参考。
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
---------- ----- --- ------ ---------------
----- --------------- ---------------------------- -----------------
-------
-- ----- --
----- ---- -
------- --
-------- --
-
-- -------- --
---- -
---------- ------ -- ---- --
-
-- ---- --
---- -
---------- ------- -- ---- --
------------ ------- -- --- ----- -- ---- ---- --
-
-- ----- --
----- ---- -
------ -----
-
---------- -
------ ----
---------- -------
------- - -----
-
-- ------- --
------- -
----------------- -----
------ -----
-------- -----
-
-- -
---------- ------- -- ---- --
------- --
-
-------- -
----------------- -----
------ -----
-------- -----
----------- -----
-
- -
---------- ------- -- ---- --
------- --
-------------- -----
-
--------
-------
------
---- ------------------
------- ---------------
----------- -----------
---------
---- ----------------
-------- ----- ----- --- ----- ----------- ---------- ----- --- ---------- -- ---- ------- ---------- ---- ---- --------- ------ --- --------- ----- ---- -- ---------
------
------
-------
-------总结
CSS Reset 是实现网页手机适配的关键之一。了解 CSS Reset 的基本概念和作用，通过设置 Viewport、字体、行距、宽度等属性可以使网页在不同的设备上表现相似，从而提高用户体验和网站的美观度。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647d793f968c7c53b0842578