款式单的一个最重要的特性便是它能够功效于多种多样媒体,例如网页页面、显示屏、电子合成器这些。特殊的属性只有功效于特殊的媒体,如"font-size"属性只对可卷动的媒体种类合理(显示屏)。

申明一个媒体属性可以用@import或@media引入:

@import url(loudvoice.css) speech;
@media print {
/* style sheet for print goes here */
}

还可以在文本文档标识中引入媒体:
<link rel="stylesheet" type="text/css" media="print" href="foo.css">
能够看得出,@import和@media的差别取决于,前面一种引入外界的款式单用以媒体种类,后面一种立即引入媒体属性。@import的操作方法是@import加款式单文件的URL详细地址再加媒体种类,能够好几个媒体同用一个款式单,媒体种类中间用","切分符分离。@media用规律是把媒体种类放到前边,别的标准和rule-set基础一样。下边列举各种各样媒体种类:

SCREEN:指电脑屏幕。
PRINT:指用以复印机的不全透明物质。
PROJECTION:指用以显示信息的新项目。
BRAILLE:盲文系统软件,指有触感实际效果的印刷物。
AURAL:指视频语音电子合成器。
TV:指电视机种类的媒体。
HANDHELD:指便携式显示系统(小显示屏,纯色)
ALL:合适于全部媒体。

移动端(手机端)响应式款式 @media 的应用

通用性移动端款式:
 

@media all and (orientation : portrait) {
/*坚屏*/
}
@media all and (orientation : landscape) {
/*全屏*/
}

特定移动端高宽比款式:

@media screen and (max-width: 750px)
@media screen and (min-width: 720px) and (max-width: 961080x) {//720 <= xxx < 960的机器设备}

依据不一样的机器设备设置的款式:

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

留意下次序,假如你将@media (min-width: 768px)写在了下边那麼很不幸,由于css文件是以上到下载入的,后边的css优先会高些

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

由于如果是1440,因为1440>768那麼你的1200便会无效。

因此 大家用min-width时,小的放上边大的在下面,同样如果是用max-width那麼便是大的在上面,小的在下面

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

到此文章内容就结束了