Responsive Web design 基于CSS3的 Media Queries 属性.

但是IE678 是不支持 Media Queries属性:
只能加入: media-queries.js 或者 respond.js

<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>

Media Queries 媒体查询 这个属性 告诉浏览器 在一定条件下,如何进行渲染web页面.

平时Head里面看到的: 或者这样的形式:

其中两种方式引入CSS样式都有一个共同的属性“media”,而这个“media”就是用来指定特定的媒体类型

“在CSS3中我们可以设置不同类型的媒体条件,
并根据对应的条件,给符合条件的媒体调用相对应的样式表”。

最常见的是 给 pc 和 移动设备 设置不同的样式表.可以让你适配不同的分辨率.

 <link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" /> 当页页宽度小于或等于600px,调用small.css样式表来渲染你的Web页面。
  1. screen 一种媒体类型.
  2. and 关键字
  3. max-width:600px 媒体特征(条件)

媒体类型 Media Type all 全部 screen 屏幕 print 打印/打印预览

媒体类型的引入方法

  1. link  <link rel="stylesheet" type="text/css" href="../css/print.css" media="print" />

  2. xml <?xml-stylesheet rel="stylesheet" media="screen" href="css/style.css" ?>

  3. @import
  4. 一种是在样式文件中通过@import调用别一个样式文件;

    @import url(“css/reset.css”) screen; @import url(“css/print.css”) print;

  • 另一种方法是 在<head>>/head>中的<style>…</style>中引入,

  1. @media引入
  • 样式文件中使用:    @media screen{      选择器{     属性:属性值;      }    }
  • 在<head>>/head>中的<style>…</style>中调用:

      <head>       </head>        

媒体特征 Meida Query

CSS3中的Media Queries增加了更多的媒体查询,同时你可以添加不同的媒体类型的表达式用来检查媒体是否符合某些条件,如果媒体符合相应的条件,那么就会调用对应的 样式表。

下面代码 就是当 浏览器的 可视宽度 小于等于980 时 就转成流动式布局. 本来是 固定布局的.

/*=======等于或小于980px=====*/
    @media screen and (max-width:980px){
      #pagewrap {
        width: 94%;
      }
      #content {
        width: 65%;
      }
      #sidebar {
        width: 30%;
      }
    }  

浏览器可视化大小等于或小于700px时,把“#content”和“#sidebar”的宽度设为“auto”并把他们的“float”重置为“none”,也就成了一列的满屏显示,具体代码如下:

 /*=======等于或小于700px========*/
    @media screen and (max-width:700px) {
      #content ,
      #sidebar{
        float: none;
        wdith: auto;
      }
    } 

最后我们在一起来看一下手机上的渲染:当显示器可视大小等于或小于480px时,将“#header”的高度重置为“auto”,并把“h1”的字号重置为“24px”,最后在把“#sidebar”给隐藏了

 /*=======等于或小于480px========*/
    @media screen and (max-width:480px) {
      #header {
        height: auto;
      }
      h1 {
        font-size: 24px;
      }
      #sidebar {
        display: none;
      }
    }

灵活的图片 图片也是个重点. 超大的图片 回破坏我们的布局.

早期改变图片 width height 属性也不好.

还有种方法 就是用 CSS 来控制. 使用CSS中的“overflow:hidden”将超出的图片部分进行剪切,随着他的容器转变,以达到新的显示效果。

如果有些图片不是很得要的话,我们还可以考虑使用“Media Queries”在不需要图片显示的情况下,把图片隐藏起来。

Media Queries是CSS3之中的一个新增属性,也是Responsive设计中令人最兴奋的一个功能。

大家需要注意一点Media Queries不是专门的解决移动设备和平板设备的布局。相反,Media Queries和Responsive的配合

Responsive 响应式设计, 非常流行. 如何断点, 怎么入手….

Responsive design 的断点都依赖CSS3 的 Media Queries 来决断.


CSS Media Queries 片段.

iphone5:

@media screen and (device-aspect-ratio: 40/71) {}

ipad in landscape ~~~ @media only screen and (min-device-width : 768px) and (max-devixe-width : 1024px) and (orientation: portrait) { // CSS style }

max-width @media screen and (max-width: 600px) { //你的样式放在这里…. }

min-width

@media screen and (min-width: 900px) { //你的样式放在这里… }

max-width & min-width 混用.

@media screen and (min-width: 600px) and (max-width: 900px) { //你的样式放在这里… }

同时CSS3 Media Queries还能查询设备的宽度“device-width”来判断样式的调用,这个主要用在iPhone,iPads设备上,比如像下面的应用:

/* iPads (landscape) */
        @media screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
            //你的样式放在这里...
        }
        /* iPads (portrait) */
        @media screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
            //你的样式放在这里...
        }

针对移动设备的运用,如果你想让样式工作得比较正常,需要在“<head>”添加“viewport”的meta标签:

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

调用不同的样式表

<link rel="stylesheet" media="screen and (min-device-width : 320px) and (max-device-width: 480px)" href="iphone.css" />
        <link rel="stylesheet" media="screen and (min-device-width : 768px) and (max-device-width : 1024px)" href="ipad.css" />

CSS3 Media Queries在标准设备上的运用

下面我们一起来看看CSS3 Meida Queries在标准设备上的运用,大家可以把这些样式加到你的样式文件中,或者单独创建一个名为“responsive.css”文件,并在相应的条件中写上你的样式,让他适合你的设计需求:

1024px显屏 @media screen and (max-width : 1024px) { /* CSS Styles */ }

800px显屏 @media screen and (max-width : 800px) { /* CSS Styles */ }

iPad横板显屏

@media screen and (max-device-width: 1024px) and (orientation: landscape) {
            /* CSS Styles */
        }

、iPad竖板显屏

@media screen and (max-device-width: 768px) and (orientation: portrait) {
            /* CSS Styles */
        }