淘寶——移動端頁面終端適配
摘要：在進行移動端界面的書寫的時候，如果把寬度高度或者字體大小全部寫死的話，那么在所有手機上看到的大小都一樣，存在的問題就是同樣大小的字體，或者一個盒子模型，
在大屏幕手機上看起來會有點偏小。比如iphone6PLUS。如果是做成適配的話，就很好的解決了這個問題，大屏幕顯示的內容大一點，小屏幕顯示的小一點。
所以今天做一個移動端頁面適配的小小總結
適配的要求
1、在不同分辨率的手機上，頁面看起來是自適應的。整體效果看起來比較和諧。不會說大屏幕上看起來特別小。小屏幕上看起來特別大
2、主要是關注字體，寬高，間距，圖片大小等。
3、所提供的設計圖一般是手機分辨率的兩倍，才能方便做適配。
4、使用rem做單位，而不是傳統的px
適配的方法，3個步驟
步驟1：
設置viewport，也就是平時寫移動端頁面都要加上的：
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
步驟2、
首先我們在我們的頁面引入下面的flexible.js，
這段適配的js代碼是拿淘寶的來用的。
適配的js代碼的github地址如下：https://github.com/amfe/lib-flexible/blob/master/src/flexible.js。
步驟3、
頁面上我們的css代碼可以這樣寫，比如設計圖給我們的尺寸是750*1000的。某個容器在設計圖的寬度是150px*225px,那我們在css里面
寬度：150px/750px/10=150px/75px=2rem;
高度為：225px/75px=3rem;
一句話：布局的時候，各元素的css尺寸=設計稿標注尺寸/設計稿橫向分辨率/10；
div{
width: 2rem;
height: 3rem;
}
通過上面的3個步驟，我們就可以將我們的移動端頁面做成適配的了。
css換算方法
不過有一點，一直算來算去挺煩的。所以在寫css的時候，最好使用css預處理器，比如sass、less來寫，這樣就方便很多了。
或者在sublimeText3中安裝cssREM插件，正常書寫px單位，然后編輯器自動幫你換算成rem.
cssREM插件的安裝教程：https://github.com/flashlizi/cssrem
注意點：
容器的寬度高度我們用rem為單位，但是字體大小font-size我們還是用px,而不是用rem
原因：
flexible.js的作者winter是這樣解釋的：考慮到字體的點陣信息，一般文字尺寸多會采用 16px 20px 24px等值，若以rem指定文字尺寸，會產生諸如21px，19px這樣的值，會導致字形難看，毛刺，甚至黑塊，故大部分文字應該以px設置。
一般標題類文字，可能也有要求隨屏幕縮放，且考慮到這類文字一般都比較大，超過30px的話，也可以用rem設置字體。
適配中背景圖片的處理
1、如何使用background-size
因為是使用了rem來做單位，我們在寫移動端的背景圖的時候，一般使用background-size來控制大小，那要怎么來換算呢？
換算單位如下：
background-size=背景圖的大小/該設計圖的寬度*10
打個比方：我的背景圖是16*18，設計圖是按照640的寬度來設計的。那么我的background-size值為
background-size: 16/640*10rem 16/640*10rem 也就是 background-size:0.25rem 0.28125rem;
通過這樣控制之后，我們的背景圖也做到了適配的效果
2、雪碧圖的適配！！！！
剛開始做適配的時候，有一件事是比較頭疼的，那就是雪碧圖的適配，主要是background-size和background-position的配置比較煩。那么怎么進行在使用fexible.js的時候適配雪碧圖呢，方法如下：
假如我有下面這張雪碧圖，設計圖給我的是按640的分辨率來做的。
這張雪碧圖的大小為200px*458px
假設現在我們要用的那個勛子的背景圖。分為以下幾步：
1、測量勛字這張背景圖的大小，大小為：75px*85px
2、測量這個勛字在雪碧圖的位置，也就是設置background-position:.經測量，他在雪碧圖的位置為 x:-123px，y:-7px
3、對着張雪碧圖進行換算：看下面代碼：
知道了上面的尺寸，我們就行換算即可，將每個值除以640再乘以10 為什么這么算，可以看看源碼
要使用這樣雪碧圖：
|
1
2
3
4
5
6
7
8
9
10
|
<!-- 長寬為： -->
width: 75/640*10=1.171875rem;
height: 85/640*10=1.328125rem;
<!-- background-size為 -->
<!-- 因為整張雪碧圖的寬度為200px, -->
background-size: 200/640*10rem auto;
<!-- background-position為： -->
background-position: -123/640*10rem -7/640*10rem;
|
html:
|
1
|
<
i
class="item1"></
i
>
|
css：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
.item
1
{
width
:
75
/
640
*
10
=
1.171875
rem;
height
:
85
/
640
*
10
=
1.328125
rem;
margin
:
20px
auto
;
background
:
url
(
'../images/itemBg.png'
)
no-repeat
;
// 因為整張雪碧圖的寬度為
200px
,
background-
size
:
200
/
640
*
10
rem
auto
;
等於
background-
size
:
3.125
rem
auto
;
// 該背景圖在雪碧圖的位置
background-position
:
-123
/
640
*
10
rem
-7
/
640
*
10
rem;
等於
background-position
:
-1.921875
rem
-0.109375
rem;
display
:
block
;
}
|