样式单的一个最重要的特点就是它可以作用于多种媒体,比如页面、屏幕、电子合成器等等。特定的属性只能作用于特定的媒体,如"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: 960px) {//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的设备 }
到此文章就结束了
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
更新日志
- 战锤40K星际战士2狙击职业介绍|狙击职业技能效果一览
- RobertSaxtonTheResurrectionoftheSoldiers(2024)[24Bit-192kHz]FLAC
- 唐成杨东哥弹唱《情若真HQ》头版限量编号[WAV+CUE]
- 柏菲·HIFI风情1《一杯香茶》限量开盘母带ORMCD[WAV+CUE]
- 发糖了!《黑神话》动画导演绘制八戒紫蛛儿中秋贺图
- “时光系列”新作《时光3:永耀之境》首曝:画风更真实的恋爱模拟RPG
- 《战地》游戏主管:始终认为《战地》未来销量能超越《使命召唤》
- 《伤感民谣 值得收藏的音乐极品 2CD》[WAV/分轨][1.2GB]
- 《邓紫棋 巨肺唱将小天后有心人 2CD》[WAV/分轨][1.2GB]
- 《迪克牛仔 坛奇精选 2CD台首版》 [WAV+CUE][600MB]
- 陈明.1998-为了爱影视歌曲+新歌【中唱】【WAV+CUE】
- 黄小琥.2009-简单/不简单【华纳】【WAV+CUE】
- 洪卓立.2010-TASTE.OF.LOVE新曲+精丫英皇娱乐】【WAV+CUE】
- 战锤40K星际战士2职业强度排行
- 交错战线PVE国家队成员以及常用角色推荐