html响应式网页设计代码范文_UI设计|响应式网页设计与栅格化

一.响应式网站设计概念

响应式网站设计(Responsive Web design)的理念是：页面的设计与开发应当根据用户行为以

及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。

具体的实践方式由多方面组成，包括弾性网格和布局、图片、CSS media quety的使用等。无

论用户正在使用笔记本还是iPad,我们的页面都应该能够自动切换分辨率、图片尺寸及相关脚

本功能等，对页面元素进行重新排版，甚至隐折叠，字体尺寸变化，版式调整等以适应不同设

备的最佳浏览效果；

网页的内容布局适配硬件屏幕尺寸

二.响应式网站的宽度尺寸

随着硬件设备的多元化，我们需要设计适应各个屏幕尺寸的页面。响应式网站的宽度没有固定

的尺寸，按照不同的项目开发要求去定，一般是3〜5的宽度，用来适配台式机、笔记本、平板

电脑的横屏竖屏，手机的横屏竖屏。建议尺寸为：宽度包括 480、600、840、960、1280、

1440、1600、1920 像素。

设备的尺寸的多元化

对应的设备网页建议尺寸

微软的主英的岫应式排版

推荐一个响应式网页欣赏站，里面大概有几百个优秀的响应式网页案例：

Media Queries​mediaqueri.es

三.响应式线框图绘制

一般来说，虽然比较优秀的响应式会画手机竖向，手机横向,PAD竖向,PAD横向，PC电脑5种

宽度的线框。但是，基础一般是先画完手机和电脑2个版本，其他的在此基础上进行修改即

可。

1.响应式手绘线框

2.响应式机绘线框

四.网页的栅格化设计

1.为什么我们需要网格布局？

在我们的Web内容中，可以将其分割成很多个内容块，而这些内容块都占据自己的区域

（regions）,可以将这些区域想像成是一个虚拟的网格。

到目前为止，在一个棋板中使用不同的结构标签，使用多个浮动和手动计算实现一个布局。这

对于Web前端人员来说，这是一件痛苦之事。

而网格布局将让你摆脱这样的困局，让你的布局方法变得非常简单与清晰。

柵格化设计特别适用于，由大量系统自动生成的页面，如门户站的新闻和视频站等。

2.什么是 CSS Grid Layout?

CSS Grid Layout是CSS为布局新増的一个模块。网格布局特性主要是针对于Web应用程序的

开发者。可以用这个模块实现许多不同的布局。网络布局可以将应用程序分割成不同的空间，

或者定义他们的大小、位置以及层级。

就像表格一样，网格布局可以让Web设计师根据元素按列或行对齐排列，但他和表格不同，网

格布局没有内容结构，从而使各种布局不可能与表格一样。

例如，一个网格布局中的子元素都可以定位自己的位置，这样他们可以重疊和类似元素定位。

所谓网格设计，就是把页面，按照等比，分成等分格子，然后所有元素按照最小单位的倍数尺

寸来设计，以便于后期前端排版有规律，算定位好算，网页看起来规整，适合响应式多分辨率

适配，适合大型动态网站布局，CSS更好写！

五.现在流行的一页式布局

所为一页式布局，就是TABLE单元格布局，而最近流行的布局是一页式滚动布局。也有TAB标

签和一页式结合的页面布局。