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

标签： 响应式 设计 css | 发表时间：2013-06-21 22:19 | 作者：chenke__hxx
出处：http://blog.csdn.net

1.取消下划线

现在越来越多的网站文本链接已取消下划线，而这已成为一种 WEB设计趋势，尤其是在做响应式网站时。下面提供一段简单的CSS代码，可以轻松取消文本链接下划线：

<style type=”text/css”>
a {
text-decoration : none ;
}
</style>

2.响应式视频

在网页中嵌入视频，这里介绍  tjkdesign.com给大家，里面提供了许多CSS技巧，帮助你在页面中嵌入响应式视频（  DEMO）。

.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% ;
}

3.Rollover文本链接

越来越多的人喜欢在手机上浏览网页，这使得Rollover链接变得越来越流行。想要实现该效果一点都不难，代码也非常简单。 

<style type= "text/css" >
a:hover{
color : red ;
}
</style>
4.最大、最小宽度

最大最小宽度可以帮助页面元素设置边界线，其最基本的目的是使所有页面元素都能在边界范围之内。下面提供一段代码，你也可以根据需要进行修改：

.container {
 
width :  800px ;
max-width :  90% ;
}
下面这段代码将会根据边界线自动调整图片大小：
img {
max-width :  100% ;
height :  auto ;
}
上面这段代码仅适用于IE 7和9，对于IE 8需要作出以下修改：
@media \ 0 screen {
img {
width :  auto ; /* for ie 8 */
}
}

最小宽度设定

5.背景图片

一些开发人员喜欢给table或者block设置背景图片，CSS有一段代码是专门设置背景图片的：

6.相对值

 

相对值是响应式设计中非常重要的部分，如果你想要获得最佳效果，你就应该知道如何使用这些值，这对网站的布局是非常重要的。

 

 

Relative Font Size 

在设置字体相对大小时，需要根据父元素进行设置：

相对比例填充

7.突出边界

 

1
border-bottom :  2px  solid  #427AA8 ;

8. Word-Break

 

下面这段代码可以很好的实现文本换行：

 

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

9.CSS溢出：隐藏技巧

visible的相对值默认情况下是隐藏的，如下图所示，超出box部分的内容就被隐藏起来了。 

 

 

作者：chenke__hxx 发表于2013-6-21 22:19:12 原文链接
阅读：104 评论：0 查看评论

相关 [响应式 设计 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.很多人并不是在全屏的情况下浏览我们的页面，如果让页面随着浏览器宽度改变而相应的调整会不会比较好. 有没有办法能有效解决这些问题呢.