CSS 是前端開(kāi)發(fā)中不可或缺的一部分，同時(shí)也是最容易遇到兼容性問(wèn)題的地方。由于不同瀏覽器對(duì) CSS 的解析和渲染會(huì)有所不同，因此我們需要使用一些技巧來(lái)實(shí)現(xiàn)兼容性和自適應(yīng)性。

兼容性問(wèn)題一般出現(xiàn)在一些不兼容的屬性和值上，比如某些瀏覽器不支持 CSS3 的新特性。也有可能是一些樣式不能正常的應(yīng)用到某些瀏覽器上。

解決兼容性問(wèn)題的方法主要有兩種，一是使用瀏覽器前綴來(lái)適配不同的瀏覽器，比如：

-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;

上面的代碼就是給不同的瀏覽器添加不同的前綴，以適配不同的瀏覽器。

另一種方法就是使用 CSS Hack。CSS Hack 是一種針對(duì)不同瀏覽器寫(xiě)不同代碼的技巧，以適應(yīng)不同的瀏覽器。比如：

/* IE6 */
* html #foo {color: red}
/* IE7 */
* + html #foo {color: red}
/* IE8 */
@media \0screen\,screen\9 {
#foo {color: green}
}
/* IE9 */
:root #foo {color: blue\9}

上面的代碼就是針對(duì)不同的 IE 瀏覽器寫(xiě)的不同代碼，以達(dá)到適應(yīng)不同瀏覽器的目的。

自適應(yīng)問(wèn)題主要出現(xiàn)在不同設(shè)備或不同分辨率下的網(wǎng)頁(yè)布局問(wèn)題上。使用 CSS Media Query 可以很好的解決這個(gè)問(wèn)題。比如：

@media screen and (max-width: 768px) {
/* 響應(yīng)式布局，屏幕小于 768px 時(shí)顯示 */
}

上面的代碼就是實(shí)現(xiàn)了響應(yīng)式布局，當(dāng)屏幕寬度小于 768px 時(shí)會(huì)顯示對(duì)應(yīng)的樣式。

總之，兼容性和自適應(yīng)性是 CSS 開(kāi)發(fā)中必須要面對(duì)的問(wèn)題，只有熟練掌握相關(guān)技術(shù)和方法，才能寫(xiě)出更好的兼容性更好的自適應(yīng)性的頁(yè)面。