今天琢磨着做个触摸屏网站模板，这东西看着高大上，上手比想象中简单。我一开始连从哪儿开始都没头绪，干脆打开电脑新建了个文件夹，先把架子搭起来再说。

第一步：先画个草稿

我抓了张白纸用笔瞎划拉，想着触摸屏得用手指头点来点去，按钮就得画得贼大。比如导航菜单干脆做成横条，每个选项塞进彩色方块里，字也得加粗放大。画完赶紧用手机拍下来，塞进刚建的文件夹当参考。

第二步：打开编辑器硬着头皮写代码

打开记事本就开始敲，先写个最基础的html结构。头大的地方来了——怎么让页面自适应屏幕？查了半天发现要加这行：

• 在head里塞个viewport标签，告诉手机别乱缩放
• 用百分比代替固定像素来定宽度
• 所有点击区域用padding撑开，至少留20像素让手指头能戳中

写着写着发现按钮太小，干脆全改成用em单位，这样字体变大按钮也跟着胀。补上:hover效果，手指按下去能变个色儿。

第三步：拿真机反复戳屏幕测试

代码扔进服务器后，我举着三台手机来回划拉。发现华为的浏览器总把页面放大，只好又回去加了个maximum-scale=1.0。最搞笑的是旧iPhone上有个按钮死活点不动，原来是被旁边图片挤占了，赶紧用z-index把层级关系捋清楚。

弄完这摊子一看表，居然折腾了五个钟头。核心就三件事：画大框、写弹性布局、真机测试。现在这模板虽然丑点儿，但用手指头操作确实顺溜多了。下次准备试试加滑动切换的效果，今天先到这儿。