上期为大家科普了 网站公共控件及交互事件 本期来为大家科普一下 响应式网页设计与栅格化 想做好设计师 以下内容不可或缺
一.响应式网站设计概念
响应式网站设计(Responsive Web design)的理念是：页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。
具体的实践方式由多方面组成，包括弾性网格和布局、图片、CSS media quety的使用等。
无论用户正在使用笔记本还是iPad,我们的页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等，对页面元素进行重新排版，甚至隐折叠，字体尺寸变化，版式调整等以适应不同设备的最佳浏览效果；
网页的内容布局适配硬件屏幕尺寸
二.响应式网站的宽度尺寸
设备的尺寸的多元化
微软的主英的岫应式排版
三.响应式线框图绘制
一般来说，虽然比较优秀的响应式会画手机竖向，手机横向,PAD竖向,PAD横向，PC电脑5种宽度的线框。但是，基础一般是先画完手机和电脑2个版本，其他的在此基础上进行修改即可。
1.响应式手绘线框
四.网页的栅格化设计
1.为什么我们需要网格布局？
在我们的Web内容中，可以将其分割成很多个内容块，而这些内容块都占据自己的区域（regions）,可以将这些区域想像成是一个虚拟的网格。到目前为止，在一个棋板中使用不同的结构标签，使用多个浮动和手动计算实现一个布局。
这对于Web前端人员来说，这是一件痛苦之事。而网格布局将让你摆脱这样的困局，让你的布局方法变得非常简单与清晰。柵格化设计特别适用于，由大量系统自动生成的页面，如门户站的新闻和视频站等。
2.什么是 CSS Grid Layout?
CSS Grid Layout是CSS为布局新増的一个模块。网格布局特性主要是针对于Web应用程序的开发者。可以用这个模块实现许多不同的布局。网络布局可以将应用程序分割成不同的空间，或者定义他们的大小、位置以及层级。
就像表格一样，网格布局可以让Web设计师根据元素按列或行对齐排列，但他和表格不同，网格布局没有内容结构，从而使各种布局不可能与表格一样。例如，一个网格布局中的子元素都可以定位自己的位置，这样他们可以重疊和类似元素定位。
所谓网格设计，就是把页面，按照等比，分成等分格子，然后所有元素按照最小单位的倍数尺寸来设计，以便于后期前端排版有规律，算定位好算，网页看起来规整，适合响应式多分辨率适配，适合大型动态网站布局，CSS更好写！
五.现在流行的一页式布局
所为一页式布局，就是TABLE单元格布局，而最近流行的布局是一页式滚动布局。也有TAB标签和一页式结合的页面布局。
优网科技秉承"专业团队、品质服务" 的经营理念，诚信务实的服务了近万家客户，成为众多世界500强、集团和上市公司的长期合作伙伴！
优网科技成立于2001年，擅长网站建设、网站与各类业务系统深度整合，致力于提供完善的企业互联网解决方案。优网科技提供PC端网站建设（品牌展示型、官方门户型、营销商务型、电子商务型、信息门户型、微信小程序定制开发、移动端应用（手机站、APP开发）、微信定制开发（微信官网、微信商城、企业微信）等一系列互联网应用服务。
公安局备案号：
专属顾问
