發表於 2013-04-03 09:31|
smashinghub|
ali qayyum
前端開發
css響應式設計
css已成為web發展不可或缺的部分，開發人員可以使用它來改變網頁元素的樣式。而隨著響應式設計越來越流行，css在響應式設計中已扮演著舉足輕重的角色，在進行響應式設計時，倘若你能掌握一些css技巧，將大大提高你的工作效率。
1.取消下劃線
現在越來越多的**文字鏈結已取消下劃線，而這已成為一種web設計趨勢，尤其是在做響應式**時。下面提供一段簡單的css**，可以輕鬆取消文字鏈結下劃線：
1
2
3
4
5
12
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.video
.video iframe,
.video object,
.videoembed
3.rollover文字鏈結
越來越多的人喜歡在手機上瀏覽網頁，這使得rollover鏈結變得越來越流行。想要實現該效果一點都不難，**也非常簡單。
1
2
3
4
5
4.最大、最小寬度
最大最小寬度可以幫助頁面元素設定邊界線，其最基本的目的是使所有頁面元素都能在邊界範圍之內。下面提供一段**，你也可以根據需要進行修改：
1
2
3
4
5
.container
1
2
3
4
img
上面這段**僅適用於ie 7和9，對於ie 8需要作出以下修改： 1
2
3
4
5
@media \0screen
}
最小寬度設定
5.背景
一些開發人員喜歡給table或者block設定背景，css有一段**是專門設定背景的：
1
2
example of a div element with a background image:
6.相對值
相對值是響應式設計中非常重要的部分，如果你想要獲得最佳效果，你就應該知道如何使用這些值，這對**的布局是非常重要的。
relative font size
在設定字型相對大小時，需要根據父元素進行設定：
相對比例填充
7.突出邊界
1
border-bottom:2pxsolid#427aa8;
8. word-break
下面這段**可以很好的實現文字換行：
1
2
3
.break-word
9.css溢位：隱藏技巧
visible的相對值預設情況下是隱藏的，如下圖所示，超出box部分的內容就被隱藏起來了。
總結
用於響應式設計的9個CSS技巧
1.取消下劃線 現在越來越多的 文字鏈結已取消下劃線，而這已成為一種web設計趨勢，尤其是在做響應式 時。下面提供一段簡單的css 可以輕鬆取消文字鏈結下劃線 video.video iframe,video object,videoembed 3.rollover文字鏈結越來越多的人喜歡在手機上瀏...
用於響應式設計的9個CSS技巧
作者ali qayyum 前端開發 css響應式設計 css已成為web發展不可或缺的部分，開發人員可以使用它來改變網頁元素的樣式。而隨著響應式設計越來越流行，css在響應式設計中已扮演著舉足輕重的角色，在進行響應式設計時，倘若你能掌握一些css技巧，將大大提高你的工作效率。1.取消下劃線 現在越來...
響應式設計的5個CSS實用技巧
正如我在教程響應式web設計三步走當中所講的，響應式的 web設計其實並不難，但是要讓元素在布局切換時能夠平滑過渡就比較考驗技巧了。現在我分享在編碼時常用的五個css技巧並舉例說明。這些技巧都是使用簡 單的css屬性，如min width max width overflow 和相對屬性值，但是這些...