Welcome, Old Sport!

CSS在响应性设计的未来与改进

by ilikecss ON 2013/06/03 17080

CSS在响应性设计的未来与改进翻译一篇文章,内容确实挺好的。2012年以来响应性设计一直是个热门的话题,一些知名的开发者都在想方设法去改进它。在这篇文章里我们会接触到一些新的东西,但不会深入到每一个技术深层,阅读这篇文章你可能需要具备一定的CSS方面的知识,文章的主旨是单单依靠CSS的力量去解决响应性设计的图像和排版问题。

图像在响应性设计里的重要性:

响应性设计里图像是一个关键点,不同设备图像有不同显示规格,大多数的设计师喜欢像素完美化,正常大小的图片在高密度的设备里显示就是一坨屎,图片大了下载速度也会增加,一些国家流量是非常昂贵的。还有,为什么我小屏幕设备要去下载一张大尺寸的图片呢?让我们一起看下解决这些问题的方法。
元素,HTML5的新标签,使用它可以让一些媒体查询到适应的设备来满足不同图像,参考一下代码:

<picture width="750"  height="750">     
  <source  media="(min-width: 45em)" src="large.jpg">
  <source  media="(min-width: 18em)" src="med.jpg">
  <source  src="small.jpg">
  <img  src="small.jpg" alt="">
  <p>Accessible  text</p>
</picture>

根据不同设备尺寸选择不同图片,默认是small.jpg。该方案正由w3c专业人员进行讨论中,目前只有少数浏览器支持。关于图像尺寸的响应性设计处理的第二个方案由苹果公司提出,叫做”srcset”属性,这项功能基于HTML的标签而引申而出的,具体可以参考下面代码:

<img  alt="The Breakfast Combo" 
  src="banner.jpg"
  srcset="banner-HD.jpg  2x, banner-phone.jpg 100w, banner-phone-HD.jpg 100w 2x">

从上面代码看到,标签里的值由逗号来分割字符串,不同设备尺寸对应不同路径的像素图片。

  • 浏览器不支持srcset属性,选择默认图片是banner.jpg
  • 像素比率2倍的采用banner-HD.jpg
  • 像素比率100w的采用banner-phone.jpg
  • 同时满足以上两种情况的选择banner-phone-HD.jpg

由于技术上复杂性与目前存在的缺陷,该判断方法目前不支持任何浏览器,背景图像的选择与上面方法一样,不过目前可以在Safari 6+ & Chrome 21+环境下测试。

background-image: image-set(  "foo.png" 1x,
  "foo-2x.png"  2x,
  "foo-print.png"  600dpi );

不需要调整HTML就可以随意布局?

是的,目前最流行的解决方案就是使用CSS3 flexible box layout model(“flexbox”),并支持大多数主流浏览器,该模板可另你轻松地重新排列屏幕上的元素,详情介绍可以参考CSS3 Flexible Box Layout Explained,下面是简单的CSS样式参考:

.parent {
  display: flex;
  flex-flow: column; /* 显示列表里的项目 */
}
.children {
  order: 1; /* 更改元素的顺序 */
}

另外一种方法与上面的相似,但需要使用到javascript我这边就不介绍了。下面介绍最后一种CSS的布局方法,在未来可能会实现,也是本人最喜欢的一种解决方法。使用CSS3样式布局,模块的工作原理是关联元素与布局的”名称”排版,HTML排版根据CSS里的元素位置顺序而变动,具体看下面代码:

.parent {
   display: "ab"
            "cd" /* 建立CSS里的布局界面 */
}
.child1 {
   position: a;
}
.child2 {
   position: b;
}
.child3 {
   position: c;
}
.child4 {
   position: d;
}

然后是HTML呈现的形态:

css在响应性设计的未来

构想中的css响应性布局

以上这个解决方案是我个人最喜欢的,直观、简洁,初学者也能看懂,只可惜目前只是处于设想阶段,没有任何一个开发商去实现它,我们只好期待遥远的未来。在这篇文章里我只是简单提及一下CSS在响应性设计的未来,一些技术的解决方案,在未来我们会看到的。文章部分参考了state-of-responsive-web-design,英文不错的朋友不妨去阅读下全文。

9条评论
  1. #1

    tinyhill说道:

    响应式基础内容,赞一个。

  2. #2

    那时年少说道:

    :?: 对于代码还是不懂,正在学习中

  3. #3

    洺汉特产说道:

    CSS很难学吗?半天看不懂。

  4. #4

    大发说道:

    今天被问到有什么职业计划,丫的,哥想卖成人用品,怎么拿到饭桌上说。。。

  5. #5

    Marvin说道:

    这玩意看着是好,设计起来巨麻烦啊。之前写了一个 responsive 的页面,不停地被挑毛病。这玩意每个大屏幕还真不好设计啊。




TOP