表单元素宽度在小屏幕上被撑破怎么办
直接给 <input>、<select></select>、<textarea></textarea> 加 width: 100% 不够，它们默认有 min-width: min-content，尤其在 Chrome/Firefox 中遇到长单词或 URL 会溢出容器。
- 必须显式重置：
min-width: 0（对 flex/inline-flex 容器子元素尤其关键） - 搭配
box-sizing: border-box，避免 padding/border 累加导致超宽 - 如果父容器是
display: flex，子表单控件需加flex: 1或flex: 0 1 auto，否则可能不收缩
label 和 input 怎么在移动端正确堆叠
用 display: block 强制换行最稳妥，但要注意默认 <label></label> 是 inline 元素，不设 width 会导致点击热区过小。
- 推荐写法：
<label><input type="text">用户名</label>，然后对label设display: block+margin-bottom: 0.5rem - 避免把
input放在label外部再用for/id关联——这在 iOS Safari 上偶尔触发 focus 延迟 - 如果要用水平布局（如 checkbox + 文字），改用
display: flex; align-items: center，并确保input的flex-shrink: 0防止被压缩变形
响应式断点该用 max-width 还是 min-width
对表单这种「内容驱动」的 UI，优先用 @media (max-width: 768px) 控制移动端样式，而不是反向写 min-width。
响应式黑色展台设计整站模板1.4.2
下载
响应式黑色展台设计整站模板，自带内核安装即用，图片文本实现可视化，方便修改，支持多种内容模型及自定义功能，可根据需要自行添加。模板特点： 1、安装即用，自带人人站CMS内核及企业站展示功能（产品，新闻，案例展示等），并可根据需要增加表单 搜索等功能（自带模板） 2、支持响应式 3、前端banner轮播图文本均已进行可视化配置 4、伪静态页面生成 5、支持内容模型、多语言、自定义表单、筛选、多条件搜
-
max-width更符合渐进增强逻辑：先写移动端基础样式，再用媒体查询“向上增强”桌面端排版 - 如果混用
min-width，容易在平板横竖屏切换时出现样式跳跃（比如 768px 同时命中两个断点） - 实际项目中建议只设一个断点：768px 或 640px，复杂表单才加第二个（如 1024px），太多断点反而难维护
placeholder 文字在 iOS 上显示异常怎么修
iOS Safari 对 ::placeholder 伪元素支持不稳定，常出现文字偏上、截断或透明度异常。
立即学习“前端免费学习笔记（深入）”；
- 必须加前缀：
::-webkit-input-placeholder、::placeholder两套都写 - 避免在 placeholder 里用 emoji 或过长中文，iOS 会计算错误高度
- 如果 placeholder 要居中对齐，别只靠
line-height，得配合padding-top和padding-bottom手动微调 - 更可靠的做法：用 JS 动态控制
value和placeholder切换，避开伪元素渲染问题
