當(dāng)前位置：首頁(yè) >

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

發(fā)布時(shí)間：2025/5/22 45 豆豆

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

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

閱讀目錄

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

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

在大屏幕手機(jī)上看起來(lái)會(huì)有點(diǎn)偏小。比如iphone6PLUS。如果是做成適配的話，就很好的解決了這個(gè)問(wèn)題，大屏幕顯示的內(nèi)容大一點(diǎn)，小屏幕顯示的小一點(diǎn)。

所以今天做一個(gè)移動(dòng)端頁(yè)面適配的小小總結(jié)

? ??

適配的要求

1、在不同分辨率的手機(jī)上，頁(yè)面看起來(lái)是自適應(yīng)的。整體效果看起來(lái)比較和諧。不會(huì)說(shuō)大屏幕上看起來(lái)特別小。小屏幕上看起來(lái)特別大

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

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

4、使用rem做單位，而不是傳統(tǒng)的px

適配的方法，3個(gè)步驟

步驟1：

設(shè)置viewport，也就是平時(shí)寫移動(dòng)端頁(yè)面都要加上的：

步驟2、

首先我們?cè)谖覀兊捻?yè)面引入下面的flexible.js，

這段適配的js代碼是拿淘寶的來(lái)用的。

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

步驟3、

頁(yè)面上我們的css代碼可以這樣寫，比如設(shè)計(jì)圖給我們的尺寸是750*1000的。某個(gè)容器在設(shè)計(jì)圖的寬度是150px*225px,那我們?cè)赾ss里面

寬度：150px/750px/10=150px/75px=2rem;

高度為：225px/75px=3rem;

一句話：布局的時(shí)候，各元素的css尺寸=設(shè)計(jì)稿標(biāo)注尺寸/設(shè)計(jì)稿橫向分辨率/10；

div{width: 2rem;height: 3rem; }

通過(guò)上面的3個(gè)步驟，我們就可以將我們的移動(dòng)端頁(yè)面做成適配的了。

?css換算方法

不過(guò)有一點(diǎn)，一直算來(lái)算去挺煩的。所以在寫css的時(shí)候，最好使用css預(yù)處理器，比如sass、less來(lái)寫，這樣就方便很多了。

或者在sublimeText3中安裝cssREM插件，正常書寫px單位，然后編輯器自動(dòng)幫你換算成rem.

cssREM插件的安裝教程：https://github.com/flashlizi/cssrem

注意點(diǎn)：

容器的寬度高度我們用rem為單位，但是字體大小font-size我們還是用px,而不是用rem?

原因：

　　flexible.js的作者winter是這樣解釋的：考慮到字體的點(diǎn)陣信息，一般文字尺寸多會(huì)采用 16px 20px 24px等值，若以rem指定文字尺寸，會(huì)產(chǎn)生諸如21px，19px這樣的值，會(huì)導(dǎo)致字形難看，毛刺，甚至黑塊，故大部分文字應(yīng)該以px設(shè)置。

　　一般標(biāo)題類文字，可能也有要求隨屏幕縮放，且考慮到這類文字一般都比較大，超過(guò)30px的話，也可以用rem設(shè)置字體。

適配中背景圖片的處理

1、如何使用background-size

因?yàn)槭鞘褂昧藃em來(lái)做單位，我們?cè)趯懸苿?dòng)端的背景圖的時(shí)候，一般使用background-size來(lái)控制大小，那要怎么來(lái)?yè)Q算呢？

換算單位如下：

background-size=背景圖的大小/該設(shè)計(jì)圖的寬度*10

打個(gè)比方：我的背景圖是16*18，設(shè)計(jì)圖是按照640的寬度來(lái)設(shè)計(jì)的。那么我的background-size值為

background-size: 16/640*10rem 16/640*10rem ? 也就是 background-size:0.25rem 0.28125rem;

通過(guò)這樣控制之后，我們的背景圖也做到了適配的效果

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

剛開始做適配的時(shí)候，有一件事是比較頭疼的，那就是雪碧圖的適配，主要是background-size和background-position的配置比較煩。那么怎么進(jìn)行在使用fexible.js的時(shí)候適配雪碧圖呢，方法如下：

假如我有下面這張雪碧圖，設(shè)計(jì)圖給我的是按640的分辨率來(lái)做的。

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

假設(shè)現(xiàn)在我們要用的那個(gè)勛子的背景圖。分為以下幾步：

1、測(cè)量勛字這張背景圖的大小，大小為：75px*85px

2、測(cè)量這個(gè)勛字在雪碧圖的位置，也就是設(shè)置background-position:.經(jīng)測(cè)量，他在雪碧圖的位置為 x:-123px，y:-7px

3、對(duì)著張雪碧圖進(jìn)行換算：看下面代碼：

知道了上面的尺寸，我們就行換算即可，將每個(gè)值除以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; ????// 因?yàn)檎麖堁┍虉D的寬度為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; }

轉(zhuǎn)載于:https://www.cnblogs.com/dp168/p/5997499.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。