响应式设计

为何要响应式设计

• 方便手机阅读
• 提高搜索排名

目标分解

1. 了解目前的布局是怎样的。PC上和移动设备上的效果分别是怎样的。
2. 理想的布局是怎样的。PC上和移动端的目标效果是怎样的。布局以内容、功能优先，例如，若广告与正文在一起，影响了用户评论的积极性。新布局应将广告移至PC侧边栏，移动设备的底部。
3. 当前布局的分解，划分为几大块。核心内容区，辅助功能区。
4. html 代码拆分。先保证在移动端显示正常。
5. 对 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收窄窗口效果如何？移动设备效果如何？

参考

• Amaze UI | 中国首个开源 HTML5 跨屏前端框架 | Amaze UI

微信关注我哦 👍

我是来自山东烟台的一名开发者，有感兴趣的话题，或者软件开发需求，欢迎加微信 zhongwei 聊聊， 查看更多联系方式