前端移动端适配 - 媒体查询适配方案

背景

工作中难免会有写静态页面的需求，有时候移动端适配真的是做的心累，如果自己新做一个页面倒还好，整体布局会按照自己习惯来，但有时候不得不修改别人的代码，尤其是别人没适配好的代码，找样式以及命名规范等问题够折磨一整天了。

在这里总结一下移动端适配的注意点，为个人笔记，仅做参考。

以下一些像素 px，margin，padding 以及各种适配方案仅个人习惯以及设计师的需求，可能会与大家不一样，按照自己的规范来就行，仅做参考，下文不再赘述。

安全间距

设计部门有这种说法，就是「安全间距」，就是设置一个 margin，防止内容超出，这个根据机型宽度会有不同的值，一般 PC 是 32px，移动端是 16px，看起来整体会比较舒服。

当然这也得看设计部门的规范要求来。

padding 内边距

刚刚讲了 margin，现在来讲讲 padding。

一般 PC 端内容区会有一个 max-width: 1136px，至于为什么我也不知道（真的），但是看起来给人的感觉还不错。

在内容区一般会与导航 header 部分相对内缩一点，因此加一个 padding: 24px，margin 不行吗？

而对于内容区域居中的话，直接用 margin: 0 auto 即可，很方便，所以一般对于内容区的内缩，我直接用 padding。

布局方式

一般大多数页面现在都比较规范了，要么就左右布局，要么就左中右布局（只是我这么取名而已，方便）

就拿我的个人博客为例吧，可以说是左右布局了，但这个适配比较简单，采用 flex 之后左边宽度定的 75%，右边定的 25%，如果在工作中这样做设计一定会挑毛病（害…）