为何要响应式设计
- 方便手机阅读
- 提高搜索排名
目标分解
- 了解目前的布局是怎样的。PC上和移动设备上的效果分别是怎样的。
- 理想的布局是怎样的。PC上和移动端的目标效果是怎样的。布局以内容、功能优先，例如，若广告与正文在一起，影响了用户评论的积极性。新布局应将广告移至PC侧边栏，移动设备的底部。
- 当前布局的分解，划分为几大块。核心内容区，辅助功能区。
- html 代码拆分。先保证在移动端显示正常。
- 对 PC 端的显示做调整。
mobile first 原则
mobile first 并不是一个设计原则，而是一个 css 代码编写原则。
参考 How To Write Mobile-first CSS
（这是我见过最靠谱的一篇介绍 mobile first 的技术文章。我得关注一下这个博客。）
即，写编写移动设备的 css 代码，然后通过 media query min-width 的方式，设置 pc 端的样式。
优先编写移动端的样式有何好处？
- 移动端布局相对于pc大屏的布局要简单的多
- pc屏幕越来越多，越大布局越复杂，可以在移动端的基础上补充。换言之，移动先行。
- 使用 sass，这种情况下节省不少代码。
技术细节 - 内容宽度
如何使核心内容在限制了最大宽度的情况下，在小于该宽度的情况下宽度 100%。
CSS width 100% OR max-width in pixels
width：100%；
max-width：700px；
pc收窄窗口效果如何？移动设备效果如何？
参考
关于作者 🌱
我是来自山东烟台的一名开发者，有感兴趣的话题，或者软件开发需求，欢迎加微信 zhongwei 聊聊，或者关注我的个人公众号“大象工具”， 查看更多联系方式