最近闲着没事，我就琢磨着搞个网页，总不能光在电脑上看着顺眼，手机一开就乱糟糟的。这响应式玩意儿听着高大上，但我这个技术小白就想自个儿试试，看看咋整才能让网页啥设备上都好看。

一、动起手来搭骨架

我先打开编辑器，随便新建个文件叫*，准备做个简单玩意儿，里面放个标题、几张图、再加点文字段落啥的。

• 头一件事，我决定用HTML把结构搭出来。乱写了几个div标签，分个头头部、内容区、尾尾巴部。
• 内容区塞了点文字和图片，寻思着将来好上色。搞完一看，电脑上打开还行，可换到手机上嘛图片直接撑破屏幕了，字也挤成一堆。

二、加CSS找感觉

骨架是成了，可丑死了。我赶紧弄个*文件链接进去，想用CSS打扮打扮。

• 给div标签加了宽宽度和背景色，想让它横着排。结果电脑上看倒是齐整，一换小屏幕，元素就叠罗汉了。
• 试了试那个flex布局玩意儿，元素能自动排排坐。问题来了，移动端上还是乱糟糟，有的地方空一大片，有的挤不下。

三、折腾响应式布局

越搞越头大，我又翻网上贴士，啥响应式设计不就是屏幕大小一变，样式就自动调吗。我决定先搞个媒体查询试试。

• 在CSS里加了句：当屏幕宽度小于400像素时，改改布局。把div的宽度设成百分百，元素就竖着堆起来了，方便手机上滑。
• 图片太闹心，我就把它最大宽度设成100%，高高度自动调，再试试flex-wrap让元素能换行，果然手机上看着不那么挤了。

四、解决移动端那些破事

搞到这个份上，电脑和手机差不离了，可实测时候又出幺蛾子。

• 开了真机测试，iPhone上倒是顺眼，但安卓机某些地方字太小了。我想出个点子：用vw单位代替代像素，字大小自动缩缩。
• 又加了点小技巧，比如点按区域弄大点，防止手指粗点不到。Flexbox再用用，确保元素间距不乱跑。
• 折腾一整天，终于每个页面区块在手机上都对对齐了，测试完我满意地存了文件。

整件事下来，学到的移动端布局贴士不少：

• 优先小屏幕设计，电脑上再扩展，省得返工。
• 多用百分比单位，少用固定值。
• 多试真设备，模拟器有时不准。

过程嘛跟打仗似的，搞了几遍才成，但搞定了还挺得劲儿。这份文件就当记录存起来了，将来再搞类似的也好参考。