响应式网站的设计技巧

2019-11-14

次

——关于呼应式

　　在移动互联网的大时代iOS 和 Android的发布，智能手机、平板电脑、智能家电等新设备层出不穷，极大便利了咱们的生活，但面临五花八门的终端设备，千差万别的屏幕分辨率，给网

页设计带来了新的挑战，咱们无法估计用户的终端设备和网络状况，更不可能为每种设备都专门规划一套网站，怎么完成网页在多终端设备中的适配呢？

　　呼应式，火火火火起来了！

　　2010 年 Ethan Marcotte 曾经在 A List Apart 发表过一篇文章"Responsive Web Design"，呼应式网页规划提供了一种规划办法，可以使同一网站在智能手机、桌面电脑，以及介于这

两者之间的恣意设备上完美显示。这种办法能够根据用户的屏幕尺度，合理地为现有及将来的各种设备的阅读体验。

　　Ethan Marcotte称呼应式规划是基于网格树立一个网站。Marcotte界说这项技术后，网格引进网页规划，出现了许多CSS网格结构，几乎成了网页规划的标准。目的是让网页布局更合理，

是给予一种标准，令排版者可以较为便利的组织标题、列表、段落、图片等元素，保持版面元素之间的一致性。对“流体式”的呼应式网站更是一个重要的规划标准。

　　以前有很长一段时间，我一向搞不明白究竟什么是栅格，首先咱们有必要要对栅格体系有一个根本的认知，关于栅格，栅格是由网格演化而来的另一种说法，都是一个意思——格子，所以

　　——标准。将栅格视为一种秩序体系来进行使用，是网页规划师某种特定的精神和情绪的表达，应为它表现规划师是以一种结构、逻辑的方法来进行构思和规划的。

　　在网页规划中，如果把网页宽度均匀切分为多个网格单元，每个单元之间预留必定的空隙，此刻整个页面就如同一个栅格体系。标准的栅格体系中所包括的几个部分，分别是总宽w、列宽

　　槽宽g=2*m

　　总宽w=g+N*c+(N-1)*g

　　总宽w=N*(c+g)

巨细的调配，画面图形松紧，使用栅格规划出对画面更有节奏呼吸的排版，奇妙使用栅格，呼应式网站更合理。