CSS已成為Web發展不可或缺的部分，開發人員可以使用它來改變網頁元素的樣式。而隨著響應式設計越來越流行，CSS在響應式設計中已扮演著舉足輕重的角色，在進行響應式設計時，倘若你能掌握一些CSS技巧，將大大提高你的工作效率。
本文將介紹一些CSS設計技巧，包括取消下劃線、設計響應式視頻、背景圖片的設置以及相對值等。
1.取消下劃線
現在越來越多的網站文本鏈接已取消下劃線，而這已成為一種Web設計趨勢，尤其是在做響應式網站時。下面提供一段簡單的CSS代碼，可以輕松取消文本鏈接下劃線：
<style type=”text/css”>a {text-decoration:none;}</style>2.響應式視頻
在網頁中嵌入視頻，里面提供了許多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 \0screen {img {width: auto;/* for ie 8 */}}最小寬度設定
5.背景圖片
一些開發人員喜歡給table或者block設置背景圖片，CSS有一段代碼是專門設置背景圖片的：
<div style="background-image: url(../images/test-background.gif); height: 200px; width: 400px; border: 1px solid black;">Example of a DIV element with a background image:</div><div style="background-image: url(../images/test-background.gif);height: 200px; width: 400px; border: 1px solid black;"> </div>6.相對值
相對值是響應式設計中非常重要的部分，如果你想要獲得最佳效果，你就應該知道如何使用這些值，這對網站的布局是非常重要的。
Relative Font Size
在設置字體相對大小時，需要根據父元素進行設置：
相對比例填充
7.突出邊界
border-bottom: 2px solid #427AA8;
8. Word-Break
下面這段代碼可以很好的實現文本換行：
.break-word {word-wrap:break-word;}9.CSS溢出：隱藏技巧
visible的相對值默認情況下是隱藏的，如下圖所示，超出box部分的內容就被隱藏起來了。
總結
以上都是用于響應式設計的最簡單技巧，并且可以被普遍使用于各種網站上，對于后期的網站維護也十分方便。（編譯/張紅月 責編/夏夢竹）
原文鏈接： SMASHINGHUB