CSS3 响应式布局： 使用@media (min/max-width:***) 和@font-face及其兼容

1.运用@media实现网页自适应中的几个关键分辨率

1.1 方式1：用min-width时，小的放上面大的在下面（一定要注意下顺序，否则可能会失效）

@media (min-width: 768px){ //>=768的设备 }

@media (min-width: 992px){ //>=992的设备 }

@media (min-width: 1200){ //>=1200的设备 }

1.2 方式1：用max-width那么就是大的在上面，小的在下面（一定要注意下顺序，否则可能会失效）

@media (max-width: 1199){ //<=1199的设备 }

@media (max-width: 991px){ //<=991的设备 }

@media (max-width: 767px){ //<=768的设备 }

1.3 以下浏览器支持

  Firefox 3.5+、Chrome 21+、Safari 4.0+ 以及 Opera 9+ 支持 ，Internet Explorer 9+ 支持。

注意：Internet Explorer 8 以及更早的版本不支持。

2.@font-face

2.1 通过@font-face自定义好所需的字体

@font-face {

    font-family: "yawhom";

    src: url(../fonts/MiFie-Web-Font.eot) format('embedded-opentypy'),

    url(../fonts/MiFie-Web-Font.svg) format('svg'),

    url(../fonts/MiFie-Web-Font.ttf) format('truetype'),

    url(../fonts/MiFie-Web-Font.woff) format('woff')

}

2.2 把自己定义的字体应用到DOM元素上:

.iconfont {

    font-family: "yawhom" !important;

    font-size: 16px;

    font-style: normal;

    -webkit-font-smoothing: antialiased;

    -moz-osx-font-smoothing: grayscale;

}

.wjs-icons-mobile:before {

    content: "\e908";

}

.wjs-icon-tel:before {

    content: "\e909";

}

2.3 以下浏览器支持

  Firefox、Chrome、Safari 以及 Opera 支持 .ttf (True Type Fonts) 和 .otf (OpenType Fonts) 类型的字体。

  Internet Explorer 9+ 支持新的 @font-face 规则，但是仅支持 .eot 类型的字体 (Embedded OpenType)。

注意：Internet Explorer 8 以及更早的版本不支持新的 @font-face 规则。