移动端h5 reset css 欢迎补充

新手 欢迎补充和优化

/* reset.css */

/* 1. 基础重置 */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
} 

/* 2. 根元素设置 */
:root {
  /* iOS 安全区域变量 */
  --safe-area-inset-top: env(safe-area-inset-top);
  --safe-area-inset-bottom: env(safe-area-inset-bottom);
  --safe-area-inset-left: env(safe-area-inset-left);
  --safe-area-inset-right: env(safe-area-inset-right);
} 

/* 3. HTML 设置 */
html {
  height: 100%;
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
} 

/* 4. 运动偏好设置 */
@media (prefers-reduced-motion: no-preference) {
  html {
    interpolate-size: allow-keywords;
  }
} 

/* 5. Body 设置 */
body {
  height: 100%;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
    Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  touch-action: manipulation;
} 

/* 6. 媒体元素设置 */
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
} 

/* 7. 表单元素设置 */
input, button, textarea, select {
  font: inherit;
  -webkit-appearance: none;
  appearance: none;
  border-radius: 0;
  outline: none;
  border: none;
  background: transparent;
  touch-action: manipulation;
} 

/* 8. 特定表单元素字体大小修复 */
input[type="text"],
input[type="password"],
input[type="number"],
textarea {
  -webkit-text-size-adjust: 100%;
}

/* 9. 文本元素设置 */
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
  margin-block: 0;
} 

/* 10. 特定文本换行处理 */
p {
  text-wrap: pretty;
}

h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
  line-height: 1.2;
} 

/* 11. 链接元素设置 */
a {
  text-decoration: none;
  color: inherit;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
} 

/* 12. 滚动条设置 */
::-webkit-scrollbar {
  width: 0;
  background: transparent;
} 

/* 13. App 容器设置 */
#app {
  isolation: isolate;
  height: 100%;
  position: relative;
  overflow-x: hidden;
  /* 安全区域适配 */
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
} 

/* 14. 深色模式支持 */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
  }
} 

/* 15. 输入框焦点状态 */
input:focus, textarea:focus {
  outline: none;
}