响应式设计的5个CSS实用技巧

标签: 技术与实践 设计与交互 资源与规范 CSS技巧;响应设计 | 发表时间:2012-06-03 21:21 | 作者:Lisober
出处:http://www.webapptrend.com

正如我在教程 响应式Web设计三步走当中所讲的,响应式的Web设计其实并不难,但是要让元素在布局切换时能够平滑过渡就比较考验技巧了。现在我分享在编码时常用的五个CSS技巧并举例说明。这些技巧都是使用简单的CSS属性,如min-width、max-width、overflow 和相对属性值,但是这些属性在响应式设计中发挥着很大的作用。

1. 响应式Video ( demo)

响应式video的CSS技巧是由 tjkdesign.com发现的。我之前的一篇文章介绍过它,你可以 在这里阅读。响应式视频会适应它的容器宽度。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.video {
position : relative ;
padding-bottom : 56.25% ;
height : 0 ;
overflow : hidden ;
}
.video iframe,
.video object,
.video embed {
position : absolute ;
top : 0 ;
left : 0 ;
width : 100% ;
height : 100% ;
}

2. Min & Max Width ( demo)

属性设置了元素的最大宽度。其目的是防止元素“越线”。

最大宽度容器

在下面的例子当中,我定义了container的宽度是800px(译注:如果它的父容器不小于800px),但是不超过父容器的90%。

1
2
3
4
5
.container {
width : 800px ;
max-width : 90% ;
}

响应式图片

使用max-width:100% and height:auto,图片能自适应父容器的宽度。

1
2
3
4
img {
max-width : 100% ;
height : auto ;
}

上述的CSS在IE7和IE9都能起作用,但是IE8不识别。可以使用width:auto来修复。你可以使用针对IE8的条件CSS,或者使用下面的IE hack:

1
2
3
4
5
@media \ 0 screen {
img {
width : auto ; /* for ie 8 */
}
}

Min-Width

相反,它设置了元素的最小宽度。在下面的例子里面,min-width用来定义input的宽度,防止input被拉伸的时候变得过小。

 

min width

 

3. 相对值 ( demo)

响应式设计中,使用相对值可以简化CSS和改善布局。下面举例说明。

相对Margin

下面的例子是评论列表,使用相对margin来设置。我用百分比的值而不用绝对的像素值来隔开子列表。下面的截图可以看到,如果用像素来定义,子列表会变得越来越小。

 

relative margin

 

相对字体大小

以相对值(如em或%)设置的字体、行高、外边距可以被继承。例如,只要简单地更改父级元素的字体大小,那么它的子元素的字体大小也能随之改变。

 

relative font size

 

相对内边距

下面的截图说明了相对的百分比边距比绝对的固定像素边距更好。左边的容器体现了使用像素边距的不平衡。右边的容器则体现了对容器空间的充分利用。

 

relative padding

 

4. Overflow:hidden技巧 ( demo)

如我在之前的文章所说的,可以 使用overflow属性来清除浮动。这个技巧很实用。应用overflow:hidden,可以对上一个元素清除浮动,保证当前容器的内容能正常显示。

 

overflow: hidden

 

5. Word-break ( demo)

我之前也说过 word-wrap 属性。可以在强制长文本(如长URL链接)换行。

1
2
3
.break-word {
word-wrap: break-word;
}

 

break-word

 

文章来自: 5 Useful CSS Tricks for Responsive Design
译文: 响应式设计的5个CSS实用技巧,译者: Vivien Chen

本文来自特邀译者@陈伟华vivien,转载请注明出处。

 

 

 

 

 

您可能也喜欢:

W3C组织关于响应图像的提案引发争议

18款精美CSS3 Web设计

响应图像已经是HTML的一部分

50种响应式web设计的奇妙工具
无觅

相关 [响应式 设计 css] 推荐:

响应式设计的5个CSS实用技巧

- - Web App Trend
正如我在教程 响应式Web设计三步走当中所讲的,响应式的Web设计其实并不难,但是要让元素在布局切换时能够平滑过渡就比较考验技巧了. 现在我分享在编码时常用的五个CSS技巧并举例说明. 这些技巧都是使用简单的CSS属性,如min-width、max-width、overflow 和相对属性值,但是这些属性在响应式设计中发挥着很大的作用.

用于响应式设计的9个CSS技巧

- - CSDN博客Web前端推荐文章
现在越来越多的网站文本链接已取消下划线,而这已成为一种 WEB设计趋势,尤其是在做响应式网站时. 下面提供一段简单的CSS代码,可以轻松取消文本链接下划线:. tjkdesign.com给大家,里面提供了许多CSS技巧,帮助你在页面中嵌入响应式视频( . 3.Rollover文本链接. 越来越多的人喜欢在手机上浏览网页,这使得Rollover链接变得越来越流行.

Groundwork:响应式 HTML5,CSS & JavaScript 工具包

- - 博客园_梦想天空
  Groundwork 是基于强大的 CSS 预处理器 Sass & Compass 的响应式 HTML5,CSS & JavaScript 工具包. 使用 Groundwork,您可以快速构建 Web 应用程序. Groundwork 拥有一个令人难以置信的灵活,可嵌套,流体的网格系统,是 Github 上的开源项目.

CSS 与 HTML5 响应式图片

- - TaoBaoUED
 随着  Retina 屏幕的逐渐普及,网页中对图片的适配要求也越来越高. 如何让图片在放大了两倍的 Retina 屏幕显示依然清晰,曾经一度困扰着网页开发者,好在 CSS3 与 HTML5 已经着力在改变这种现状. 响应式图片是指: 用户代理根据输出设备的分辨率不同加载不同类型的图片,不会造成带宽的浪费.

Simple Grid:轻量级的响应式 CSS 网格系统

- - 我爱水煮鱼
使用网格进行网页设计已经是潮流,但是现在有很多 CSS 框架都提供网格功能,用来控制网页上每个元素的位置,但是这些 CSS 框架都是太多功能,而有时我们仅仅需要一个简单的网格系统. Simple Grid 就是一个这样的简洁的 CSS 框架,并且它还是基于响应式布局设计. 基于响应式设计的 Simple Grid,让你可以快速创建适应于手机和平板电脑的网站.

一行CSS实现各种响应式元素 – Fluidity

- - 设计达人
FLUIDITY是一个极微小的 CSS样式表,压缩版只有一行代码,大小只有115个字节,它能实现图像、文本、Canvas、Table表格以及iFrame框架的响应式功能. 这个响应式非常适合用于一般企业站或文章内容上,如果需要表单、layout等支持就需要那些响应式框架了,但那些文件实现太大了,如Bootstrap就已经100KB+了,所以我觉得够用就好,下面一起来看看介绍.

响应式网页设计

- - 前端观察
这个话题最近很火爆,我也一直在关注,响应式网页设计和移动互联网密切相关,并因移动终端的丰富和普及而兴盛,并且是一个颇具争议的话题,我今天将和大家探讨下. 上周写了个简单的ppt在组内大概介绍了下,感兴趣的话可以 先看下这个PPT. 在说到这个话题前,我们先看下网页设计和前端开发的现状:. 全球有超过53亿手机用户(包括传统手机).

响应式Web设计

- - 葵中剑's Blog - SwordAir.com
响应式Web设计( Responsive Web Design – RWD)一般是指那些使用CSS3 Media Query特性制作站点,其可以适应不同视窗尺寸的布局. 虽然很早就已经有了类似RWD的概念,但直到最近一年里才开始变得特别流行,各种文章、例子、工具、模板,不断地从无到有,诸如:. 响应式Web设计50个例子和最佳实践.

响应式网页设计

- - IT技术博客大学习
响应式网页设计最初是由 Ethan Marcotte 提出的一个概念:为什么一定要为每个用户群各自打造一套设计和开发方案. Web设计应该做到根据不同设备环境自动响应及调整. 当然响应式Web设计不仅仅是关于屏幕分辨率自适应以及自动缩放的图片等等,它更像是一种对于设计的全新思维模式;我们应当向下兼容、移动优先.

响应式Web设计

- - 阿里巴巴(中国站)用户体验设计部博客
在设计中经常遇到这几个问题:. 1.想要网站兼容手机、平板电脑、pc,就得为不同的设备定制不同的版本. 2.想要网站的某些页面在宽屏显示器下一行显示更多的内容,又得为宽屏定制一个版本. 3.很多人并不是在全屏的情况下浏览我们的页面,如果让页面随着浏览器宽度改变而相应的调整会不会比较好. 有没有办法能有效解决这些问题呢.