修复布局错位用响应式布局替代固定尺寸，手机屏幕尺寸多样320px-430px宽，用固定像素px定义元素宽高，必然在部分手机上错位，需改用相对单位媒体查询适配。
将固定单位改为相对单位、宽度、高度、用%相对于父元素或vw视口宽度的1%避免px，导航栏宽度设为width: 100%占满屏幕，而非width: 375px仅适配某款手机，字体大小用rem相对于根元素字体大小而非px，在html中设置font-size: 16px，则1rem=16px，不同屏幕可通过JS动态调整根字体大小适配更精细。
用媒体查询@media针对性调整对特殊尺寸屏幕，如小屏手机、平板、单独定义样式避免一刀切，修复图片、媒体变形让资源自适应屏幕、图片、视频是最容易走形的元素，需确保缩放时比例不变且不超出容器，强制图片自适应给所有图片添加基础样式，确保宽高比不变，且不超出父容器。
针对不同屏幕加载不同尺寸图片用srcset属性，为不同屏幕提供适配图片，避免小屏加载大图浪费资源，或大屏加载小图模糊，修复文字溢出换行问题，控制文本显示规则，文字在小屏上易出现超出容器，英文单词截断等问题需针对性设置。
修复浏览器兼容性问题适配不同手机系统，安卓尤其是旧版本和 iOS对CSS属性的支持不同，可能导致部分手机走形，常见兼容性问题及解决，flex布局失效旧安卓不支持flex，需加前缀、圆角、阴影显示异常加浏览器前缀，iOS滚动卡顿给滚动容器添加属性。
