CSS3 - 使用媒体查询(media query)适配布局
1,媒体查询的作用
1
2 3 |
@media (media-feature-name: value) { /* 符合条件时应用的样式 */ } |
上面是媒体查询的基本结构,根据查看网页的设备的某些重要信息(比如屏幕大小、分辨率、颜色位深等),页面可以分别应用不同的样式甚至替换整个样式表。
如果浏览器当前的条件与圆括号中的条件匹配,它就会采用花括号中的那些样式。如果不匹配,浏览器会忽略这些样式。
注意:浏览器始终会采用位于@media代码块之外的样式。满足条件时的媒体查询样式是在其他样式基础上应用的。 为此,条件式媒体查询样式经常要覆盖其他样式,比如隐藏之前的可见元素,把区块移动位置,调整字号等。
2,媒体查询中最常用的媒体特性(media feature)
特性名 |
值 |
应用场景 |
width min-width max-width |
显示区域的宽度(对打印机而言是打印表面) |
改变布局以适应非常窄(如手机)或非常宽的显示器。 |
height min-height max-height |
显示区域的高度 |
改变布局以适应非常长或非常短的显示器 |
device-width min-device-width max-device-width |
当前计算机或设备屏幕的宽度 (或打印输出时纸面的宽度) |
根据不同设备(如手机)调整布局 |
device-height min-device-height max-device-height |
屏幕或纸面的高度 |
根据不同设备(如手机)调整布局 |
orientation |
landscape(横向)或portrait(纵向) |
根据设备的朝向调整布局 |
device-aspect-ratio min-device-aspect-ratio max-device-aspect-ratio |
显示区域的宽高比(1/1是正方形) |
根据窗口形状调整样式(问题可能比较复杂) |
color min-color max-color |
屏幕颜色的位深 (1位表示黑白,目前主流显示器都是24位) |
检查是否支持彩色输出(比如是不是黑白打印), 或者支持的颜色数量 |
扫描二维码关注公众号,回复:
3185091 查看本文章
虽然有这么多媒体特性,但目前最流行最常用的是如下几个:
max-device-width:用于创建手机版网站
max-width:用于针对窗口宽度设定不同的样式
orientation:用于根据平板电脑或iPad的横向或者竖向来改变布局
3,使用样例一 默认情况下左栏的背景色是黄色的,当浏览器窗口小于400像素时,左栏的背景色变成橙色。当窗口继续缩小,小于300像素时,左栏的背景色变成红色。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
<html lang= "en" > <head> <meta charset= "UTF-8" > <title>hangge.com</title> <style> * { margin : 0px ; padding : 0px ; } .leftColumn { width : 50% ; float : left ; background-color :yellow; height : 300px ; } .rightColumn { width : 50% ; float : left ; background-color : #7FFF9B ; height : 300px ; } @media ( max-width : 400px ) { .leftColumn { background-color :orange; } } @media ( max-width : 300px ) { .leftColumn { background-color :OrangeRed; } } </style> </head> <body> <div class= "leftColumn" > left </div> <div class= "rightColumn" > right </div> </body> </html> |
4,使用样例二
下面是一个经典的两栏式布局的页面,我们要通过媒体查询定义不同的样式,让其能够适应手机浏览器和桌面浏览器:
(1)默认情况下,页面分为左右两栏。左栏固定宽度,右栏自适应宽度(通过浮动和负边距实现)
(2)一般移动版网站都只用一栏,因为屏幕小,并排两栏并不好看。所以当浏览器窗口宽度小于568像素时,左侧导航栏会转移到主内容之下。(由于HTML页面中左栏是定义在主内容之下,所以只要将左右栏去掉浮动、重设栏宽(每栏占满可用宽度)即可)
样式 hangge.css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 |
article, aside, figure, figcaption, footer, header, hgroup, nav, section, summary { display : block ; } *{ margin : 0px ; padding : 0px ; } body { font-size : medium ; font-family : "Helvetica" , "Hiragino Sans GB" , "Microsoft Yahei" , sans-serif ; } a { color : #999 ; text-decoration : none ; cursor : pointer } a:hover { color : #5188a6 ; text-decoration : none } #wrapper { max-width : 853px ; } header.SiteHeader { padding : 10px ; background : #000000 ; } aside.NavSidebar { padding : 5px 15px 5px 15px ; width : 203px ; background-color : #f9f9f9 ; font-size : small ; float : left ; margin-right : -100% ; } aside.NavSidebar h 2 { color : #6B6E3F ; border-bottom : thin #6B6E3F solid ; margin-bottom : 10px ; margin-top : 20px ; } aside.NavSidebar ul { padding-left : 15px ; } aside.NavSidebar li { padding-bottom : 8px ; } .ContentOuter { float : right ; width : 100% ; } .Content { padding : 20px ; margin-left : 233px ; } @media ( max-width : 700px ) { aside.NavSidebar { float : none ; width : auto ; margin-right : auto ; } .ContentOuter { float : none ; width : auto ; } .Content { margin-left : 0px ; } } .Content h 3 { color : #24486C ; margin-bottom : 2px ; font-size : medium ; } .Content p { margin-top : 0px ; } header.ArticleHeader { padding : 10px ; margin : 10px ; text-align : center ; } header.ArticleHeader h 2 { font-size : xx-large ; } footer { background : #333333 ; color : #c0c0c0 ; padding : 10px ; text-align : center ; font-size : x-small ; clear : both ; } footer .Disclaimer { font-style : italic ; } footer p { margin : 3px ; } |
页面代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
<!DOCTYPE html> < html lang = "zh" > < head > < meta charset = "utf-8" > < title >航歌</ title > < link rel = "stylesheet" href = "hangge.css" > </ head > < body > < div id = "wrapper" > < header class = "SiteHeader" > < img src = "logo.png" alt = "hangge.com" > < h1 style = "display:none" >hangge.com</ h1 > </ header > < main class = "ContentOuter" > < article class = "Content" > < header class = "ArticleHeader" > < h2 >欢迎来到hangge.com</ h2 > </ header > < p >前面讲了如何让程序申请后台短时运行。但这个额外延长的时间毕竟有限。</ p > < br /> < h3 >小标题1</ h3 > < p >前面讲了如何让程序申请后台短时运行。但这个额外延长的时间毕竟有限。</ p > < br /> < h3 >小标题2</ h3 > < p >前面讲了如何让程序申请后台短时运行。</ p > </ article > </ main > < aside class = "NavSidebar" > < nav > < h2 >热门文章</ h2 > < ul > < li >< a href = "..." >Swift - 委托(delegate)的介绍,及使用样例</ a ></ li > < li >< a href = "..." >Swift - 让程序挂起后,能在后台继续运行任务</ a ></ li > < li >< a href = "..." >Swift - 产生不重复数字的随机数生成器</ a ></ li > < li >< a href = "..." >Swift - FTP客户端的制作(使用Rebekka库)</ a ></ li > < li >< a href = "..." >Swift - 一个简单的动画效果(方块来回反复移动)</ a ></ li > < li >< a href = "..." >More ...</ a ></ li > </ ul > </ nav > </ aside > < footer > < p class = "Disclaimer" >hangge.com 版权所有,未经允许不得转载</ p > </ footer > </ div > </ body > </ html > |
5,媒体查询的高级条件
(1)使用 and 关键字拼接媒体查询块
1 2 3 4 5 6 7 8 9 10 11 12 13 |
/** 正常样式 **/ @media ( min -width: 600px) and ( max -width: 700px) { /** 窗口宽度在600-700像素的样式 **/ } @media ( min -width: 500px) and ( max -width: 599.99px) { /** 窗口宽度在500-600像素的样式 **/ } @media ( max -width: 499.99px) { /** 窗口宽度小于500像素的样式 **/ } |
(2)使用 not 关键字(下面这个功能效果与上面那个一样)
1 2 3 4 5 6 7 8 9 10 11 12 13 |
/** 正常样式 **/ @media (not max-width : 600px ) and ( max-width : 700px ) { /** 窗口宽度在600-700像素的样式 **/ } @media (not max-width : 500px ) and ( max-width : 600px ) { /** 窗口宽度在500-600像素的样式 **/ } @media ( max-width : 500px ) { /** 窗口宽度小于500像素的样式 **/ } |
6,替换整个样式表
如果样式修改的地方很多,那么创建一个新样式表会更便于管理。创建样式表后,可以使用媒体查询创建一个样式表链接。
(1)当页面宽度小于568像素时,会应用新样式并与原来已存在的样式叠加。
1 2 3 4 |
< head > < link rel = "stylesheet" href = "hangge.css" > < link rel = "stylesheet" media = "(max-width: 568px)" href = "hangge_small.css" > </ head > |
(2)下面样例让几个样式完全独立,不叠加
1 2 3 4 |
< head > < link rel = "stylesheet" media = "(min-width: 568.01px)" href = "hangge.css" > < link rel = "stylesheet" media = "(max-width: 568px)" href = "hangge_small.css" > </ head > |
但像旧版的IE不理解媒体查询就会忽略这两个样式表,所以我们需要使用条件注释引入标准样式表:
1 2 3 4 5 6 7 |
< head > < link rel = "stylesheet" media = "(min-width: 568.01px)" href = "hangge.css" > < link rel = "stylesheet" media = "(max-width: 568px)" href = "hangge_small.css" > <!--[if lt IE 9]> <link rel="stylesheet" href="hangge.css"> <![endif]--> </ head > |
7,识别特定的移动设备
(1)检测手机
使用 max-device-width 可以区别普通计算机和移动设备。根据经验,将 max-device-width 设置为568像素就能够涵盖目前的iPhone和Android手机(不管横向还是竖向):
1 |
< link rel = "stylesheet" media = "(max-device-width: 568px)" href = "hangge_mpbile.css" > |
注意:对于高分辨率屏幕的手机上面规则也是适用的,这是由于高分屏手机引入像素比(pixel ratio)。
以iPhone5为例,虽然它的物理像素是:640像素*1136像素,但它的像素比是2(两个物理像素对应一个CSS像素)。因此其声明的CSS像素是:320像素*568像素。
(2)检测平板
对于iPad等平板,用户经常会改变方向。改变方向虽然会改变 max-width,但不会改变 max-device-width。 无论竖向还是横向,iPad始终报告自己的设备宽度为768像素。
所以我们要组合使用 max-device-width 和 orientation 属性,以便区别iPad的方向应用不同的样式:
1 2 3 4 5 6 7 |
< link rel = "stylesheet" media = "(max-device-width: 768px) and (orientation: portrait)" href = "iPad_portrait.css" > < link rel = "stylesheet" media = "(max-device-width: 768px) and (orientation: landscape)" href = "iPad_landscape.css" > |
(上面规则不仅限于iPad,其他屏幕大小类似(768像素或更小)的设备也适用)
原文出自:www.hangge.com 转载请保留原文链接:http://www.hangge.com/blog/cache/detail_1015.html