快捷搜索:  as  test  1111  test aNd 8=8  test++aNd+8=8  as++aNd+8=8  as aNd 8=8

365体育平台bet_酒文化网进入



前一篇相应式设计(Response Web Design)浅谈提到了相应式设计的由来和利用处景。本文聊一聊若何实现。

若何让自己的网站也相应式Web设计,可以相应设备的分辨率呢? 根据Ethan Marcotte的文章,和相关的实践,已经总结出了一些实践措施。(本文着末列出了所引用的文章和对象)相应式Web设计是想把固定的(Fixed)设定(位置定位,长宽大年夜小)变为相对的(Relative)设定,其包括三个主要手段: Fluid Grid (流体表格), (Liquid Image) 液态图片, (Css3 media queries) 媒体选择器。

Fluid Grid (流体表格)

在流体表格之前主要应用960px宽度来设定页面的宽度,由于当时主流的桌面分辨率是1024X768, 960px宽度可以充分的应用1024px的宽度同时又不会应用户感到页面过满。跟着屏幕分辨率的赓续变大年夜,演化出了960Grid (http://www.designinfluences.com/fluid960gs/)960Grid可以盘踞页面适度的宽度,同时跟着页面宽度的变更进行从新排布,流体表格的定义: http://www.alistapart.com/articles/fluidgrids/

流体表格将页面栅格化,应用em相对单位取代px绝对单位,em 是target ÷ context = result,最好应用em设定位置偏移和字体大年夜小,这样可以使页面结构和字体大年夜小随页面宽度的变更而变更,从而适应页面宽度的变更。同时应用div的float排布,假如要三列排布,将div设置为float:left;width:33%这样当宽度变更时,这三个div也不停会在自己所在的block里排成三列。流体表格包管了页面相应宽度变更,同时不呈现横向滚动条。在960Grid的Demo页面里,第一行应用了width:23% 四行排布:

不合分辨率下的960Grid:

600X800 的960Grid

1280X768 的 960Grid

除了960Grid,还有1140Grid, Golden Grid System,等其它流体表格框架。

1. Fluid 960 Grid Systemhttp://www.designinfluences.com/fluid960gs/

2. 1140 CSS Grid Systemhttp://cssgrid.net/

3. Golden Grid Systemhttp://goldengridsystem.com/

4. Frameless http://framelessgrid.com/

液态图片 (Liquid Image)

流体表格供给了相应式的页面结构,但若何相应图片,分辨率变更时,图片若何友好显示? 液态图片(Liquid Image)使得图片相应分辨率变更,让图片不掉真的缩放和背景裁剪,供给友好的显示。Zoe Mickley Gillenwater的《Flexible Web Design: Creating Liquid and Elastic Layouts with CSS》基础上先容了所有的液态图片技术,同时在他的Blog上http://zomigi.com/blog/ 供给了很多关于创建流体表格和液态图片的教程、资本、创意指示及最佳实践365体育平台bet。在 Zoe的http://zomigi.com/blog/hiding-and-revealing-porti365体育平台betons-of-images/ 中指出了是把图片当成内容应用 img 标签引入,照样图片只是装饰的判断原则。

Does the image convey information that I ought to put as text in an alt attribute?

Do I want to make sure the image always prints because wi365体育平台betthout it the

printout wouldn’t make sense or be complete?

Do I want to link the image?

If the answer to any of these questions is yes, the image is content and should be kept in the (X)HTML.

从当前实践的环境来看,假如把图片当成内容来处置惩罚,是不易进行缩放和裁剪的,也就不好相应分辨率变更,然则假如把图片当成装饰(DOM的背景)来处置惩罚,就可以方便相应分辨率变更,进行缩放或者裁剪。

如: Demo: http://www.zomigi.com/demo/crop_background.html

Demo: http://www.zomigi.com/demo/composite.html 跟着宽度缩小,outer img 裁剪, inner img 向左移动,维持right 50px。

缩放前:

缩放后:

Ethan Marcotte在http://unstoppablerobotninja.com/entry/fluid-images/ 中也阐清楚明了:img { max-width: 100%;} 的应用技术。

由于图片已经颠末相应式的Css设定,以是应该在iPhone及iPodTouch中,禁止图片被自动缩放,Apple专有的meta标记可以办理这个问题。在页面的部分添加以下代码(Think Vitamin的文章:http://thinkvitamin.com/design/responsive-design-image-gotcha/):

将initial-scale的值设定为"1",即可覆盖默认的缩放要领,维持原始的尺寸及比例。

未设置initial-scale:

设置initial-scale 为1:

(Css3 media queries) 媒体选择器

流体表格供给了相应式的页面结构,然则当在365体育平台bet某种小分辨率下,确凿无法进行4行内容显示了,必要变为3行内容显示,或者2行,若何相应分辨率,将原本的4行显示平滑的变成3或者2行显示呢?Css3 media queries( 媒体选择器)可以用来办理这个问题。

Css3 media queries 可以根据不合的分辨率加载不合的Css。 在Ethan Marcotte的 http://www.alistapart.com/articles/responsive-web-design/ 中给出了应用措施。 Demo: http://www.alistapart.com/d/responsive-web-design/ex/ex-site-FINAL.html 在页面宽度变更时,下方的图片自动重排且图片大年夜小适中。

其它相关内容:

有了:流体表格,液态图片,媒体选择器,页面已365体育平台bet经基础可以相应分辨率变更了,然则就相应式Web设计这个话题来说它应该包括两个方面的内容:

1. 相应屏幕分辨率变更,分辨率发生变更时,根据设备分辨率,调剂菜单,图片,翰墨,等其它页面DOM的状态和结构,使得页面仍旧可以为用户供给友好的应用体验。

2. 相应设备原生行径变更,如:拖拽(iPad上应用JavaScript事故模拟拖拽),手势支持,等其它移动设备上特有的手势输入要领支持。

本文相应式 Web 设计,只针对1。

同一图片,小分辨率下可否只载入小图,大年夜分辨率才载入大年夜图,可否不合分辨率下供给不合尺寸大年夜小的图片,从而节省带宽?应用媒体选择器及content属性可以办理这一问题。

应用上面的三个技巧可以设计制作出一个相应式Web。从设计和实现的整体历程来说设计并实现一个相应式Web站点,可以颠末下面4个历程:

1. 美工,用户体验师,勾画出页面的整体样子,确定最大年夜分辨率下应该显示的内容,在分辨率赓续缩小的环境下,若何结构,什么元素(菜单,图片,内容)必要变更显示要领,进行暗藏,缩放或者裁剪。

2. 应用相对尺寸进行定位和结构,应用相对尺寸设置长度,宽度,字体大年夜小。

3. 应用流体表格和液体图片相应分辨率。

4. 因为分辨率变更,根据必要变更显示要领的元素,加入媒体选择器。

相关对象:

Respond.js(http://filamentgroup.com/lab/respondjs_fast_css3_media_queries_for_internet_explorer_6_8_and_more/) 让IE6-8支持meidia queries

· Responsive Design Testing (http://mattkersley.com/responsive/)不合分辨下的测试对象。

Resize My Browser(http://resizemybrowser.com/)浏览器缩下班具,不支持chrome,opera.

Media Query Bookmarklet(http://seesparkbox.com/foundry/media_query_bookmarklet) media query的书签对象

ProtoFluid (http://protofluid.com/) 模拟测试Web在各类主流设备上的环境。

ScreenFly (http://quirktools.com/screenfly/ )和ProtoFluid类似

responsivepx (http://responsivepx.com/) 测试Web在不合分辨率下的适应性

此中http://quirktools.com/screenfly/ 异常 cool,可以赞助您模拟测试Web在各类主流设备上的环境:

相关资本:

http://www.alistapart.com/articles/responsive-web-design/

http://www.designinfluences.com/fluid960gs/

http://cssgrid.net/

http://goldengridsystem.com/

http://framelessgrid.com/

http://www.qianduan.net/responsive-web-design.html

http://zomigi.com/blog/hiding-and-revealing-portions-of-images/

http://zomigi.com/blog/creating-sliding-composite-images/

http://zomigi.com/blog/foreground-images-that-scale-with-the-layout/

http://zomigi.com/blog/essential-resources-for-creating-liquid-and-elastic-layouts/

http://unstoppablerobotninja.com/entry/fluid-images/

http://www.netmagazine.com/features/21-top-tools-responsive-web-design

http://www.netmagazine.com/features/50-fantastic-tools-responsive-web-design

http://iskeleton.blogspot.in/

http://www.lukew.com/ff/entry.asp?933

http://dev.opera.com/articles/view/graceful-degradation-progressive-enhancement/

http://www.lukew.com/ff/entry.asp?1509

http://www.lukew.com/ff/entry.asp?1514

http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/

免责声明:以上内容源自网络,版权归原作者所有,如有侵犯您的原创版权请告知,我们将尽快删除相关内容。

您可能还会对下面的文章感兴趣: