1.媒体查询

在进行WEB程序设计时,针对同一个网站有不同的使用设备,如桌面PC,移动设备,IPD和不同的分辨率,怎样设计针对这不同设备的网页呢?采用媒体查询,即大家所说的响应式WEB编程。下面介绍如何实现这个功能.

1.1创建内容和HTML

在head元素中添加<meta name=”viewport” content=”width=device-width,initial-scale=1.0″ />.

在页面底部添加对respond.js的请求，从而让媒体查询对IE8及以下版本也有效,这个script元素放在条件注释里,只有Internet Explorer 8 以下会加载respond.js

<!–[if lte IE 8]>

   <script src=”assets/js/respond.js”><script>

<![end if]–>

1.2选择设计实现方法

为所有设备建立基准样式，再从小屏幕(移动)做起,逐渐覆盖到大屏幕(桌面)。

(1)首先为所有设备提供基准样式.这通常包括基本的字体格式、颜色、外边距、内边距，但不包含元素的浮动和定位。内容将按照常规的文档流由上到下显示。网站对所有设备都具有可访问性.

(2)从这种样式开始，使用媒体查询逐渐为更大的屏幕定义样式。大多时候,min-width和max-width媒体查询是主要的工具。

这种方法通常称为移动优先的响应式Web设计，这种方法遵循渐进增强的原则,因此在WEB圈子里具有很大的吸引力

/*————-基准样式———–*/

body{

        color:#1d3d76

        font:100% “Trebuchet MS”,Verdana,sans-serif;

}

h1,h2,h3,h4,h5,h6,.logo{

   color:#b74e07

  font-weight:bold;

}

h1{

    font-size:1.25em;/*24px/16px*/

    text-transform:lowercase;

}

 .nav li{

      display:inline;

     font-size:.7em;

}

/*————-大于等于320px—————-*/

@media only screen and (min-width:320px){

              .photo{

                      float:left;

               }

}

/*—————大于等于480px—————–*/

@media only screen and (min-width:480px){

         .intro{

               margin:-.9% 0 0 110px;

           }

          .entry .date{

                margin:0;

               text-align: right;

               position: relative;

               top: -1em;

          }

          #main .contiued{

                 margin-top: -1%;

                 text-align: right;

          }

}

/*—————大于等于600px—————–*/

@media only screen and (min-width:600px){

}

/*—————600px到767px之间—————–*/

@media only screen and (min-width:600px) and (max-width:767px){

}