CSS3 Media Queries 实现响应式demo

来源：互联网发布：qq手机型号修改软件编辑：程序博客网时间：2024/04/30 11:39

现在屏幕分辨率的范围很大，从 320px (iPhone) 到 2560px (大型显示器)，甚至更大。用户也不只是使用台式电脑访问web站点了，他使用手机、笔记本电脑、平板电脑。所以传统的设置网站宽度为固定值，已经不能满足需要了。web设计需要适应这种新要求，页面布局需要能够根据访问设备的不同分辨率自动进行调整。本教程将会向你介绍，如何使用html5和CSS3 Media Queries完成跨浏览器的响应式设计。

demo：

<!DOCTYPE html>  <head>  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  <title>Media Query Demos</title>  <style type="text/css">  .wrapper {      border: solid 1px #666;       padding: 5px 10px;      margin: 40px;  }    .viewing-area span {      color: #666;      display: none;  }    /* max-width */  @media screen and (max-width: 600px) {      .one {          background: #F9C;      }      span.lt600 {          display: inline-block;      }  }    /* min-width */  @media screen and (min-width: 900px) {      .two {          background: #F90;      }      span.gt900 {          display: inline-block;      }  }    /* min-width & max-width */  @media screen and (min-width: 600px) and (max-width: 900px) {      .three {          background: #9CF;      }      span.bt600-900 {          display: inline-block;      }  }    /* max device width */  @media screen and (max-device-width: 480px) {      .iphone {          background: #ccc;      }  }  </style>  </head>    <body>      <div class="wrapper one">This box will turn to pink if the viewing area is less than 600px</div>      <div class="wrapper two">This box will turn to orange if the viewing area is greater than 900px</div>      <div class="wrapper three">This box will turn to blue if the viewing area is between 600px and 900px</div>      <div class="wrapper iphone">This box will only apply to devices with max-device-width: 480px (ie. iPhone)</div>      <p class="viewing-area">          <strong>Your current viewing area is:</strong>          <span class="lt600">less than 600px</span>          <span class="bt600-900">between 600 - 900px</span>          <span class="gt900">greater than 900px</span>      </p>  </body>  </html>

阅读全文

0 0