Super xing

css3 利用@Media Queries 实现响应式设计

06 Mar 2015

  • 早之前我问过别人一个问题，运行响应式布局来开发页面，和针对不同的客户端开发相对应的页面，那个成本高！现在想起来，这个问题真的很傻。

  • 在 CSS2 中，你可以为不同的媒介设备（如屏幕、打印机）指定专用的样式表，而现在借助 CSS3 的 Media Queries 特性，可以更为有效的实现这个功能。你可以为媒介类型添加某些条件，检测设备并采用不同的样式表。

Max Width

  • 下面的样式会在可视区域的宽度小于 600px 的时候被应用。

       @media screen and(max-width:600){
     .class{
        background:#ccc;
      }
   }

  • 如果你想连接一个单独的样式表，把下面的代码挡在head里就行了

      <link rel="stylesheet" media="screen and (max-width: 600px)" 
  href="small.css" />

min Width

  • 下面的样式会在可视区域的宽度大于 900px 的时候被应用

       @media screen and(min-width)(min-width:900px){
    baby{
       background:#666;
    }
   } ### Multiple Media Queries

  • 你还可以使用过个匹配条件，下面的样式会在可视区域的宽度在 600px 和 900px 之间的时候被应用。

       @media screen and (min-width:600px) and (max-width:900px){
      bady{
       backgroud:#333;
     }
   }

Device Width

  • 下面的样式会在 max-device-width 是 480px 的设备上触发。（提示：max-device-width 是设备的实际分辨率，而 max-width 指的是可视区域分辨率。） 

        @media screen and (max-device-width){
      bady{
        background:#ddd
      {
    }

专门样式

  • 还可以为某一设备制定样式，不如iphone4s

      <link rel="stylesheet" media="only screen and (-webkit-min
  -device-pixel-ratio: 2)" type="text/css" href="iphone4.css" />

  • for ipad

      <link rel="stylesheet" media="all and (orientation:portrait)" 
   href="portrait.css">
    
  <link rel="stylesheet" media="all and (orientation:landscape
  )" href="landscape.css">

Media Queries for IE

Hicksdesign

  • 大尺寸: 3 列侧栏
  • 较小尺寸: 2 列表侧栏 (中间一列下降到左边的列)
  • 更小尺寸: 1 列侧栏 (右列上移到标志下方)
  • 最小尺寸: 没有侧栏 (LOGO及右列上移，其他侧边栏列移到底部)

Colly

  • 页面的布局会根据浏览器的尺寸在1列，2列和4列之间切换。

A List Apart

  • 大尺寸: 导航在顶部，图片只有一行。
  • 中等尺寸: 导航在左边，图片变成3列。
  • 小尺寸: 导航在顶部，LOGO没有了背景图片，图片变成3列。

Tee Gallery

  • 这个和前面的 Colly 很像，不过这个案例中的图片也会随着布局的变化而变化。技巧是使用百分比设置元素的宽度。
Edit - Tweet
#css3 #响应式布局