响应式布局
在 H5 中，我们通常会使用 REM 和 VW 这两种单位来实现页面的响应式布局。这两种单位可以让页面元素的大小随着根元素（对于 REM）或视口宽度（对于 VW）的大小变化而变化，从而适应不同尺寸的屏幕。
⭐️⭐️rem布局
引入手淘的flexible方案进行REM布局
<script src="https://cdnjs.cloudflare.com/ajax/libs/flexible.js/0.3.2/flexible.min.js"></script>
配合使用 postcss-pxtorem 插件来自动将 px 单位转换为 REM 单位
module.exports = { plugins: { 'postcss-pxtorem': { rootValue: 37.5, // 该值应与 flexible.js 中设置的 remUnit 值相同 propList: ['*'], minPixelValue: 2 // 设置最小的转换尺寸，如果设置为 1 则会转换所有大小的像素值 } } }
注意：以上 rootValue 的设置值是基于设计稿的尺寸。例如，如果你的设计稿是 750px，那么你设置 rootValue: 75。如果你的设计稿是 375px，那么你设置 rootValue: 37.5。这样设置后，设计稿上的 1px 就对应于 1/100rem，方便转换。
⭐️⭐️vw布局
npm install postcss-px-to-viewport --save-dev
module.exports = { plugins: { 'postcss-px-to-viewport': { unitToConvert: 'px', // 要转化的单位 viewportWidth: 750, // UI设计稿的宽度 unitPrecision: 5, // 转换后的精度，即小数点位数 propList: ['*'], // 指定转换的css属性的单位，*表示全部css属性的单位都进行转换 viewportUnit: 'vw', // 指定需要转换成的视窗单位，默认vw fontViewportUnit: 'vw', // 指定字体需要转换成的视窗单位，默认vw selectorBlackList: [], // 指定不转换为视窗单位的类名， minPixelValue: 1, // 默认值1，小于或等于1px则不进行转换 mediaQuery: false, // 是否在媒体查询的css代码中也进行转换，默认false replace: true, // 是否直接更换属性值，而不添加备用属性 exclude: [], // 忽略某些文件夹下的文件或特定文件，例如 'node_modules'，使用正则表达式 include: undefined, // 如果设置了include，那将只有匹配到的文件才会被转换，例如只转换 'src/mobile' 下的文件（使用正则表达式） landscape: false, // 是否处理横屏情况 }, }, };
在你配置完成后，你可以像平时一样在 CSS 中使用 px 单位，然后 postcss-px-to-viewport 会在构建时自动将 px 单位转换为 vw 单位。
⭐️⭐️系统功能：
调用电话
<a href="tel:1234567890">Call me</a>
调用短信
<a href="sms:1234567890">Send me a SMS</a>
调用邮件
<a href="mailto:example@example.com">Email me</a>
调用图库和文件功能
<input type="file" accept="image/*">
弹出数字键盘：
适合输入电话号码
<input type="tel">
适合输入纯数字格式
<input type="number" pattern="\d*">
⭐️⭐️忽略自动识别
禁止移动端浏览器自动识别电话和邮箱
<meta name="format-detection" content="telephone=no"> <meta name="format-detection" content="email=no">
⭐️⭐️唤醒原生应用：
URL Scheme 示例
<a href="twitter://user?screen_name=OpenAI">Open Twitter</a>
⭐️⭐️禁止页面缩放和缓存：
禁止页面缩放和缓存
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate"> <meta http-equiv="expires" content="0">
⭐️⭐️禁止字母大写：
禁止字母大写功能和自动纠正功能
<input type="text" autocapitalize="off" autocorrect="off">
针对特定浏览器的配置：
Safari私有属性示例
<meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black">
⭐️⭐️监听屏幕旋转
通过使用CSS媒体查询中的orientation选择器，您可以监听屏幕的旋转事件，并根据屏幕方向调整样式，以便页面始终保持最佳布局。
@media (orientation: portrait) { /* 在竖屏模式下的样式 */ } @media (orientation: landscape) { /* 在横屏模式下的样式 */ }
⭐️⭐️禁止滚动传播
使用overscroll-behavior: contain属性可以阻止滚动传播的问题。当内容滚动到顶部或底部时，滚动事件不会继续传递给父容器。
.container { overscroll-behavior: contain; }
⭐️⭐️禁止屏幕抖动
通过提前声明滚动容器的padding-right为滚动条宽度，可以防止滚动条的出现导致屏幕抖动。
.container { padding-right: calc(100vw - 100%); }
⭐️⭐️禁止长按操作
使用user-select: none和-webkit-touch-callout: none属性可以禁止用户对元素进行长按操作，防止出现意外的行为。
.element { user-select: none; -webkit-touch-callout: none; }
⭐️⭐️禁止字体调整
通过设置text-size-adjust: 100%属性，可以阻止用户在旋转屏幕时浏览器自动调整字体大小。
⭐️⭐️禁止字体调整 通过设置text-size-adjust: 100%属性，可以阻止用户在旋转屏幕时浏览器自动调整字体大小。
⭐️⭐️禁止高亮显示
使用-webkit-tap-highlight-color: transparent属性可以禁止触摸元素时的高亮显示效果，使界面更加平滑和一致。
.element { -webkit-tap-highlight-color: transparent; }
⭐️⭐️禁止动画闪屏
通过使用perspective、backface-visibility和transform-style属性，可以解决在移动设备上动画闪屏的问题，提供更流畅的动画效果。
.element { perspective: 1000px; backface-visibility: hidden; transform-style: preserve-3d; }
⭐️⭐️自定义表单外观
使用appearance: none属性可以自定义表单元素的样式，使其更符合您的设计需求。
input[type="text"], input[type="email"], textarea { appearance: none; }
⭐️⭐️自定义滚动滚动条
通过使用::-webkit-scrollbar-*伪元素，可以自定义滚动条的样式，使其更加美观。
.scrollable::-webkit-scrollbar { width: 8px; } .scrollable::-webkit-scrollbar-thumb { background-color: #ccc; } .scrollable::-webkit-scrollbar-track { background-color: #f1f1f1; }
⭐️⭐️自定义输入占位文本样式
使用::-webkit-input-placeholder伪元素，可以自定义输入框的占位文本样式，使其更加吸引人。
input::placeholder { color: #999; }
