# m-reset.css

**Repository Path**: bugeiguojiatuohoutui/m-reset.css

## Basic Information

- **Project Name**: m-reset.css
- **Description**: 移动端reset.css
- **Primary Language**: CSS
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 2
- **Created**: 2021-10-27
- **Last Updated**: 2025-01-22

## Categories & Tags

**Categories**: Uncategorized

**Tags**: 移动端css

## README

#### 既然有了这个小项目，就代表了我的观点，不争辩，如果争辩，那就是你对听你的。我为什么用——因为省事儿。

#### 这个 m-reset.css 不仅仅是 reset，也包括了移动端几乎必选的 common 设置。

#### reset 的用与不用与性能无关：

- 在已模块化与整合压缩的大环境下，不会存在因为这个多一次请求而影响性能。对于老项目，也可以选择把 reset.css 整合到 common.css 中；

- 对众多 html 标签样式重置也不会有任何影响，因为各浏览器也有个 reset，是浏览器默认样式；

- 至于说“多了一次不必要的计算，因为后期还可能被样式覆盖掉”，针对这种说法，做一个测试，对于上万标签的样式覆盖计算的性能影响可以忽略不计。

用与不用与什么有关呢？时间成本？流量？代码洁癖？我觉得这是无休止的话题，每个人、项目情况不一样，不能一概而论。我曾经不用，我处女座，我曾经代码洁癖，我现已磨平了棱角。


#### 移动端的 reset.css 有什么特别吗？

先网上找一个 reset.css，大同小异，无非就是有的标签多一点、有的属性值多点，有的更适合移动端一点，然后在这个 reset.css 上根据移动端和国情做一些调整：

- 关于字体，因为各个手机有自己的默认字体，且不是微软雅黑，所以无需设置中文字体，对于英文和数字，看需求，如果用手机默认字体则无需设置，如果要表现一致可用 Helvetica，各个系统都支持，并且绝大部分字体表现一致（即使同一个字体，在不同操作系统、同一操作系统的不同版本中也可能存在细微差别）。

- ` -webkit-tap-highlight-color: rgba(0, 0, 0, 0);` 对于可点击的元素，默认会有个灰色背景，将其取消。

- 1px 边框通用设置。

- `body {-webkit-text-size-adjust: 100% !important;-webkit-font-smoothing: antialiased;}` 前者仅用来解决 iOS 下修改系统默认字号可能导致页面文本溢出问题；后者仅用来让 MacOS 下让字体看起来细腻平滑。

- 关于刘海屏的安全区域，这个看需求，有的需要在安全区内，有的就要屏幕全覆盖。所谓“安全区”是直译过来的，其实就是页面展示在上下刘海或横条内部，保证内容不会被刘海和屏幕底部横条遮挡。其实跟安不安全关系不大，也是看需求。

  ```
  body{
      padding-bottom:constant(safe-area-inset-bottom);
      padding-bottom:env(safe-area-inset-bottom);
  }
  /*
  constant：小于IOS11.2版本生效
  env：大于IOS11.2版本生效
  还需要配合 <meta name="viewport" content="viewport-fit=cover>
  */
  ```

- 去除 iPhone 默认 input 样式。

  ```css
  input[type="submit"],input[type="reset"],input[type="button"],input:focus,button:focus,select:focus,textarea:focus{ outline: none;}
  input{-webkit-appearance:none; resize: none; border-radius: 0;}
  ```

整理后，有了当前版本。