今天来聊聊网页设计那些坑，都是我自己淌过来的血泪经验。最近接了个小项目，寻思着不就写个页面嘛结果光排版就折腾了两天。
开场直接掉坑里
刚开始在编辑器里吭哧吭哧敲代码，顺手用了几个div直接堆布局。结果浏览器一打开差点心梗——不同分辨率的设备上看简直就是灾难，手机屏幕上按钮叠在文字上，平板电脑里图片直接溢出屏幕。
- 第一个坑：没做响应式适配，元素到处乱跑
- 第二个坑：尺寸单位乱用，px和rem混着写
浮动布局把我整麻了
第二天想着用float来排版，左边导航栏右边内容区，看着教程现学现卖。结果footer突然蹿到侧边栏旁边，活像挂在半空的裤衩。查了半天才发现忘记清除浮动，赶紧在footer前面加了clear:both才救回来。
解决方法直接焊进脑回路：
- 现在用::after伪元素清除浮动成了肌肉记忆
- 或者干脆在父容器上甩个overflow:hidden
手机端突然爆炸
做到表单环节更绝，在电脑上排版整整齐齐的输入框，手机点开直接撑破屏幕。原来input默认带了个width:100%效果，在移动端设备上直接冲出版心。紧急加了max-width:100%和box-sizing:border-box才按住这匹脱缰野马。
CSS命名打得我头皮发麻
最恶心的还是起类名，刚开始瞎写什么.aaa .bbb .title1，改样式时根本分不清谁是谁。后来被队友骂醒，改成.main-nav__item--active这种结构，虽然打字麻烦但维护时真香。
最终保命方案
- 弹性布局优先：现在能用flexbox绝不用float
- 单位锁死rem：以62.5%为基准，1rem=10px超直观
- 浏览器默认全清空：开头必加{margin:0;padding:0}省心
- 媒体查询分三档：手机/平板/电脑各写一套断点
现在写完页面肯定要上真机测试，电脑浏览器模拟器都是虚的，真到手机上看分分钟教你做人。说到底前端就是个不断踩坑的过程，哪次项目要是没遇到奇怪bug，反而觉得浑身不自在。
