网站建设_网站制作_SEO优化推广_百度推广开户_朋友圈网络科技

為什么響應式設計需要媒體查詢

日期:2016/8/5 / 人氣:

沒有 CSS3 的媒體查詢模塊,就不能針對設備特性(如視口寬度)設置特定的 CSS 樣式。

如果你仔細研讀 W3C 關于 CSS3 媒體查詢模塊的規范,就會看到媒體查詢的官方解釋: HTML 4 和 CSS 2 目前支持為不同的媒體類型設定專有的樣式表。

比如,一個頁 面在屏幕上顯示時使用無襯線字體,而在打印時則使用襯線字體。screen 和 print 是兩種已定義的媒體類型。

媒體查詢讓樣式表有更強的針對性,擴展了 媒體類型的功能。 媒體查詢由媒體類型和一個或多個檢測媒體特性的條件表達式組成。媒體查詢 中可用于檢測的媒體特性有 width、height 和 color(等)。使用媒體查詢, 可以在不改變頁面內容的情況下,為特定的一些輸出設備定制顯示效果。

媒體查詢語法

26 第 2章 媒體查詢:支持不同的視口

還可以在 CSS樣式表中使用媒體查詢。例如,將下面的代碼插入樣式表,在屏幕寬度小于等于 400像素的設備上,h1 元素的文字顏色就會變成綠色。
@media screen and (max-device-width: 400px) {
h1 { color: green }
}
還可以使用 CSS的@import 指令在當前樣式表中按條件引入其他樣式表。例如下面的代碼會給視口最大寬度為 360像素的顯示屏設備加載一個名為 phone.css 的樣式表。
@import url(“phone.css”) screen and (max-width:360px);
切記,使用 CSS的@import 方式會增加 HTTP請求(這會影響加載速度) ,所以請謹慎使用該方法。

2.2 為什么響應式設計需要媒體查詢 25

在現代瀏覽器(如果是 IE,至少要 IE9)中瀏覽該網頁并不斷調整瀏覽器窗口寬度。頁面的背景顏色就會根據當前的視口尺寸而發生變化。為了清晰起見,我在這里使用了顏色名稱,但實際上最好使用十六進制顏色值,如#ffffff。接下來,讓我們繼續分析媒體查詢,學習如何對其進行充分利用。如果經常使用 CSS 2樣式表,你就知道可以通過<link>標簽的 media 屬性為樣式表指定設備類型(如顯示屏或打印機)。具體說來,就是在 HTML頁面的<head>標簽中插入一
個如下面代碼片段所示的 link 標簽:
<link rel=”stylesheet” type=”text/css” media=”screen” href=”screen-styles.css”>
媒體查詢則能使我們根據設備的各種功能特性來設定相應的樣式,而不僅僅只針對設備類型。可以將媒體查詢想象成對瀏覽器的提問。如果瀏覽器回答“是” ,則應用樣式;如果回答是“否” ,則不應用樣式。相對于在 CSS 2中能且只能問瀏覽器“你是一塊顯示屏嗎?”,媒體查詢能問的問題要多一點。例如,媒體查詢可以問:“你是一塊縱向放置的
顯示屏嗎?”我們看看對應的實際代碼:
<link rel=”stylesheet” media=”screen and (orientation: portrait)” href=”portrait-screen.css” />
首先,媒體查詢表達式詢問了媒體類型(你是一塊顯示屏嗎?),然后詢問了媒體特性(顯示屏是縱向放置的嗎?)。任何縱向放置的顯示屏設備都會加載 portrait-screen.css樣式表,其他設備則會忽略該文件。在媒體查詢的開頭追加 not 則會顛倒該查詢的邏輯。
例如,下面的代碼就會顛倒前例中的效果,會使非縱向放置的顯示屏設備加載樣式文件:
<link rel=”stylesheet” media=”not screen and (orientation: portrait)” href=”portrait-screen.css” />
也可以將多個表達式組合在一起。如,我們擴展一下前面的例子,限制只有視口寬度大于 800像素的顯示屏設備才能加載文件。
<link rel=”stylesheet” media=”screen and (orientation: portrait) and (min-width:800px)” href=”800wide-portrait-screen.css” />
更進一步,還可以寫一個媒體查詢列表。查詢列表中的任意一個查詢為真,則加載文件。
全部查詢都不為真,則不加載。例子如下:
<link rel=”stylesheet” media=”screen and (orientation: portrait) and (min-width:
800px), projection” href=”800wide-portrait-screen.css” />
這里有兩點需要注意。第一,媒體查詢之間使用逗號分隔。第二,你會注意到在projection 之后,沒有 and,也沒有任何特性/值的組合。沒有后續表達式,意味著只要是 projection 就滿足條件。本例中,樣式會應用于所有的投影儀。
和以前編寫 CSS規則一樣,基于媒體查詢也可以按條件加載樣式。在上面的例子中,我們在向頁面的<head></head>標簽中鏈接 CSS文件時使用了媒體查詢。除此之外,我們
CSS媒體查詢到底長什么樣,更重要的是,它是怎么起作用的?
將下面這段代碼插入到任意某個 CSS文件的最后,然后預覽與之關聯的網頁:
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;
}
}

作者:朋友圈科技


Go To Top 回頂部
主站蜘蛛池模板: 断桥铝破碎机_铝合金破碎机_废铁金属破碎机-河南鑫世昌机械制造有限公司 | 中国在职研究生招生信息网| 废旧物资回收公司_广州废旧设备回收_报废设备物资回收-益美工厂设备回收公司 | 电缆接头_防水接头_电缆防水接头 - 乐清市新豪电气有限公司 | 便携式XPDM露点仪-在线式防爆露点仪-增强型烟气分析仪-约克仪器 冰雕-冰雪世界-大型冰雕展制作公司-赛北冰雕官网 | 南溪在线-南溪招聘找工作、找房子、找对象,南溪综合生活信息门户! | 环氧乙烷灭菌器_压力蒸汽灭菌器_低温等离子过氧化氢灭菌器 _低温蒸汽甲醛灭菌器_清洗工作站_医用干燥柜_灭菌耗材-环氧乙烷灭菌器_脉动真空压力蒸汽灭菌器_低温等离子灭菌设备_河南省三强医疗器械有限责任公司 | 档案密集架,移动密集架,手摇式密集架,吉林档案密集架-厂家直销★价格公道★质量保证 | Honsberg流量计-Greisinger真空表-气压计-上海欧臻机电设备有限公司 | 至顶网| 三轴曲线机-端子插拔力试验机|华杰仪器 | 东莞动力锂电池保护板_BMS智能软件保护板_锂电池主动均衡保护板-东莞市倡芯电子科技有限公司 | 深圳激光打标机_激光打标机_激光焊接机_激光切割机_同体激光打标机-深圳市创想激光科技有限公司 深圳快餐店设计-餐饮设计公司-餐饮空间品牌全案设计-深圳市勤蜂装饰工程 | RV减速机-蜗轮蜗杆减速机-洗车机减速机-减速机厂家-艾思捷 | 浙江浩盛阀门有限公司| 深圳侦探联系方式_深圳小三调查取证公司_深圳小三分离机构 | 石家庄网站建设|石家庄网站制作|石家庄小程序开发|石家庄微信开发|网站建设公司|网站制作公司|微信小程序开发|手机APP开发|软件开发 | 金环宇|金环宇电线|金环宇电缆|金环宇电线电缆|深圳市金环宇电线电缆有限公司|金环宇电缆集团 | 危废处理系统,水泥厂DCS集散控制系统,石灰窑设备自动化控制系统-淄博正展工控设备 | 翰香原枣子坊加盟费多少钱-正宗枣核糕配方培训利润高飘香 | 四川职高信息网-初高中、大专、职业技术学校招生信息网 | 糖衣机,除尘式糖衣机,全自动糖衣机,泰州市长江制药机械有限公司 体感VRAR全息沉浸式3D投影多媒体展厅展会游戏互动-万展互动 | 恒温恒湿试验箱_高低温试验箱_恒温恒湿箱-东莞市高天试验设备有限公司 | 西安微信朋友圈广告投放_微信朋友圈推广_西安度娘网络科技有限公司 | 北京晚会活动策划|北京节目录制后期剪辑|北京演播厅出租租赁-北京龙视星光文化传媒有限公司 | 塑料薄膜_PP薄膜_聚乙烯薄膜-常州市鑫美新材料包装厂 | 流量卡中心-流量卡套餐查询系统_移动电信联通流量卡套餐大全 | 水热合成反应釜-防爆高压消解罐-西安常仪仪器设备有限公司 | Safety light curtain|Belt Sway Switches|Pull Rope Switch|ultrasonic flaw detector-Shandong Zhuoxin Machinery Co., Ltd | 中视电广_短视频拍摄_短视频推广_短视频代运营_宣传片拍摄_影视广告制作_中视电广 | 上海律师咨询_上海法律在线咨询免费_找对口律师上策法网-策法网 广东高华家具-公寓床|学生宿舍双层铁床厂家【质保十年】 | 包装机_厂家_价格-山东包装机有限公司| 北京公积金代办/租房发票/租房备案-北京金鼎源公积金提取服务中心 | 搜活动房网—活动房_集装箱活动房_集成房屋_活动房屋 | 宿松新闻网 宿松网|宿松在线|宿松门户|安徽宿松(直管县)|宿松新闻综合网站|宿松官方新闻发布 | 全自动过滤器_反冲洗过滤器_自清洗过滤器_量子除垢环_量子环除垢_量子除垢 - 安士睿(北京)过滤设备有限公司 | 恒温恒湿箱(药品/保健品/食品/半导体/细菌)-兰贝石(北京)科技有限公司 | 小型铜米机-干式铜米机-杂线全自动铜米机-河南鑫世昌机械制造有限公司 | 精密机械零件加工_CNC加工_精密加工_数控车床加工_精密机械加工_机械零部件加工厂 | LNG鹤管_内浮盘价格,上装鹤管,装车撬厂家-连云港赛威特机械 | 急救箱-应急箱-急救包厂家-北京红立方医疗设备有限公司 |