pc端適配移動端

pc端和移動端共用一套代碼

1. 容許網頁寬度自動調整

在網頁代碼的頭部,加入一行viewport元標籤
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
全部主流瀏覽器都支持這個設置,包括IE9。對於那些老式瀏覽器(主要是IE六、七、8),須要使用 css3-mediaqueries.js

2. 不使用絕對寬度

因爲網頁會根據屏幕寬度調整佈局,因此不能使用絕對寬度的佈局,也不能使用具備絕對寬度的元素。這一條很是重要,能夠用 width:~%或者
width:auto;

3. 相對大小的字體

  • 字體也不能使用絕對大小(px),而只能使用相對大小(em)
body {
    font:normal100%Helvetica,Arial,sans-serif;
}
  • 上面的代碼指定,字體大小是頁面默認大小的100%,即16像素
h1{
    font-size:1.5em;
}
  • 而後,h1的大小是默認大小的1.5倍,即24像素(24/16=1.5)
small{
    font-size:0.875em;
}
  • small元素的大小是默認大小的0.875倍,即14像素(14/16=0.875)

4. 流動佈局fluidgrid

「流動佈局」的含義是,各個區塊的位置都是浮動的,不是固定不變的
.main{
    float:right;
    width:70%;
}
.leftBar{
    float:left;
    width:25%;
}
float的好處是,若是寬度過小,放不下兩個元素,後面的元素會自動滾動到前面元素的下方,不會在水平方向overflow(溢出),避免了水平滾動條的出現,另外,絕對定位 (position:absolute)的使用,也要很是當心

5. 選擇加載CSS

「自適應網頁設計」的核心,就是CSS3引入的MediaQuery模塊
<media="screenand(max-device-width:400px)" href=」tinyScreen.css」/>
若是屏幕寬度在400像素到600像素之間,則加載smallScreen.css文件

6. CSS的@media規則

同一個CSS文件中,也能夠根據不一樣的屏幕分辨率,選擇應用不一樣的CSS規則
// 屏幕寬度小於400像素
@mediascreenand(max-device-width:400px){
    .column{
        float:none;
        width:auto;
    }
    #sidebar{
        display:none;
    }
}

7. 圖片的自適應(fluidimage)

圖片的自動縮放 img,object{max-width:100%;}老版本的IE不支持max-width,因此只好寫成 img{width:100%;}
windows平臺縮放圖片時,可能出現圖像失真現象。這時,能夠嘗試使用IE的專有命令: img{-ms-interpolation-mode:bicubic;}
或者, EthanMarcotteimgSizer.js
addLoadEvent(function(){
    varimgs=document.getElementById(「content」).getElementsByTagName(「img」);
    imgSizer.collate(imgs);
});
相關文章
相關標籤/搜索