◆◆ ◆
一、响应式开发知识要点
本段内容由艾艺前端技术部Jay给大家分享：
现在都流行说做响应式开发，然而什么是响应式开发呢？
专业术语－响应式简单来说，就是页面应该有能力去自动响应用户的设备环境。
响应式网页设计就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。
当客户提出需求的时候，用最简洁易懂的语言告诉你的客户，我们做的网页能够智能适配各种现代终端设备。
正常的来说明：移动端是可以是针对某个设备的固定尺寸去制作的页面设计，也可以是应用响应式布局去兼容各个移动终端。
洋气的说法：移动端是新时代的产物。是响应式的网页适应了移动端的时代。
那有了响应式是不是还需要移动端开发呢？当然需要！
这个要看客户需求去合理制定解决方案，理由如下：
-
优化工作效率
-
尽可能深挖客户需求
-
利用设计工具的插件
-
自动化开发
在这里补充一个知识点：
H5是什么？HTML5，就是HTML语言第五代。
HTML5的设计目的是为了在移动设备上支持多媒体，可以真正改变用户与文档的交互方式。（也不仅仅只等价于那种一张张滑动的宣传页。）
那么做H5、做移动端设计、做响应式设计需要注意什么呢？
1.升级设计工具
2.升级开发工具
3.浏览器
主要说一下浏览器的问题：One more browser
国产浏览器注意事项
常见的国产浏览器有 360，QQ，UC，百度，搜狗，猎豹，2345，遨游，115...等无数浏览器，它们的内核全都是 webkit（就是chrome的那个）。外加最多就是调用系统的IE内核。
另外要根据浏览器确定设计的框架尺寸
然后，还有很多然后……请听下设计师们的分享……
二、栅格知识要点
页面宽度明明可以使用1200px的整数，但为什么会出现1180、1160、1140、1120这些不凑整的宽度呢？
关于这个部分的知识点由艾艺创意设计部L.K.emon为大家解答：
首先来理解一下栅格的概念：
栅格 栅格结构是最简单最直接的空间数据结构，以规则的网格阵列来指导和规范网页中的版面布局以及信息分布。
那么如何设计一个栅格系统？
在网页设计中，我们把宽度为“W”的页面分割成n个网格单元“a”，每个单元与单元之间的间隙设为“i”,此时我们把“a+i”定义“A”。他们之间的关系如下：
W =（a×n）+（n-1）i
由于a+i=A，
可得：(A×n) – i = W
实例如图：
=1200px（开发实际宽度）
280+20+280+20+280+20+280
=1180px（PSD设计稿）
回答最初的疑问，因为在开发的过程中存在margin与padding的两个概念
Margin：外边距
Padding：内边距
margin：10px； （i=20px）
再看图来理解一下：
所以我们不能依赖『水平居中分布』自动排列工具
栅格化并不是一个新的概念，大家关注的点往往是他表面的950、960和1190。
左边的三个数据的核心是一个24等分的栅格系统。可以被轻松的2 等分、3等分、4等分、6等分、8等分、12等分。
270+20+270+20+270+20+270
= 1140px （i=20）
275+20+275+20+275+20+275
= 1160px（i=20）
天猫：margin-right:8px；
294+8+294+8+294+8+294+8
= 1208-8
= 1200px（i=8）
市面上各种网站的网页宽度
1180宽度的网站有：UI中国、UELike等
1180宽度支持1栏2栏3栏4栏5栏6栏8栏10栏等分时保持20px间距能够被整除
设计稿参考线设置：左起370px、1550px
即960、970、1140、1180、1280、1920宽度的8列、12列、16列、24列栅格系统
装订线通常为i=20px
Photoshop 视图>新建参考线版面
推荐尺寸（外国一些网站一般采用12栅格系统）：
如果width = 1180，i=20，则 每列n=80
如图：
@media max-width：320px
@media max-width：480px
@media max-width：768px
@media max-width：1024px
@media max-width：1440px、1366px
.col-xs-12 {width: 100%}
.col-xs-11 {width: 91.66666667%}
.col-xs-10 {width: 83.33333333%}
.col-xs-9 {width: 75%}
.col-xs-8 {width: 66.66666667%}
.col-xs-7 {width: 58.33333333%}
.col-xs-6 {width: 50%}
.col-xs-5 {width: 41.66666667%}
.col-xs-4 {width: 33.33333333%}
.col-xs-3 {width: 25%}
.col-xs-2 {width: 16.66666667%}
.col-xs-1 {width: 8.33333333%}
响应式设计稿
以iPhone 5s为例，屏幕的分辨率是640x1136，倍率是2。
浏览器会认为屏幕的分辨率是320x568，仍然是基准倍率的尺寸。
所以在制作页面时，只需要按照基准倍率来就行了。
无论什么样的屏幕，倍率是多少，都按逻辑像素尺寸来设计和开发页面。
只不过在准备资源图的时候，需要准备2倍大小的图，通过代码把它缩 成1倍大小显示，才能保证清晰。
iPhone 6的屏幕。倍率为2，逻辑像素375x667（144dpi）
三、Bootstrap设计布局规范
关于响应式、栅格，接下来就是设计布局规范了，这个部分的内容由艾艺网页设计部小5为大家分享：
1. Bootstrap响应式开发（http://www.bootcss.com/）我们公司最常用的框架，Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin（用来和栅格变量一同使用，为每个列column生成语义化的 CSS 代码）用于生成更具语义的布局。
2.主页面基本层次范例，大屏（适配pc端和pad）和小屏（适配手机）
3. 栅格系统规则（基本知识在上文）
栅格系统是基于行（row）和列（column）的组合来创建页面布局的，bootstrap框架的规则是每行（row）最多12列（column），大于12列的自动换到下一行显示，排列原则是按从左到右，再从上到下的排列。每个内容模块的内容必须放置于“列（column）”内，并且只有列（column）可以作为行（row）的子元素。
（2）布局和模块组合的例子
4.整体网站页面设计及组成架构
对页面进行响应式的设计实现，需要对相同内容进行不同宽度的布局设计，页面模板中每个模块的定义规则参考。
1门户类型：首页
2门户类型：目录页
3列表模板类型
4文章模板类型
5交互模板类型
独特的模板页面
以上内容分享给同样学习响应式设计或开发的你，希望给你带来一些帮助！
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。