响应式网页布局的实现方法原理
响应式网页布局的实现方法原理
交互设计师,要满足各自不通分辨率和设备的页面布局展现方式。而视觉设计师,则要考虑到页面性能和移动端带宽问题,权衡下页面的酷炫效果和视觉色彩的运用。而前端和后台开发工程师,则要完成满足视觉需求和交互功能,更要考虑到页面加载性能和消耗带宽问题,更重要的是移动端安全性能方面!
作者:马海洋来源:马海洋博客|2016-12-21 14:35
收藏
分享
推广| 令人窒息的奖品等你—2016最权威的全球开发者调研
交互设计师,要满足各自不通分辨率和设备的页面布局展现方式。而视觉设计师,则要考虑到页面性能和移动端带宽问题,权衡下页面的酷炫效果和视觉色彩的运用。而前端和后台开发工程师,则要完成满足视觉需求和交互功能,更要考虑到页面加载性能和消耗带宽问题,更重要的是移动端安全性能方面!既然响应式网页设计牵涉到了这么多的方方面面,那我们又该如何去实现这种页面呢?对此我也特意收集了一些响应式网页的实现方法原理
首先我们应该遵循移动优先原则,交互和设计应以移动端为主,PC则作为移动端的一个扩展;一个页面需要兼容不同终端,那么有两个关键点是我们需要去做到响应式的:响应式布局和响应式内容(图片、多媒体)。
一、响应式布局
如我们需要兼容不同屏幕分辨率、清晰度以及屏幕定向方式竖屏(portrait)、横屏(landscape),怎样才能做到让一种设计方案满足所有情况?对此,马海祥觉的我们的布局应该是一种弹性的栅格布局,不同尺寸下弹性适应,如以下页面中各模块在不同尺寸下的位置:
那么我们具体要怎么做呢?
1、Meta标签定义
使用viewport meta 标签在手机浏览器上控制布局
通过快捷方式打开时全屏显示
隐藏状态栏
iPhone会将看起来像电话号码的数字添加电话连接,应当关闭
2、使用Media Queries适配对应样式
常用于布局的CSS Media Queries有以下几种:
设备类型(media type):
all所有设备;
screen 电脑显示器;
print打印用纸或打印预览视图;
handheld便携设备;
tv电视机类型的设备;
speech语意和音频盒成器;
braille盲人用点字法触觉回馈设备;
embossed盲文打印机;
projection各种投影设备;
tty使用固定密度字母栅格的媒介,比如电传打字机和终端。
设备特性(media feature):
width浏览器宽度;
height浏览器高度;
device-width设备屏幕分辨率的宽度值;
device-height设备屏幕分辨率的高度值;
orientation浏览器窗口的方向纵向还是横向,当窗口的高度值大于等于宽度时该特性值为portrait,否则为landscape;
aspect-ratio比例值,浏览器的纵横比;
device-aspect-ratio比例值,屏幕的纵横比。
例子:
/* for 240 px width screen */
@media only screen and (max-device-width:240px){
selector{ ... }
}
/* for 320px width screen */
@media only screen and (min-device-width:241px) and (max-device-width:320px){
selector{ ... }
}
/* for 480 px width screen */
@media only screen (min-device-width:321px)and (max-device-width:480px){
selector{ ... }
}
适用于布局的Media Queries,这里在马海祥博客上我们就不再做详述,有兴趣的话,可通过官方文档进一步了解。
3、表格(table)的响应式处理
那么对于表格(table)的响应式处理该是怎样的呢?我们该如何突破Table的局限性呢?接下来我们来了解以下的几种针对表格响应式处理的方法:
(1)、隐藏不重要数据列
处理前:
(点击查看大图)
处理后:
实现方法代码:
@media only screen and (max-width: 800px) {
table td:nth-child(2),
table th:nth-child(2) {display: none;}
}
@media only screen and (max-width: 640px) {
table td:nth-child(4),
table th:nth-child(4),
table td:nth-child(7),
table th:nth-child(7),
table td:nth-child(8),
th:nth-child(8){display: none;}
}
以用户角度思考,每个人对数据的认知不同,或许你隐藏的数据对于他却是很重要的,所以对于这种方法马海祥并不推荐。
(2)、多列横向变2列纵向
处理前:
处理后:
实现方法:定位隐藏, (3)、固定首列,剩余列横向滚动 处理前: 处理后: 实现原理代码: thead {float:left;} tbody {display:block;width:auto;overflow-x:auto;} 二、响应式内容 1、响应式图片 带宽是手机终端的硬伤,如果我们只是页面布局做了响应式处理,在我们用手机访问时,请求的图片还是PC上的大图;文件体积大,消耗流量多,请求延时长,因此导致的问题也是不可估量的。那么我们就得把图片也处理成响应式的根据终端类型尺寸分辨率来适配出合理的图形。 处理原理:浏览器获取用户终端的屏幕尺寸、分辨率逻辑处理后输出适应的图片,如屏幕分辨率320*480,那么我们匹配给它的是宽度应小于320px的图片。如果终端屏幕的DPI(device pixels)DPI详解值很高,也就是高清屏,那么我们就得输出2倍分辨率的图形(宽:640px);以保证在高清屏下图形的清晰度。各种移动终端的屏幕参数可通过http://screensiz.es/phone查询。 解决方案:其实W3C已经有一个用于响应式图形的草案:新定义标签 1. 2. 3. 4. 5. 6. Accessible text 7. 8. 9. 10. 11. 注:source: 一个图片源; media: 媒体查询,用于适配屏幕尺寸; srcset: 图片链接,1x适应普通屏,2x适应高清屏; : 当浏览器不支持脚本时的一个替代方案; : 初始图片;另外还有一个无障碍文本,类似的alt属性。 虽然 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 其原理就是JS获取Source的源以及CSS Media Queries规则,输出适应图片,逻辑细节这里不再解析,感兴趣的可查看其JS代码,逻辑不是很复杂,也可以自己封装一个类库,以适用于自身产品,例如图片加载失败的替代方案。 当然,在未来的CSS Image Level 4中已经实现了响应式图片的原生语法:image-set < image-set-decl> = [ 那么我们的响应式图片可以这样重写了 background-image:url(default.jpg); /* 普通幕*/ background-image: -webkit-image-set(url(medium.jpg) 1x, url(large.jpg) 2x); /* Retina高清屏*/ 注:Webkit 目前只实现了url() 形式的取值,且dppx值取负值[-2x]貌似也是合法的。 当然除此之外,还有其他的响应式处理,如服务端user-agent嗅探。 2、高分辨率(DPI)下的响应式处理 (1)、SVG:优点可承载色彩丰富、设计复杂图形,且渲染不会出现边缘不顺滑;缺点是IE的支持不完美。 (2)、Icon fonts:支持多浏览器,图形颜色大小的修改成本低,易于维护;图形表现单一,不支持色彩丰富且复杂的图形,IE6渲染有毛边。 (3)、-webkit-image-set:只支持单个图形的适配,不利于图形合并,兼容不完美(Safari 6+, Chrome 21+)。 JS检测:var retina = window.devicePixelRatio > 1; 1. CSS Media Query: 2. 3. @media (-webkit-min-device-pixel-ratio: 2), /* Webkit-based browsers */ 4. (min--moz-device-pixel-ratio: 2), /* Older Firefox browsers (prior to Firefox 16) */ 5. (min-resolution: 2dppx), /* The standard way */ 6. (min-resolution: 192dpi) /* dppx fallback */ 3、高分辨率下的1px border 由于高清屏的特性,1px是由2×2个像素点来渲染,那么我们样式上的border:1px在Retina屏下会渲染成2px的边框,与设计稿有出入,为了追求1px精准还原,我们就不得不拿出一个完美的解决方案。 在Photoshop中,如果需要看似0.5px的边框,常见的方法就是对1px边框加上阴影模糊1px。同理,我们在retina 屏下需要做到真实的1px边框,可利用box-shadow属性模拟。 1. @media only screen and (-webkit-min-device-pixel-ratio:1.5), 2. only screen and (min-device-pixel-ratio:1.5) { 3. button { 4. border:none; 5. padding:0 16px; 6. box-shadow: inset 00 1px #000, 7. inset 0 1px 0 #75c2f8, 8. 0 1px 1px -1px rgba(0, 0, 0, .5); 9. } 10. } 留给我们的思考 ⊕响应式不只是技术的实现,它更像是一种对于设计的全新思维模式 ⊕浏览的体验短期内还无法超越原生应用 ⊕左手操作习惯的交互 ⊕Webapp的消息推送 ⊕调用本地文件系统的能力弱 ⊕响应式图片的解决方案 ⊕对PC事件的兼容 ⊕WebAPP页面体积的响应式适配 ⊕代码实现和内容可维护性之间的权衡 ⊕控制设计开发成本 网页常见布局 网页布局大致可分为“国”字型、拐角型、标题正文型、左右框架型、上下框架型、综合框架型、封面型、Flash型、变化型,下面分别论述。 1、“国”字型: 也可以称为“同”字型,是一些大型网站所喜欢的类型,即最上面是网站的标题以及横幅广告条,接下来就是网站的主要内容,左右分列一些两小条内容,中间是主要部分,与左右一起罗列到底,最下面是网站的一些基本信息、联系方式、版权声明等。这种结构是我们在网上见到最多的一种结构类型。 2、拐角型: 这种结构与上一种其实只是形式上的区别,其实是很相近的,上面是标题及广告横幅,接下来的左侧是一窄列链接等,右列是很宽的正文,下 面也是一些网站的辅助信息。在这种类型中,一种很常见的类型是最上面是标题及广告,左侧是导航链接。 3、标题正文型: 这种类型即最上面是标题或类似的一些东西,下面是正文,比如一些文章页面或注册页面等就是这种类。 4、左右框架型: 这是一种左右为分别两页的框架结构,一般左面是导航链接,有时最上面会有一个小的标题或标致,右面是正文。我们见到的大部分的大型论坛都是这种结构的,有一些企业网站也喜欢采用。这种类型结构非常清晰,一目了然。 5、上下框架型: 与上面类似,区别仅仅在于是一种上下分为两页的框架。 6、综合框架型: 上页两种结构的结合,相对复杂的一种框架结构,较为常见的是类似于“拐角型”结构的,只是采用了框架结构。 7、封面型: 这种类型基本上是出现在一些网站的首页,大部分为一些精美的平面设计结合一些小的动画,放上几个简单的链接或者仅是一个“进入”的链接甚至直接在首页的图片上做链接而没有任何提示。这种类型大部分出现在企业网站和个人主页,如果说处理的好,会给人带来赏心悦目的感觉。 8、Flash型: 其实这与封面型结构是类似的,只是这种类型采用了目前非常游戏行的Flash,与封面型不同的是,由于Flash强大的功能,页面所表达的信息更丰富,其视觉效果及听觉效果如果处理得当,绝不差于传统的多媒体。 By Emily P. Lewis翻译: 亓光宇 在过去的一年里,如果你不是住在深山里,就一定知道响应式网页设计,它已经成为当今的主流。响应式设计是Ethan Marcotte提出的,概念很简单:使网站的页面布局能够根据不同设备和分辨率进行自动调整。 当我第一次了解到它时,我就立即被迷住了--特别是media queries,我马上就用到我自己的个人兼职网站上。我甚至写了一篇文章介绍《如何使用CSS3 Media Queries响应不同设备》(强烈建议在读这篇文章之前读一下)。 在第一次尝试使用media queries后,我很快意识到我忽略了一个响应式设计的重点:灵活性。 挑战固定宽度 我的个人兼职网站使用了固定宽度的设计,所有的width, margin和padding都使用了固定的像素值。我一般都会这样写网站,因为对我来说它更 简单,更快速。 但当我试图在我的固定宽度的网站上应用media queries的时候,那些简单和快速的优势全部都消失了。为什么?因为对于固定宽度的设计,我需要非常细致的定义media queries并在CSS文件中调整每个单独的像素值,基本上,我需要为每一种可能的分辨率都设计一个全新的布局,繁琐!慢!!还不好玩!!! 我有幸听了Marcotte先生在《In Control 2011》的演讲,他讨论了响应式设计的理论和最佳实践,诸如fluid grid(流体网格)实现方式。 流动且灵活的公式 流动式布局是灵活的。由于width,margin和padding(甚至字体和图像)使用了百分比和em(相对长度单位),因此页面布局会随着浏览器的窗口变化而变化。随着分辨率的改变,布局会成比例地进行调整,实现过程中不需要用到任何media query。 这对于实现响应式网页设计来说简直太美妙了。如果我有一个基于比例值的布局,流动式的网格将替我完成大部分繁重的工作。我的media query将不再需要包含那些覆盖其他分辨率的所有width, margin和padding的样式定义。 但是也有一点让我感到头疼,计算流动式网格的比例宽度需要用到一些数学知识,我数学不太好… 幸运的是, Ethan 提供了一个很简单(即便对我来说)的公式来计算比例宽度: 网页布局设计: 用户的视觉路径一般是:从上到下,从左到右。 好的视觉设计路径应该是顺应这样的用户习惯,糟糕的设计会让用户无所适从,焦点到处都是。 对用户引导的关键就在于怎么处理主次关系。就是对比,从视觉的角度上看:形状的大小,颜色,摆放的位置都会影响信息的重要与否。 从大的区块来看,不要平均分割页面,三栏的设计应该让其中一栏明显短一些。 从局部来看,也要把握信息呈现的节奏,比如yahoo中间新闻栏的设计,大图带大标题是第一要点,小图带字是第二要点,纯文本第三,节奏感、主次关系非常强。 下面是几种常见的网页布局结构: <1>骨骼型结构。即类似于人体的骨骼结构。分为上中下,内容部分分为两、三栏的设计。 这就是一个web 2.0风格的页面,骨骼型结构,上面主要是logo,导航banner,内容部分三成两栏,页脚版权,典型的骨骼型结构。 <2>对称型结构,对称型结构就是网站有一个对称轴,称左右或者上下对称。这种网页在阅读上很明明确给出用户重要和次要区域的划分,根据于都习惯往往在比较大的位置上安排主要内容。 这个网页就是一个对称结构,左边是网站的一些导航和产品信息以及版权信息以及练习方式等等。右边是网站的主要信息。最大的特点是板我们骨骼型的top和foot放到了左边,body放到了右边,形成一个对称结构。 <3>满版型的结构。其实这种网页结构随着现在显示器尺寸的增大和分辨率的提高逐渐再做一个过度,即以前的整个图片满版到后面的背景满版,到现在的局部满版。这种版式给人的感受是内容紧凑,气氛表达充分,适合温馨和暖性思维的表达。 这个早期的满版多见于韩版网页。 <4>焦点型,这类网页多见于围绕一个中心点,真个页面围绕中心,多见于销售类网站或者品牌产品网站。其特点是中心明确,表达信息集中,传达信息清楚。 占据网页面积最大的图片吸引了大部分焦点,展现了个性。 顺德区胡宝星职业技术学校公开课教案 教师: 杨海隆2010 年10 月12 日计算机092 班 1 节 课题色彩搭配在网页中的应用 课型理论课课时1学时 教学目的1.知识与技能:色彩带给人们的情绪变化,培养学生对 色彩感知能力 2.过程与方法:使同学掌握网页色彩搭配的一般原则教学重点掌握网页色彩搭配的一般原则 教学难点如何合理用色彩搭配网页 教具计算机,dreamweaver软件 教学方法讲授、提问、讨论、总结 教学过程一、引入新课 1.提问:我们每天早上起床第一眼看到的是什么东西? 2、利用一个关于色彩的实验,让同学们感受到色彩的神 奇,激起同学们的学习兴趣,活跃课堂气氛。二、讲授新课 1.如何确立网站色调 1)一般原则 向同学们展示实例 讨论总结:在制作政治题材时,可以使用红色为主色调,在制 作环保题材时,可以使用绿色为主色调。 2)色彩情感 色彩与人的心理感觉和情绪也有一定的关系,利用这一点可以 在设计网页时形成自己的独特效果,给浏览者留下深刻的印象。 一般情况下色彩给人的感觉如下: A:红色代表热情、活泼、热闹、温暖、幸福、吉祥 B:黄色代表明朗、愉快、高贵、希望 C:绿色代表新鲜、平静、和平、柔和、安逸、青春 D:蓝色代表深远、永恒、沉静、理智、诚实、寒冷 E:紫色代表优雅、高贵、魅力、自傲 F:白色代表纯洁、纯真、朴素、神圣、明快 J:灰色代表忧郁、消极、谦虚、平凡、沉默、中庸、寂寞 H:黑色代表崇高、坚实、严肃、刚健、粗莽 2.网页配色的技巧 通过实例演示,同学讨论 讨论总结:a:如果在网页中使用一种主色调,其他颜色应是由 主色调派生出来的 b:如果要使用两种色彩,这两种颜色最好是互为对 比色 C:如果用多种色彩,两种颜色最好是同一个色系3.注意的事项: A:不要将所有颜色都用到,尽量将颜色控制在一定范围之内 B:背景和前文的对比尽量要大些,不要使用繁复的图像作背景,以便突出主要的文字内容 4. 同学们启动软件然后根据自己的颜色喜好,搭配网页色彩。使用自 己的网页三、巩固新课 A:色彩情感的培养 B:掌握了简单的网页配色技巧 四、布置作业 同学们写出自己网站的配色方案 五、教学后记 评讲意见: 教务主任意见: 参加听课人 学校盖章年月日 响应式网页设计的七个技巧 响应式网页设计已经是如今当之无愧的标准配置了,我们需要响应式的技术来应对日渐碎片化的屏幕尺寸,网页设计师也力图做好这件事情。而网页中的图片和图库的响应式设计,也是其中的重点难点。它们是网页中最常见,也是最直观可见的元素。打开一个漂亮精致的网站,然而其中的图片和图库看起来怎么都和页面不匹配,这样的情况恐怕是最让人抓狂的了。 响应式网站 如果要设计好响应式的图片和图库,今天天极响应式网站专家聊聊成都响应式网页设计的七个技巧,兴许能给你提供一个明确而系统的思路。它们并不涉及到具体代码实现,更多牵涉到设计过程和处理手法,做好了这些工作,具体实现起来就不难了。 1、考虑高宽比桌面端的图片浏览体验和移动端是完全不同的,这一点毋庸置疑。对于绝大多数的网站而言,图片展示的位置都很相近,大同小异。而设计师的任务,是要确保网站随着屏幕和设备变化的时候,图片的展示不会在页面布局的伸缩变化过程中变得奇怪和失真。这个时候,就要始终牢记图片的高宽比,并且始终控制高宽比不会改变。回到桌面端网页中,大幅的背景图或者置于页面顶端的图片看起来非常漂亮,可是当它切换到移动端设备中的时候,首先屏幕比例和方 向就不同了,那么它是否还那么好看呢?图片被缩小之后,信息的呈现是否会丢失?它是否会被拉伸?这个时候,图片的高宽比的控制就显得特别重要了。控制原始图片不被拉伸,同时让图片所展示出来的部分的高宽比能够尽可能合理地匹配对应的屏幕,这样也就不必担心响应式断点过多,导致你需要上传过多的图片。 2、尺寸和比例的一致性响应式设计就不能不说断点。为了照顾不同的屏幕,我们需要将图片裁剪成不同比例不同尺寸的大小,而这也直接影响着整个设计与开发的设计流程。许多人仅仅只是将图片上传到CMS系统中,就希望它能以完美的样式呈现出来。这不现实。每张图片都应当被裁剪为合理的尺寸,并且放置在理想的位置上,确保它们会以用户期望的样子呈现出来。后端可能会在这件事情上花费相当的时间和精力,但是这些努力是值得的。 3、使用轮播图或者图库轮播图控件和图库控件是网站中最常见的图片载体,并且也可以更加自如的管理图片。尤其是当你使用了那些比较著名或者适配范围比较广的第三方控件的时候,控制图片元素的粗活重活基本上都会被这些控件接手过去。不过,我们之前提到的图片长宽比和尺寸大小的控制同样也是要注意的,否则一样会让网页的展示效果变尴尬。除此之外,你还需要什么场合使用什么样的控件。如果你拥有若干高品质的图片或者需要推荐特定的文章和专题,那么你需要使用幻灯片轮播图控件。如果你拥有大量有待展示的图片,可以缩小展示也不存在可读性问题的话,不妨使用图库类的控件来展示。许多作品集类的网站常常会使用图库控件。 4、尽量避免使用图片说明(Captions)虽然图片说明能够让你的图片的信息更加丰富,但是它会非常直接地影响到网页的运作。尽量避免使用它们,如果实在是需要,尽量用其他的方式来呈现。图片的Caption属性加入之后,确实能在桌面端拥有良好的渲染效果,但是小屏幕上常常问题不断。为了不让这些细小的可用性的问题影响用户体验,尽量避免使用就好了。因为这种小问题而让用户无法忍受并且离去,并不划算。 5、图片和视频混用要小心如果网站中同时存在图片和视频类的多媒体,用户和设计者应该都是能够接受的,甚至许多用户已经习惯了这样的设计。但是要注意的是,即便是在同一个页面中,也尽量不要让图片和视频同时存在于同一个控件或者区块中。也许这样看起来很炫酷,也许一部分图片和视频能够搭配起来,但是更多的视频和图片很难在尺寸上保持一致,导致总会有一部分图片或者视频会留下空白和间隙。最好的方案还是将两者分开展示,避免了媒体属性和尺寸上的差异与冲突。这几乎适用于任何设计元素,而图片和视频尤甚。 6、削减不必要的元素虽然轮播图和图库控件非常好用,但是许多设计师常常会往其中添加许多垃圾的内容,最常见的就是塞入一堆导航箭头、按钮、文本甚至行为召唤按钮。这样的例子不胜枚举。一般情况下,用户其实是熟知如何同轮播图这类控件进行交互的。除非你的设计和我们的认知有着巨大的差异,以至于必 实验项目名称: CSS页面布局及样式设计 (所属课程:web系统与技术) 学院:计算机学院专业班级:11级计科信息姓名:学号: 实验日期:实验地点:A06-404 合作者:指导教师:李 本实验项目成绩:教师签字:日期: 一、实验目的 (1)掌握CSS中的定位属性使用方法。 (2)掌握DIV+CSS的页面布局方式。 (3)掌握CSS中的常用属性的使用方法。 (4)理解CSS的样式构造。 二、实验条件 安装Web开发环境的微机。 三、实验内容 (1)重新对聊天室的注册页面、登陆页面和聊天页面进行页面布局。 (1)对聊天室的注册页面、登陆页面和聊天页面进行样式设计。 四、实验步骤 (1)注册页面使用CSS将注册表单居中显示,表单内嵌入表格将文本与输入域格式化显示,表单内使用label标签。 (2)登录页面中添加div层用于显示在线用户数。 (3)登录页面使用div将登录表单,在线用户数,logo图片,超链接等页面元素重新定位布局。 (4)聊天页面改用div标签并使用CSS的position定位属性进行布局,框架内的独立页面使用float属性进行布局。 (5)使用CSS设置三个页面的背景颜色或背景图片。 (6)注册页面使用CSS设计所有输入框和提交按钮的样式。 (7)登录页面使用CSS设置的超链接的字体和下划线、登录表单使用圆顶角、在线用户数使用图片数字,使用CSS设计登录按钮的显示样式。 (8)聊天页面中使用CSS设计信息发送表单和发送按钮的样式,设计用户信息列表和聊天信息段落的的显示样式。 五、实验结果 注册界面效果图及代码: 变块元素,并绑定对应 列名,然后用伪元素的content:attr(data-th)实现 : 网页布局类型
响应式网页设计的基础
网页布局设计
网页色彩的搭配教案
响应式网页设计的七个技巧
CSS页面布局及样式设计实验报告