移動端 項目總結

標籤：

　　前言：剛完成一個簡單的移動端項目，單從布局上來說，跟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>

 

移動端 項目總結