网站建设_网站制作_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 回頂部
主站蜘蛛池模板: 三防漆–水性三防漆–水性浸渍漆–贝塔三防漆厂家 | 对照品_中药对照品_标准品_对照药材_「格利普」高纯中药标准品厂家-成都格利普生物科技有限公司 澳门精准正版免费大全,2025新澳门全年免费,新澳天天开奖免费资料大全最新,新澳2025今晚开奖资料,新澳马今天最快最新图库 | 礼仪庆典公司,礼仪策划公司,庆典公司,演出公司,演艺公司,年会酒会,生日寿宴,动工仪式,开工仪式,奠基典礼,商务会议,竣工落成,乔迁揭牌,签约启动-东莞市开门红文化传媒有限公司 | AGV无人叉车_激光叉车AGV_仓储AGV小车_AGV无人搬运车-南昌IKV机器人有限公司[官网] | 海峰资讯 - 专注装饰公司营销型网站建设和网络营销培训 | 胶水,胶粘剂,AB胶,环氧胶,UV胶水,高温胶,快干胶,密封胶,结构胶,电子胶,厌氧胶,高温胶水,电子胶水-东莞聚力-聚厉胶粘 | 查分易-成绩发送平台官网 | 宜兴紫砂壶知识分享 - 宜兴壶人 医用空气消毒机-医用管路消毒机-工作服消毒柜-成都三康王 | 滚筒烘干机_转筒烘干机_滚筒干燥机_转筒干燥机_回转烘干机_回转干燥机-设备生产厂家 | 高压分散机(高压细胞破碎仪)百科-北京天恩瀚拓 | 2025世界机器人大会_IC China_半导体展_集成电路博览会_智能制造展览网 | 无锡装修装潢公司,口碑好的装饰装修公司-无锡索美装饰设计工程有限公司 | 健康管理师报考条件,考试时间,报名入口—首页 | 小型手持气象站-空气负氧离子监测站-多要素微气象传感器-山东天合环境科技有限公司 | 楼承板-开闭口楼承板-无锡海逵楼承板 | 网站建设-高端品牌网站设计制作一站式定制_杭州APP/微信小程序开发运营-鼎易科技 | 澳洁干洗店加盟-洗衣店干洗连锁「澳洁干洗免费一对一贴心服务」 干洗加盟网-洗衣店品牌排行-干洗设备价格-干洗连锁加盟指南 | 钢格板|镀锌钢格板|热镀锌钢格板|格栅板|钢格板|钢格栅板|热浸锌钢格板|平台钢格板|镀锌钢格栅板|热镀锌钢格栅板|平台钢格栅板|不锈钢钢格栅板 - 专业钢格板厂家 | 综合管廊模具_生态,阶梯护坡模具_检查井模具制造-致宏模具厂家 | 中式装修设计_全屋定制家具_实木仿古门窗花格厂家-喜迎门 | 样品瓶(色谱样品瓶)百科-浙江哈迈科技有限公司 | 电渗析,废酸回收,双极膜-山东天维膜技术有限公司 | 变频器维修公司_plc维修_伺服驱动器维修_工控机维修 - 夫唯科技 变位机,焊接变位机,焊接变位器,小型变位机,小型焊接变位机-济南上弘机电设备有限公司 | 成人纸尿裤,成人尿不湿,成人护理垫-山东康舜日用品有限公司 | 炭黑吸油计_测试仪,单颗粒子硬度仪_ASTM标准炭黑自销-上海贺纳斯仪器仪表有限公司(HITEC中国办事处) | 物联网卡_物联网卡购买平台_移动物联网卡办理_移动联通电信流量卡通信模组采购平台? | 高考志愿规划师_高考规划师_高考培训师_高报师_升学规划师_高考志愿规划师培训认证机构「向阳生涯」 | 一体式钢筋扫描仪-楼板测厚仪-裂缝检测仪-泰仕特(北京) | 进口便携式天平,外校_十万分之一分析天平,奥豪斯工业台秤,V2000防水秤-重庆珂偌德科技有限公司(www.crdkj.com) | 电缆桥架生产厂家_槽式/梯式_热镀锌线槽_广东东莞雷正电气 | 干粉砂浆设备-干粉砂浆生产线-干混-石膏-保温砂浆设备生产线-腻子粉设备厂家-国恒机械 | 通辽信息港 - 免费发布房产、招聘、求职、二手、商铺等信息 www.tlxxg.net | 北京四合院出租,北京四合院出售,北京平房买卖 - 顺益兴四合院 | 播音主持培训-中影人教育播音主持学苑「官网」-中国艺考界的贵族学校 | KBX-220倾斜开关|KBW-220P/L跑偏开关|拉绳开关|DHJY-I隔爆打滑开关|溜槽堵塞开关|欠速开关|声光报警器-山东卓信有限公司 | 组织研磨机-高通量组织研磨仪-实验室多样品组织研磨机-东方天净 传递窗_超净|洁净工作台_高效过滤器-传递窗厂家广州梓净公司 | 海南在线 海南一家| 齿轮减速马达一体式_蜗轮蜗杆减速机配电机-德国BOSERL齿轮减速电动机生产厂家 | 旋片真空泵_真空泵_水环真空泵_真空机组-深圳恒才机电设备有限公司 | 高压贴片电容|贴片安规电容|三端滤波器|风华电容代理南京南山 | 北京网站建设|北京网站开发|北京网站设计|高端做网站公司 |