原创力文档- 1、原创力文档（book118）网站文档一经付费（服务费），不意味着购买了该文档的版权，仅供个人/单位学习、研究之用，不得用于商业用途，未经授权，严禁复制、发行、汇编、翻译或者网络传播等，侵权必究。。
- 2、本站所有内容均由合作方或网友上传，本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺！文档内容仅供研究参考，付费前请自行鉴别。如您付费，意味着您自己接受本站规则且自行承担风险，本站不退款、不进行额外附加服务；查看《如何避免下载的几个坑》。如果您已付费下载过本站文档，您可以点击 这里二次下载。
- 3、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等，请点击“版权申诉”（推荐），也可以打举报电话：400-050-0827(电话支持时间：9:00-18:30)。
- 4、该文档为VIP文档，如果想要下载，成为VIP会员后，下载免费。
- 5、成为VIP后，下载本文档将扣除1次下载权益。下载后，不支持退款、换文档。如有疑问请联系我们。
- 6、成为VIP后，您将拥有八大权益，权益包括：VIP文档下载权益、阅读免打扰、文档格式转换、高级专利检索、专属身份标志、高级客服、多端互通、版权登记。
- 7、VIP文档为合作方或网友上传，每下载1次， 网站将根据用户上传文档的质量评分、类型等，对文档贡献者给予高额补贴、流量扶持。如果你也想贡献VIP文档。上传文档
查看更多
媒体查询支援不同的视域
第2章 媒體查詢：支援不同的視域
第2章 媒體查詢：支援不同的視域
- 媒體查詢(Media query)
* 為CSS3 的模組之一，用來查詢使用者媒體(Media) 的特性，以便調整CSS 的樣
* 媒體的特性：視域寬度、螢幕寬高比(Aspect ratio) 、螢幕橫向或縱向(Landscape or
portrait) 等
(1) 媒體查詢語法
(1) 媒體查詢語法
- 範例：依據媒體查詢結果變換背景顏色(bgChange.html)
!DOCTYPE html
html lang=en
head
meta charset=utf-8/
titleBrowser background changer/title
style
body {
background-color: grey;
}
@media screen and (max-width: 960px) {
body {
background-color: red;
}
}
@media screen and (max-width: 768px) {
body {
background-color: orange;
}
}
@media screen and (max-width: 550px) {
body {
background-color: yellow;
}
}
@media screen and (max-width: 320px) {
body {
background-color: green;
}
}
/style
/head
body
/body
/html
* 使用現代的瀏覽器，變換頁面尺寸，背景顏色會跟著變化
* CSS 亦可使用下列方式指定某種媒體應使用某個樣式檔
link rel=stylesheet type=text/css media=screen href=screen- styles.css
* CSS 僅查詢媒體型態(Type) ，但CSS3 主要功能不在於查詢型態，而是依據該裝置
的能力(Capability)或特性(Feature) ，來決定其樣
# 如果瀏覽器的回答是「真」(True) ，就使用所指定的樣式；如果回答是「假」
(False) ，就不使用
# 例如：依據條件載入某個樣式檔
- 提問：「你的螢幕是縱向？」：
head
link rel=stylesheet media=screen and (orientation: portrait) href=portrait-screen.css /
/head
-1
- 上述有兩個問題：(1)詢問型態：是螢幕嗎？(2)詢問特性：是縱向嗎？
- 可加上邏輯運算 not
link rel=stylesheet media=not screen and (orientation: portrait) href=portrait-screen.css /
- 可串接許多條件判斷
link rel=stylesheet media=screen and (orientation: portrait) and (min-width: 800px)
href=800wide-portrait-screen.css /
- 可串接許多條件判斷
link rel=stylesheet media=scree
文档评论（0）