css 兼容性自适应 |css 网页 下载

兼容性问题一般出现在一些不兼容的属性和值上，比如某些浏览器不支持 CSS3 的新特性。也有可能是一些样式不能正常的应用到某些浏览器上。

解决兼容性问题的方法主要有两种，一是使用浏览器前缀来适配不同的浏览器，比如：

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

上面的代码就是给不同的浏览器添加不同的前缀，以适配不同的浏览器。

另一种方法就是使用 CSS Hack。CSS Hack 是一种针对不同浏览器写不同代码的技巧，以适应不同的浏览器。比如：

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

上面的代码就是针对不同的 IE 浏览器写的不同代码，以达到适应不同浏览器的目的。

自适应问题主要出现在不同设备或不同分辨率下的网页布局问题上。使用 CSS Media Query 可以很好的解决这个问题。比如：

@media screen and (max-width: 768px) {
/* 响应式布局，屏幕小于 768px 时显示 */
}

上面的代码就是实现了响应式布局，当屏幕宽度小于 768px 时会显示对应的样式。

总之，兼容性和自适应性是 CSS 开发中必须要面对的问题，只有熟练掌握相关技术和方法，才能写出更好的兼容性更好的自适应性的页面。