移動端 項目總結

　　前言：剛完成一個簡單的移動端項目，單從佈局上來講，跟pc端的方法大體相同。

　　移動端的頁面排版更簡單一些，基本以單行爲基礎，逐行排版。惟一要注意的尺寸問題，因爲移動設備的尺寸大小各不相同，因此要考慮一個適應主流移動設備寬度的頁面排版。通常最經常使用的就是行居中效果，這樣排版通常不會由於屏幕寬度過小而出現擠壓的問題。

　　這裏還要提到一個移動設備的縮放問題。作出來的頁面可能沒法徹底適合移動設備的屏幕寬度，所以須要在html文檔中聲明設備寬度：

1 <meta name="viewport" content="width=750,maximum-scale=1,user-scalable=no">

　　

　　動態設置頁面尺寸

　　一般的元素尺寸單位通常會使用「px」像素。另外有一個基於根節點的尺寸單位「rem」。其特色是根據根節點所設置的大小，折算出元素的大小。

1 <style>
2 html{
3     font-size:100px;
4     }
5 
6 p{
7     font-size:0.2rem;
8     }
9 </style>

這裏的p標籤算出的大小是 100px * 0.2 =20px。這樣設置的好處是當頁面大小發生改變的時候，能夠設置根節點的基礎尺寸大小，而等比例地改變頁面內容的大小。

 

　　結合@media方法設置頁面大小：

 1 <style>
 2     @media (min-width:768px){
 3     html {
 4         font-size: 100px;
 5         }
 6     }    
 7     @media (max-width: 768px){
 8      html {
 9          font-size: 50px;     
10           }   
11     }    
12     p{
13         font-size: 20rem;
14         }
15 </style>