背景
在前端开发中，CSS Reset 是一个常用的技术手段。它的作用是将不同浏览器的默认样式进行统一，避免出现浏览器兼容性问题。但是，在适配手机浏览器时，CSS Reset 会遇到一些问题，如何解决这些问题，是本文要探讨的问题。
问题
在手机浏览器中，CSS Reset 会出现以下问题：
- 元素大小不一致：由于不同浏览器的默认样式不同，CSS Reset 会将它们都重置为相同的值，导致元素大小不一致。
- 字体大小过小：在手机浏览器中，由于屏幕尺寸较小，字体大小需要适当增大，但是 CSS Reset 会将字体大小重置为较小的值。
- 其他问题：还可能出现其他问题，如样式丢失、布局错乱等。
解决方案
为了解决以上问题，我们可以采取以下方案：
- 使用响应式布局：响应式布局是一种适应不同屏幕尺寸的布局方式，可以解决元素大小不一致的问题。通过媒体查询和 CSS3 的弹性盒子布局，可以实现响应式布局。
- 调整字体大小：可以使用 CSS3 的 rem 单位来设置字体大小。rem 单位是相对于根元素的字体大小来计算的，可以根据屏幕尺寸自适应调整字体大小。
- 针对特定浏览器进行适配：可以针对特定浏览器进行适配，如针对 iPhone 的 Safari 浏览器进行适配。可以使用 CSS3 的 @media 查询和选择器，针对不同的浏览器进行不同的样式设置。
- 使用现成的解决方案：有些开源项目已经提供了适配手机浏览器的解决方案，如 Normalize.css、Bootstrap 等。可以直接使用这些解决方案，省去自己编写的麻烦。
示例代码
以下是一个使用 Normalize.css 和响应式布局的示例代码：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------------------
----- ---------------- --------------------------------------------------------------------------------
-------
---- -
---------- -----
-
------ ------ --- ----------- ------ -
---- -
---------- -----
-
-
---------- -
-------- -----
---------- -----
---------------- -------
------------ -------
-
----- -
------ ------
------- ------
------- -----
----------------- -----
------- --- ----- -----
----------- -------
------------ ------
---------- -----
-
------ ------ --- ----------- ------ -
----- -
------ ------
------- ------
---------- -----
-
-
--------
-------
------
---- ------------------
---- --------------------
---- --------------------
---- --------------------
---- --------------------
---- --------------------
---- --------------------
------
-------
-------在这个示例代码中，我们使用了 Normalize.css 来进行 CSS Reset，使用了响应式布局来适应不同屏幕尺寸，使用了 rem 单位来设置字体大小。在屏幕尺寸小于 768px 时，使用 @media 查询和选择器来调整样式。
结论
在适配手机浏览器时，CSS Reset 可能会出现一些问题，但是通过采取响应式布局、调整字体大小、针对特定浏览器进行适配等方式，可以解决这些问题。同时，也可以使用现成的解决方案来简化工作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/676bf3ff1b6ecd978c6ecbc7