淘寶——移動端頁面終端適配

注：本文參考自：http://www.cnblogs.com/xianyulaodi/p/5533201.html

 

閱讀目錄

• 適配的要求
• 適配的方法，3個步驟
• 適配中背景圖片的處理
• 適配的原理解析

 摘要：在進行移動端界面的書寫的時候，若是把寬度高度或者字體大小所有寫死的話，那麼在全部手機上看到的大小都同樣，存在的問題就是一樣大小的字體，或者一個盒子模型，

在大屏幕手機上看起來會有點偏小。好比iphone6PLUS。若是是作成適配的話，就很好的解決了這個問題，大屏幕顯示的內容大一點，小屏幕顯示的小一點。

因此今天作一個移動端頁面適配的小小總結

 

    

適配的要求

 

一、在不一樣分辨率的手機上，頁面看起來是自適應的。總體效果看起來比較和諧。不會說大屏幕上看起來特別小。小屏幕上看起來特別大

二、主要是關注字體，寬高，間距，圖片大小等。

三、所提供的設計圖通常是手機分辨率的兩倍，才能方便作適配。

四、使用rem作單位，而不是傳統的px

適配的方法，3個步驟

步驟1：

設置viewport，也就是平時寫移動端頁面都要加上的：

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

 

步驟二、

首先咱們在咱們的頁面引入下面的flexible.js，

這段適配的js代碼是拿淘寶的來用的。

適配的js代碼的github地址以下：https://github.com/amfe/lib-flexible/blob/master/src/flexible.js。

 

步驟三、

頁面上咱們的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設置字體。

適配中背景圖片的處理

 

一、如何使用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;

經過這樣控制以後，咱們的背景圖也作到了適配的效果

 

二、雪碧圖的適配！！！！

 

剛開始作適配的時候，有一件事是比較頭疼的，那就是雪碧圖的適配，主要是background-size和background-position的配置比較煩。那麼怎麼進行在使用fexible.js的時候適配雪碧圖呢，方法以下：

 

假如我有下面這張雪碧圖，設計圖給個人是按640的分辨率來作的。

 

這張雪碧圖的大小爲200px*458px

 

 

假設如今咱們要用的那個勳子的背景圖。分爲如下幾步：

一、測量勳字這張背景圖的大小，大小爲：75px*85px

二、測量這個勳字在雪碧圖的位置，也就是設置background-position:.經測量，他在雪碧圖的位置爲 x:-123px，y:-7px

三、對着張雪碧圖進行換算：看下面代碼：

知道了上面的尺寸，咱們就行換算便可，將每一個值除以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 ; }