用於響應式設計的9個CSS技巧

2022-04-16 01:36:39 字數 1681 閱讀 6154

作者ali qayyum

前端開發

css響應式設計

css已成為web發展不可或缺的部分,開發人員可以使用它來改變網頁元素的樣式。而隨著響應式設計越來越流行,css在響應式設計中已扮演著舉足輕重的角色,在進行響應式設計時,倘若你能掌握一些css技巧,將大大提高你的工作效率。

1.取消下劃線

現在越來越多的**文字鏈結已取消下劃線,而這已成為一種web設計趨勢,尤其是在做響應式**時。下面提供一段簡單的css**,可以輕鬆取消文字鏈結下劃線:12

34512

3456

78910

1112

1314

1516

.video

.video iframe,

.video object,

.videoembed

3.rollover文字鏈結

越來越多的人喜歡在手機上瀏覽網頁,這使得rollover鏈結變得越來越流行。想要實現該效果一點都不難,**也非常簡單。 12

345

4.最大、最小寬度

最大最小寬度可以幫助頁面元素設定邊界線,其最基本的目的是使所有頁面元素都能在邊界範圍之內。下面提供一段**,你也可以根據需要進行修改:12

345.container12

34img

上面這段**僅適用於ie 7和9,對於ie 8需要作出以下修改:12

345@media \0screen

}

最小寬度設定

5.背景

一些開發人員喜歡給table或者block設定背景,css有一段**是專門設定背景的:12

example of a div element with a background image:

6.相對值

相對值是響應式設計中非常重要的部分,如果你想要獲得最佳效果,你就應該知道如何使用這些值,這對**的布局是非常重要的。

relative font size 

在設定字型相對大小時,需要根據父元素進行設定:

相對比例填充

7.突出邊界

1border-bottom:2pxsolid#427aa8;

8. word-break

下面這段**可以很好的實現文字換行:12

3.break-word

9.css溢位:隱藏技巧

visible的相對值預設情況下是隱藏的,如下圖所示,超出box部分的內容就被隱藏起來了。 

總結

用於響應式設計的9個CSS技巧

發表於 2013 04 03 09 31 smashinghub ali qayyum 前端開發 css響應式設計 css已成為web發展不可或缺的部分,開發人員可以使用它來改變網頁元素的樣式。而隨著響應式設計越來越流行,css在響應式設計中已扮演著舉足輕重的角色,在進行響應式設計時,倘若你能掌握一...

用於響應式設計的9個CSS技巧

1.取消下劃線 現在越來越多的 文字鏈結已取消下劃線,而這已成為一種web設計趨勢,尤其是在做響應式 時。下面提供一段簡單的css 可以輕鬆取消文字鏈結下劃線 video.video iframe,video object,videoembed 3.rollover文字鏈結越來越多的人喜歡在手機上瀏...

響應式設計的5個CSS實用技巧

正如我在教程響應式web設計三步走當中所講的,響應式的 web設計其實並不難,但是要讓元素在布局切換時能夠平滑過渡就比較考驗技巧了。現在我分享在編碼時常用的五個css技巧並舉例說明。這些技巧都是使用簡 單的css屬性,如min width max width overflow 和相對屬性值,但是這些...