網(wǎng)站適配無(wú)疑已經(jīng)成為了傳統(tǒng)pc網(wǎng)站快速向wap網(wǎng)站轉(zhuǎn)型的很佳解決方案。網(wǎng)站適配得借助相關(guān)的技術(shù)才能實(shí)現(xiàn)。我們今天來(lái)說(shuō)一下手機(jī)屏幕的適配原理，看看重慶網(wǎng)站建設(shè)公司創(chuàng)新互聯(lián)為您帶來(lái)的分析。

隨著手機(jī)屏幕的不斷的增大，同時(shí)也遇到一些用戶(hù)手機(jī)屏幕還是處于240*320這種屏幕的大小，當(dāng)然也存著在一些不規(guī)則的屏幕分辨率心寸大小。對(duì)于很多設(shè)計(jì)人員來(lái)說(shuō)，不同的手機(jī)屏幕需要多套圖片才能保證手機(jī)客戶(hù)端在不同的屏幕上實(shí)現(xiàn)匹配。針對(duì)手機(jī)客戶(hù)端在不同屏幕下的實(shí)現(xiàn)進(jìn)行規(guī)劃，制定出一個(gè)能夠計(jì)算出具體控件位置的填充區(qū)算法，這個(gè)是前期對(duì)于不同的手機(jī)屏幕的匹配做出的一個(gè)界面適配算法。

首先認(rèn)清幾個(gè)手機(jī)屏幕區(qū)域(先從240*320與320*240說(shuō)起)：

1.填充區(qū)

CONTAINER：在這個(gè)標(biāo)準(zhǔn)中，使用填充區(qū)概念對(duì)界面進(jìn)行控制，整個(gè)頁(yè)面由大小不一的填充區(qū)組成，不同的填充區(qū)有在適應(yīng)屏幕時(shí)，有不同的縮放規(guī)則。

2.SCREEN

SCREEN：根據(jù)填充區(qū)，每個(gè)分辨率下的可見(jiàn)區(qū)域尺寸，其尺寸等于某型號(hào)手機(jī)的屏幕分辨率。如在n73下，SCREEN的參數(shù)為240*320。

3.基準(zhǔn)屏幕

針對(duì)橫屏和豎屏的屏幕，采用兩套不同的基準(zhǔn)屏幕，豎基準(zhǔn)屏幕240*320和橫基準(zhǔn)屏320*240，兩種基準(zhǔn)屏幕之間可以進(jìn)行切換。

豎屏240*320合適屏幕縮放：

豎屏的屏幕縮放基于240*320大小，可以縮放到480*640等屏幕的大小。滿(mǎn)足iPhone以及安卓等用戶(hù)的需要。

豎屏的字體比例縮放：當(dāng)控件適配不同屏幕時(shí)，控件需要根據(jù)字體的縮放而進(jìn)行縮放。

遵循的原則——頭尾原則

在常規(guī)界面的適配過(guò)程中，遵從先頭尾，后中間的原則，先確定頭部高度，再確定尾部高度，然后根據(jù)屏幕高度來(lái)和頭尾高度確定內(nèi)容填充區(qū)高度，完成整個(gè)界面布局的調(diào)整。控件寬度以比例縮放原則為主。

縮放原則：

界面在適配于不同界面時(shí)，一般采用不同的縮放規(guī)則，不同的填充區(qū)根據(jù)需要分別采用字體縮放和比例縮放。

效果中可以看出，采用寬度自適應(yīng)效果進(jìn)行縮放的話(huà)，配合上、下滾動(dòng)條可以實(shí)現(xiàn)較好的顯示效果，同時(shí)保證能夠清晰查看圖片內(nèi)容。因此，借鑒圖片的寬度自適應(yīng)，將界面看作是一張圖片來(lái)處理，通過(guò)不同屏幕分辨率的寬度比作為調(diào)整壁紙對(duì)界面進(jìn)行保持比例的縮放。

網(wǎng)頁(yè)名稱(chēng)：手機(jī)屏幕適配原理
新聞來(lái)源：http://m.2m8n56k.cn/news/115131.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供Google、微信小程序、網(wǎng)站設(shè)計(jì)公司、定制開(kāi)發(fā)、網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(shè)計(jì)公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)