响应式页面设计小结

1.　　<meta name=”viewport” content=”width=device-width, initial-scale=1″ />

               网页宽度默认等于屏幕宽度（width=device-width），原始缩放比例（initial-scale=1）为1.0，即网页初始大小占屏幕面积的100%。==> ie9+,现代浏览器

                IE6、7、8  ==>  下载 css3-mediaqueries.js。

　　<!–[if lt IE 9]>
              <script src=”http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js”></script>
        <![endif]–>

               2. 页面元素不指定绝对因素，如 px

　　绝对宽度    ：width:20px;  //摒弃

                     百分比宽度：width: 10%；||  width:auto;

              3. 相对大小的字体

                     font-size:16px; //摒弃

                     font-size:1em;

            4. 流动布局（fluid grid）

                  区块的位置浮动

　　.right{
             float: right;
             width: 70%;
         }

       .left{
             float: left;
             width: 25%;
       }

              不会在水平方向overflow（溢出），避免了水平滚动条的出现。

             避免过多使用绝对定位

         5. media query

             自动探测屏幕宽度，然后加载相应的CSS文件。

<link rel=”stylesheet” type=”text/css”  media=”screen and (max-device-width: 400px)”   href=”tinyScreen.css” />   //选择性载入css文件

             <link rel=”stylesheet” type=”text/css”  media=”screen and (min-width: 400px) and (max-device-width: 600px)”   href=”smallScreen.css” />

            除了用html标签加载CSS文件，还可以在现有CSS文件中加载。

           @import url(“tinyScreen.css”) screen and (max-device-width: 400px);

           6. CSS的@media规则

              同一个CSS文件中，也可以根据不同的屏幕分辨率，选择应用不同的CSS规则。

　　@media screen and (max-device-width: 400px) {

               .column {
                     float: none;
                     width:auto;
                 }

              #sidebar {
                    display:none;
               }

       }

           7. 图片的自适应（fluid image）

                 除了布局和文本，”自适应网页设计”还必须实现图片的自动缩放。

　　img { max-width: 100%;}   ||   img, object { max-width: 100%;}

　   老版本的IE不支持max-width，所以只好写成： img { width: 100%; }

               此外，windows平台缩放图片时，可能出现图像失真现象。这时，可以尝试使用IE的专有命令：

　　img { -ms-interpolation-mode: bicubic; }

              或者，Ethan Marcotte的imgSizer.js。

　　addLoadEvent(function() {

               var imgs = document.getElementById(“content”).getElementsByTagName(“img”);

              imgSizer.collate(imgs);

      });