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 规则。