淺談移動端開發頁面
之前介紹一篇文章是：響應式web實戰總結 已經介紹了一些知識點，這裡就不多介紹了；我們這邊來了解下如何使用媒體查詢寫不同的css樣式；針對響應式web設計開發，使用媒體查詢來適應不同的手機螢幕樣式開發時，我們需要寫不同的樣式，為此我們來分享下我個人開發響應式web頁面的經驗；針對目前手機的獨立畫素有320，360，384，400，還有iphone6+是414的獨立畫素，因此我們只需要針對目前這幾種匹配即可；如下:
- 針對手機獨立畫素是360 ~399等螢幕的寬度
/*
* 但是邊距 字型大小等還是安裝360px來計算
*/
@media (min-width:360px) and (max-width: 399px) {}
2. 針對手機獨立畫素是320~359之間的
/* min-width:320px
* 針對裝置獨立畫素為320px 的css
* min-width:320 和 max-width:359之間
*/
@media (min-width: 320px) and (max-width:359px){}
3. 針對裝置獨立畫素為400px以上的樣式。
/*
* 針對裝置獨立畫素為400px，邊距等等都按400px來計算
*/
@media (min-width: 400px) and (max-width:450px){}
4. 針對裝置獨立畫素為640px ~ 999px的css
/* min-width:640px
* 針對裝置獨立畫素為640px 的css
* min-width:640 和 max-width:999之間
* 邊距等按640px來計算
*/
@media (min-width: 640px) and (max-width:999px){}
5. 但是在PC端，我們為了適應PC端，所以針對寬度為1000以上也做一個顯示處理。
/* 最小寬度1000樣式
*為了適應PC端 所以PC端在設計時候 預設以1000px來設計的
*/
@media screen and (min-width:1000px) {}
一：使用rem來設定字型
為了方便計算字型，我們來設定瀏覽器10px，我們都知道瀏覽器預設的畫素是16px，因此我們需要對html{font-size:62.5%;} // 10 / 16 = 62.5%;
首先假如設計搞在移動端上是按照750px設計稿上的話，假如字型在750px下字型大小我們使用rem來寫大小；那麼他們的字型大小在各個獨立畫素下如下計算：
- 針對裝置獨立畫素為640px ~ 999px的css
@media (min-width:640px) and (max-width: 999px) {
/* 750/640 = 1.17*/
html{font-size: 53.42%;} /*62.5% / 1.17 */
}
@media (min-width: 400px) and (max-width:450px){
/* 750 / 400 = 1.875 */
html{font-size:33.33% } /* 62.5% / 1.875 */
}
@media (min-width:360px) and (max-width: 399px) {
/* 750 / 360 = 2.08 */
html{font-size:30%} /* 62.5% / 2.08 */
}
@media (min-width: 320px) and (max-width:359px){
/* 750/320 = 2.34 */
html{font-size: 26.7%} /* 62.5 / 2.34 */
}
二： 針對寬度，高度，background-size, margin及padding的計算方法；
假如在750px下的寬度是132px；高度是132px；background-size:132px 132px; margin:20px;Padding:20px;
針對裝置獨立畫素為640px ~ 999px的css
@media (min-width:640px) and (max-width: 999px) {
/* 750/640 = 1.17*/
html{font-size: 53.42%;} /*62.5% / 1.17 */
// 下面的屬性都是 本身的畫素 / 1.17 得來的
width: 112.82px; // 132 / 1.17
height:112.82px; // 132 / 1.17
background-size:112.82px 112.82px; // 132 / 1.17
margin:17.09px; // 20 / 1.17
padding:17.09px; // 20 / 1.17
}
@media (min-width: 400px) and (max-width:450px){
/* 750 / 400 = 1.875 */
html{font-size:33.33% } /* 62.5% / 1.875 */
// 下面的屬性都是 本身的畫素 / 1.875 得來的
width: 70.4px; // 132 / 1.875
height: 70.4px; // 132 / 1.875
background-size: 70.4px 70.4px; // 132 / 1.875
margin:10.67px; // 20 / 1.875
padding: 10.67px; // 20 / 1.875
}
@media (min-width:360px) and (max-width: 399px) {
/* 750 / 360 = 2.08 */
html{font-size:30%} /* 62.5% / 2.08 */
// 下面的屬性都是 本身的畫素 / 2.08 得來的
width: 63.46px; // 132 / 2.08
height: 63.46px; // 132 / 2.08
background-size: 63.46px 63.46px; // 132 / 2.08
margin:9.62px; // 20 / 2.08
padding: 9.62px; // 20 / 2.08
}
@media (min-width: 320px) and (max-width:359px){
/* 750/320 = 2.34 */
html{font-size: 26.7%} /* 62.5 / 2.34 */
width: 56.41px; // 132 / 2.34
height: 56.41px; // 132 / 2.34
background-size: 56.41px 56.41px; // 132 / 2.34
margin:8.55px; // 20 / 2.34
padding: 8.55px; // 20 / 2.34
}
但是有時候在小螢幕下字型太小了，使使用者看起來太吃力，我們可以針對小螢幕下適當掉大一點即可；