技术博客
AGM 系列三防手机（如 AGM G1、G2、H2、X系列）大多运行 Android 8–12，WebView 基于 Chromium 内核（但版本常滞后），默认禁用部分现代 API。直接套用通用响应式模板大概率出现缩放异常、点击延迟、Canvas 渲染模糊或 touchstart 不触发等问题。关键不是“加个 meta”，而是针对性补全底层能力。
图片在移动端撑破布局，核心是让它随容器宽度自动缩放，同时保持宽高比。关键就两条：给图片设 max-width: 100% 和 height: auto。
绝大多数情况下，font-weight: 500 或 font-weight: 600 不生效，不是你写错了，而是当前字体压根没提供这个字重。比如系统自带的 Microsoft YaHei（微软雅黑）只包含 normal（400）和 bold（700）两个字重——中间的 500、600 全部被浏览器自动“降级”到 400 或“升级”到 700。
本文详解为何 css `:empty` 配合 `+` 相邻兄弟选择器在嵌套结构中失效，并提供现代、语义清晰的解决方案——使用 `:has()` 伪类精准控制父容器样式。
用 display: flex 居中图片时，如果父容器是
height 或内容撑不开，align-items: center 就没效果——因为容器高度为 0，没有“垂直方向可居中的空间”。 确保父容器有明确高度，比如 height: 300px、min-height: 100vh，或被其他内容撑开 若想让图片在视口内居中，直接给父容器设 min-height: 100vh 更稳妥 避免只靠 height: auto + flex 期待垂直居中，这是新手最常卡住的点 忘记写 justify-content 和 align-items 两个属性
常见原因是按钮不是各自父容器中的第一个或最后一个子元素。比如父元素里有文字节点、注释、空格，或者按钮前面有 或
:first-child 就会匹配那个元素，而不是按钮本身。
外部 CSS 文件本身不是“慢”的根源，问题常出在加载时机和阻塞行为上。link 标签引入的 CSS 默认会阻塞 HTML 解析和页面渲染，尤其当文件体积大、网络差或服务器响应慢时，首屏白屏时间明显拉长。更关键的是，如果多个页面共用同一份外部 CSS，但各自只用其中 10% 的样式，冗余下载就直接拖慢有效载荷。
交互细节廉价，往往不是因为没加动效，而是动效用得随意、生硬或过度。适度使用 transition 的关键，在于匹配用户预期、尊重界面节奏、隐藏实现痕迹——让变化“本该如此”，而不是“它在动”。
绝大多数 CSS 框架（如 Bootstrap、Tailwind）的 .container 类只控制宽度和居中，不设置 padding。这意味着即使内容被限制在 1200px 宽度内，左右依然可能紧贴浏览器窗口边缘，尤其在小屏设备上阅读吃力。
CSS背景渐变的方向主要通过 linear-gradient() 的第一个参数控制，这个参数可以是关键词方向（如 to right）或角度值（如 45deg），两者效果等价但写法不同，角度更精确、更易复用。