◆◆ ◆
一、响应式开发知识要点
现在都流行说做响应式开发,然而什么是响应式开发呢?
专业术语-响应式响应式网页设计就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。
当客户提出需求的时候,用最简洁易懂的语言告诉你的客户,我们做的网页能够智能适配各种现代终端设备。
正常的来说明:移动端是可以是针对某个设备的固定尺寸去制作的页面设计,也可以是应用响应式布局去兼容各个移动终端。
洋气的说法:移动端是新时代的产物。是响应式的网页适应了移动端的时代。
那有了响应式是不是还需要移动端开发呢?当然需要!
这个要看客户需求去合理制定解决方案,理由如下:
在这里补充一个知识点:
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交互模板类型
独特的模板页面