CSS3中使用媒体查询（media query）适配布局

1，媒体查询的作用

@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位）  检查是否支持彩色输出（比如是不是黑白打印），
 或者支持的颜色数量
虽然有这么多媒体特性，但目前最流行最常用的是如下几个：
max-device-width：用于创建手机版网站
max-width：用于针对窗口宽度设定不同的样式
orientation：用于根据平板电脑或iPad的横向或者竖向来改变布局

3，使用样例一

默认情况下左栏的背景色是黄色的，当浏览器窗口小于400像素时，左栏的背景色变成橙色。当窗口继续缩小，小于300像素时，左栏的背景色变成红色。

 

 

<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

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 h2 {
  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 h3 {
  color: #24486C;
  margin-bottom: 2px;
  font-size: medium;
}
 
.Content p {
  margin-top: 0px;
}
 
header.ArticleHeader {
  padding: 10px;
  margin: 10px;
  text-align: center;
}
 
header.ArticleHeader h2 {
  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;
}

页面代码：

<!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 关键字拼接媒体查询块

/** 正常样式 **/
 
@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 关键字（下面这个功能效果与上面那个一样）

/** 正常样式 **/
 
@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像素时，会应用新样式并与原来已存在的样式叠加。
<head>
  <link rel="stylesheet" href="hangge.css">
  <link rel="stylesheet" media="(max-width: 568px)" href="hangge_small.css">
</head>

（2）下面样例让几个样式完全独立，不叠加

<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不理解媒体查询就会忽略这两个样式表，所以我们需要使用条件注释引入标准样式表：

<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手机（不管横向还是竖向）：

<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的方向应用不同的样式：

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像素或更小）的设备也适用）

 

时间： 2024-10-31 04:47:56

CSS3中使用媒体查询（media query）适配布局的相关文章

响应式设计的思考:媒体查询(media query)

文章简介:媒体查询与http请求 Jason Grigsby发表了篇文章,<CSS Media Query for Mobile is Fool's Gold>对媒体查询(media query)吐槽,大意是在移动设备上使用媒体查询会造成很多资源的浪费--浏览器请求到很多用不到的图片等资源,然后写了一些测试用例测试一些可用方法.然后Tim Kadlec写了篇<Media Query & Asset Downloading Results>,用js自动化的测试了Jason G

《jQuery Mobile快速入门》—— 2.6　带有媒体查询的响应式布局

2.6 带有媒体查询的响应式布局 jQuery Mobile快速入门 要使用jQuery Mobile来创建响应式设计,建议使用CSS3 Media Queries1.例如,如果你打算为一个特定设备的朝向增强布局,你可以使用媒体查询来检测设备的朝向,然后根据需要应用你的 CSS修改. 在某些情况下,jQuery Mobile将会为你创建响应式设计.下面将讲解jQuery Mobile的响应式设计如何良好地应用于竖屏(portrait)模式和横屏(landscape)模式中的表单字段.例如,在竖屏

CSS3中如何充分使用视窗单位来布局

容易忽略的七个CSS非常有用的单位 http://www.111cn.net/cssdiv/css/87284.htm 视窗(Viewport)单位已经有了好几年了,但我们并没有看到它被经常使用.它们现在正在被所有的主流浏览器所支持并提供独特的功能使它在特定情况下非常有用,特别是那些涉及响应式的设计. 介绍视窗(Viewport)单位 视窗(Viewport)是你的浏览器实际显示内容的区域--换句话说是你的不包括工具栏和按钮的网页浏览器.这些单位是vw,vh,vmin和vmax.它们都代表了浏览

media query(媒体查询)和media type(媒体类型)

网页制作Webjx文章简介:media type与media query. media type(媒体类型)是css 2中的一个非常有用的属性,通过media type我们可以对不同的设备指定特定的样式,从而实现更丰富的界面.media query(媒体查询)是对media type的一种增强,是CSS 3的重要内容之一.随着移动互联网的发展,media query开始得到大家的重视. media type 让我们先了解一下media type,其实这个大家会比较熟悉一点,我们通常会用到的med

CSS3的media query学习攻略

  一个媒体查询(media query)包含一个媒体类型(media type)和至少一个表达式,用媒体特性限制样式表的作用范围. 语法 媒体查询包含一个媒体类型(media type)以及一个到多个测试媒体特性(media feature)的表达式,表达式和媒体类型将根据实际情况计算的到true或者false.如果指定的媒体类型符合当前设备并且媒体特性表达式都为真,那当前媒体查询为真. 当一个media query为true时,对应的样式表按照正常样式规则生效.指定了media query的

媒体查询与http请求

Jason Grigsby发表了篇文章,<CSS Media Query for Mobile is Fool's Gold>对媒体查询(media query)吐槽,大意是在移动设备上使用媒体查询会造成很多资源的浪费--浏览器请求到很多用不到的图片等资源,然后写了一些测试用例测试一些可用方法.然后Tim Kadlec写了篇<Media Query & Asset Downloading Results>,用js自动化的测试了Jason Grigsby的用例. 本文主要整理

如何将CSS媒体查询用于桌面网站、移动电话和平板电脑

实现响应式设计的主要途径是使用 CSS 媒体查询.在本文中,我们将了解如何将媒体查询用于桌面网站.http://www.aliyun.com/zixun/aggregation/28200.html">移动电话和平板电脑. 现今每天都有更多的手机和平板电脑问市.消费者能够拥有可想象到的各种规格和形状的设备,但是网站开发人员却面临一个挑战:如何使他们的网站在传统浏览器.手机和平板电脑浏览器上有很好的效果,如何在各种大小的屏幕上提供一流的用户体验,答案是:采用响应式设计.响应式设计可以随所显示

Bootstrap 网格系统（Grid System）的工作原理 - 媒体查询

媒体查询 媒体查询是非常别致的"有条件的 CSS 规则".它只适用于一些基于某些规定条件的 CSS.如果满足那些条件,则应用相应的样式. Bootstrap 中的媒体查询允许您基于视口大小移动.显示并隐藏内容.下面的媒体查询在 LESS 文件中使用,用来创建 Bootstrap 网格系统中的关键的分界点阈值. /* 超小设备(手机,小于 768px) */ /* Bootstrap 中默认情况下没有媒体查询 */ /* 小型设备(平板电脑,768px 起) */ @media (min

响应式布局该怎么设计？CSS3 Media Query实现响应布局

文章简介:响应式布局的小事就这么多,如你有好的补充意见或不同的见解,可以联系我,我们一起探讨这件小事-- 讲到响应式布局, 相信大家都有一定的了解,响应式布局是今年很流行的一个设计理念,随着移动互联网的盛行,为解决如今各式各样的浏览器分辨率以及不同移动设备的显示效果, 设计师提出了响应式布局的设计方案.今天就和大家来讲讲响应式布局这件小事,包含什么是响应式布局.响应式布局的优点和缺点以及响应式布局该怎么设计(通 过CSS3 Media Query实现响应布局). 一.什么是响应式布局? 响应式布