當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

淘宝——移动端页面终端适配

發布時間：2025/5/22 编程问答 22 豆豆

生活随笔收集整理的這篇文章主要介紹了淘宝——移动端页面终端适配小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

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

閱讀目錄

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

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

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

所以今天做一個移動端頁面適配的小小總結

? ??

適配的要求

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

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

3、所提供的設計圖一般是手機分辨率的兩倍，才能方便做適配。

4、使用rem做單位，而不是傳統的px

適配的方法，3個步驟

步驟1：

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

步驟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: 200/640*10rem auto;  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

.item1{ ????width:?75/640*10=1.171875rem; ????height:?85/640*10=1.328125rem; ????margin:?20px?auto; ????background:?url('../images/itemBg.png')?no-repeat; ????// 因為整張雪碧圖的寬度為200px, ????background-size:?200/640*10rem?auto; ????等于 ????background-size:?3.125rem?auto; ????// 該背景圖在雪碧圖的位置 ????background-position:?-123/640*10rem?-7/640*10rem; ????等于 ????background-position:?-1.921875rem?-0.109375rem; ????display:?block; }

轉載于:https://www.cnblogs.com/dp168/p/5997499.html

總結

以上是生活随笔為你收集整理的淘宝——移动端页面终端适配的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。