整合營銷服務(wù)商

          電腦端+手機端+微信端=數(shù)據(jù)同步管理

          免費咨詢熱線:

          前端如何適配不同尺寸的屏幕

          前端開發(fā)中,比較重要的一個環(huán)節(jié)就是要適配各個屏幕的尺寸。

          PC端比較簡單的是響應(yīng)式和自適應(yīng)。響應(yīng)式比較簡單,通過Media查詢頁面寬度,再加載相應(yīng)的樣式即可。自適應(yīng)就是用百分比,rem,vw這樣的單位去做。

          但是今天主要講的是移動端的適配。從iphone4到iphone7P,3.5寸小屏到如今的5.5寸大屏,如何提供一套簡單的適配方案呢?這里推薦一下手淘團隊的方案--Flexable。

          不同分辨率,不同尺寸的屏幕。首先普及一些基本概念:

          物理像素:物理像素又被稱為設(shè)備像素,他是顯示設(shè)備中一個最微小的物理部件。每個像素可以根據(jù)操作系統(tǒng)設(shè)置自己的顏色和亮度。正是這些設(shè)備像素的微小距離欺騙了我們?nèi)庋劭吹降膱D像效果。

          設(shè)備獨立像素:設(shè)備獨立像素也稱為密度無關(guān)像素,可以認為是計算機坐標系統(tǒng)中的一個點,這個點代表一個可以由程序使用的虛擬像素(比如說CSS像素),然后由相關(guān)系統(tǒng)轉(zhuǎn)換為物理像素。

          css像素:CSS像素是一個抽像的單位,主要使用在瀏覽器上,用來精確度量Web頁面上的內(nèi)容。一般情況之下,CSS像素稱為與設(shè)備無關(guān)的像素(device-independent pixel),簡稱DIPs。

          屏幕密度:屏幕密度是指一個設(shè)備表面上存在的像素數(shù)量,它通常以每英寸有多少像素來計算(PPI)。

          設(shè)備像素比:設(shè)備像素比簡稱為dpr,其定義了物理像素和設(shè)備獨立像素的對應(yīng)關(guān)系。它的值可以按下面的公式計算得到:

          設(shè)備像素比 = 物理像素/設(shè)備獨立像素。

          眾所周知,iPhone6的設(shè)備寬度和高度為375pt * 667pt,根據(jù)上面公式,我們可以很輕松得知其物理像素為750pt * 1334pt。在不同的屏幕上,CSS像素所呈現(xiàn)的物理尺寸是一致的,而不同的是CSS像素所對應(yīng)的物理像素具數(shù)是不一致的。在普通屏幕下1個CSS像素對應(yīng)1個物理像素,而在Retina屏幕下,1個CSS像素對應(yīng)的卻是4個物理像素。

          了解了前面一些相關(guān)概念之后,接下來我們來看實際解決方案。在整個手淘團隊,我們有一個名叫l(wèi)ib-flexable的庫。可以百度搜索flexable下載這個庫。之后就可以把庫引用到你的項目中去了。

          讀到這里,大家應(yīng)該都知道,我們接下來要做的事情,就是如何把視覺稿中的px轉(zhuǎn)換成rem。

          目前Flexible會將視覺稿分成100份,(主要為了以后能更好的兼容vh和vw),而每一份被稱為一個單位。同時1rem單位被認定為10a。針對我們這份視覺稿可以計算出:1a=7.5px;1rem=75px。

          這樣一來,對于視覺稿上的元素尺寸換算,只需要原始的px值除以rem基準值即可。例如此例視覺稿中的圖片,其尺寸是176px * 176px,轉(zhuǎn)換成為2.346667rem * 2.346667rem。在實際生產(chǎn)當(dāng)中,如果每一次計算px轉(zhuǎn)換rem,或許會覺得非常麻煩,或許直接影響大家平時的開發(fā)效率。為了能讓大家更快進行轉(zhuǎn)換,我們團隊內(nèi)的同學(xué)各施所長,為px轉(zhuǎn)換rem寫了各式各樣的小工具。CSSREM是一個CSS的px轉(zhuǎn)rem值的Sublime Text3自動完成插件。

          篇文章主要介紹下如何使網(wǎng)站自適應(yīng)屏幕的大小。其實,這個問題并不是很難做,可以使用CSS來實現(xiàn)。

          具體操作實例小編在下面已經(jīng)寫出來了:

          <div id="change-color"></div>

          css 代碼如下:

          #change-color {

          width:300px;

          height:300px;

          margin:50px auto;

          background:red;

          }

          這個很簡單,大家都能想象出來是一個多么枯燥的頁面,一個 300 × 300 像素的紅色正方形在頁面的中上部。學(xué)到這里的同學(xué)對于這樣簡單的代碼應(yīng)該是無壓力的了。然后我們在這段 css 后面再加上一點內(nèi)容,改做:

          #change-color {

          width:300px;

          height:300px;

          margin:50px auto;

          background:red;

          }

          @media (max-width:800px){

          #change-color {

          width:90%;

          height:300px;

          margin:50px auto;

          background:blue;

          }

          }

          來一起看看這個css,這段可以分作兩個部分,第一部分就是我們上面寫的對 #change-color 定義的 css ,這個無需解釋了。第二部分跟我們以前看到的不一樣哈,但是如果去掉 @media (max-width:800px){……} 這樣的結(jié)構(gòu)之后,我們可以發(fā)現(xiàn),剩下的內(nèi)容也是對 #change-color 的定義,只是跟上面略有不同,一個是寬度發(fā)生了變化,一個是背景色改了。那么現(xiàn)在我們來解釋一下這部分代碼。

          默認情況執(zhí)行第一部分的定義,那么背景色就應(yīng)該是紅色的,寬度是300px。一切如同我們與想的一樣。當(dāng)瀏覽器內(nèi)容部分的寬度小于等于800px(符合條件,最大寬度為800px)時,使用第二部分的定義,也就是寬度變成了90%,背景色變成了藍色。

          然后我們看看實際效果:當(dāng)網(wǎng)頁寬度大于800px,網(wǎng)頁自適應(yīng)寬屏。

          調(diào)整窗口寬度到內(nèi)容區(qū)域小于800px,網(wǎng)頁適應(yīng)屏幕窗口調(diào)整,這樣現(xiàn)在效果實現(xiàn)了。

          本篇屬于暢想網(wǎng)絡(luò)原創(chuàng),轉(zhuǎn)載地址:http://www.e-wkj.cn/xw/1824.html

          有一個最佳的屏幕尺寸可以設(shè)計。網(wǎng)站應(yīng)在不同的瀏覽器和平臺上以所有屏幕分辨率快速響應(yīng)地進行轉(zhuǎn)換。無障礙。移動友好。首先為您的訪客設(shè)計。從360×640到1920×1080的設(shè)計。

          • 適用于1024×768至1920×1080的臺式顯示器的設(shè)計
          • 適用于360×640至414×896的移動顯示器的設(shè)計
          • 適用于601×962至1280×800的平板顯示器的設(shè)計
          • 檢查百度統(tǒng)計并針對目標受眾的最常見分辨率大小進行優(yōu)化
          • 不要設(shè)計一種顯示器尺寸或屏幕分辨率。屏幕大小和瀏覽器窗口狀態(tài)因訪問者而異。
          • 設(shè)計應(yīng)該響應(yīng)迅速。使用可轉(zhuǎn)換為當(dāng)前用戶窗口大小的自適應(yīng)或響應(yīng)式布局。
          • 監(jiān)控百度站長工具的移動設(shè)備友好性和可用性警告

          它仍然應(yīng)該看起來不錯,并且在所有尺寸下都可以正常工作,現(xiàn)在我們的建議是建設(shè)一個自適應(yīng)/響應(yīng)式網(wǎng)站。

          針對特定屏幕尺寸優(yōu)化頁面布局的三個主要標準是:

          • 網(wǎng)頁的初始可見性:屏幕上方是否可見所有關(guān)鍵信息,以便用戶無需滾動即可查看?這是在顯示多少個項目與每個項目顯示多少細節(jié)之間的權(quán)衡。
          • 網(wǎng)頁可讀性:給定頁面寬度,閱讀各列中的文本是否容易?
          • 網(wǎng)頁美學(xué):當(dāng)元素的大小和屏幕大小合適時,頁面的外觀如何?是否所有元素都正確對齊?標題是否緊挨著圖片等?

          可用性準則還建議您考慮所有大小的所有三個條件。檢查瀏覽器窗口的屏幕分辨率為360×640到1920×1080。

          在整個分辨率范圍內(nèi),您的網(wǎng)頁在所有條件上的得分都應(yīng)該很高。

          您的頁面也應(yīng)該以更大或更小的尺寸工作,盡管這種極端情況不那么重要。

          盡管此類用戶當(dāng)然應(yīng)該能夠訪問您的網(wǎng)站,但為他們提供小于設(shè)計的外觀有時是可以接受的折衷方案。

          十大最常見的屏幕分辨率

          2020年的前6個月中,對451,027個訪客進行了訪客分析:

          屏幕分辨率測試用戶數(shù)11920×108088,378(19.53%)21366×76867,912(15.01%)31440×90043,687(9.65%)41536×86432,872(7.26%)52560×144025,954(5.73%)61680×105020,068(4.43%)71280×72015,138(3.34%)81280×80014,007(3.09%)9360×64011,085(2.45%)101600×90010,193(2.25%)

          響應(yīng)式網(wǎng)站模板是一個很好的選擇

          響應(yīng)式Web設(shè)計:在相同的URL上提供相同的HTML代碼,而不管用戶的設(shè)備(例如,臺式機,平板電腦,移動設(shè)備,非可視瀏覽器)如何,但是可以根據(jù)屏幕大小來不同地呈現(xiàn)顯示。 百度建議使用響應(yīng)式Web設(shè)計,因為它是最容易實現(xiàn)和維護的設(shè)計模式。

          在當(dāng)今世界,許多人正在使用手持設(shè)備(平板電腦和智能手機)瀏覽網(wǎng)頁,而響應(yīng)式網(wǎng)站設(shè)計(RWD)已經(jīng)成為解決屏幕尺寸挑戰(zhàn)的極有可能的解決方案。

          此方法不再使用固定寬度的網(wǎng)站,而是使用CSS樣式表中的“媒體查詢”來創(chuàng)建一個網(wǎng)站,該網(wǎng)站在大小上響應(yīng)手持設(shè)備的不同視口以及人們使用的較小屏幕。

          因此,無論人們使用什么設(shè)備來查看您的網(wǎng)站,您都可以為他們提供最完整的體驗。

          百度首選適合移動設(shè)備的網(wǎng)站

          如果您想為高競爭力的關(guān)鍵詞在百度獲得高排名,您就需要一個適合移動設(shè)備的網(wǎng)站。

          網(wǎng)站對移動設(shè)備的友好程度如何影響各種設(shè)備對網(wǎng)站的排名效果。如果您為小型企業(yè)創(chuàng)建網(wǎng)站,您會知道他們想要一個在百度自然搜索中表現(xiàn)良好的網(wǎng)站。

          目前從本質(zhì)上講,這意味著網(wǎng)站設(shè)計具有響應(yīng)性并且對移動設(shè)備友好,尤其是對于百度而言。

          全球桌面屏幕分辨率統(tǒng)計,2019年5月– 2020年5月

          作為參考,以下是最近(2020年)記錄的當(dāng)前全球頂級屏幕分辨率的列表:

          • 1366×768 – 23.49%
          • 1920×1080 – 19.91%
          • 1536×864 – 8.65%
          • 1440×900 – 7.38%
          • 1280×720 – 4.89%
          • 1600×900 – 4.01%
          • 1280×800 – 3.33%

          全球移動屏幕分辨率統(tǒng)計,2019年5月– 2020年5月

          • 360×640 – 17.91%
          • 375×667 – 7.61%
          • 414×896 – 6.52%
          • 360×780 – 5.56%
          • 360×760 – 5.06%
          • 414×736 – 3.74%

          全球平板電腦屏幕分辨率統(tǒng)計,2019年5月– 2020年5月

          • 768×1024 – 51.98%
          • 1280×800 – 7.11%
          • 800×1280 – 5.34%
          • 601×962 – 4.47%
          • 600×1024 – 2.85%
          • 1024×1366 – 1.96%

          臺式機,手機與平板電腦的全球市場份額2019年5月– 2020年5月

          1. 手機– 50.48%
          2. 臺式機– 46.51%
          3. 平板電腦– 3.0%

          如何設(shè)計在每個瀏覽器和分辨率下看起來都相同的網(wǎng)站?

          你不能。不可能將網(wǎng)站設(shè)計成在每個瀏覽器,平臺和屏幕分辨率下看起來都一樣,所以請避免嘗試。

          您可以選擇不帶表格的流暢布局來進行設(shè)計,其寬度百分比可以擴展和收縮以適合訪問者瀏覽器的設(shè)置,或者您可以考慮研究能夠?qū)崿F(xiàn)相同效果的響應(yīng)式設(shè)計解決方案。

          搜索引擎偏愛響應(yīng)式設(shè)計,這對于采用它的人來說是個好消息。移動技術(shù)正在興起-因此,如果要開發(fā)一個新網(wǎng)站-您必須從一開始就考慮您的網(wǎng)站對移動設(shè)備的友好程度。

          在實際編寫代碼時,我們的目標是使事情簡單。從經(jīng)驗中我們知道的是, 對于您而言,確定您的受眾及其使用的設(shè)備,并從整體上構(gòu)建適合該受眾的網(wǎng)站至關(guān)重要,受眾也包括搜索引擎。

          您的移動網(wǎng)站是否重定向到您網(wǎng)站的另一個URL和版本?

          好吧,那不是理想的。實際上,它從未如此。

          追溯到今天-一些人使用網(wǎng)站的純文本版本為不支持其網(wǎng)站元素的用戶/瀏覽器生成內(nèi)容-試圖(通常是徒勞的)使他們的內(nèi)容更易于訪問。

          W3C甚至曾經(jīng)推薦它,我們認為如果其他所有方法都失敗了:

          為訪問者目的而向訪問者傳遞一個URL始終是理想的選擇,并且如果您正在考慮創(chuàng)建網(wǎng)站的“移動”版本,則在傳遞移動或智能手機內(nèi)容時沒有任何區(qū)別。

          百度可能會在不久的將來對您的移動體驗做出主要評價-因此,我們所有人都確實需要意識到我們可能很快會在百度的SERP中看到巨大的變化。

          當(dāng)百度作為“訪問者”時,由于搜索引擎的典型URL挑戰(zhàn),通常只提供一個URL甚至更為重要-在前一段時間實施規(guī)范鏈接元素之前就是這種情況。

          因此,理想的情況是始終提供一個URL。

          百度在這方面給出了建議:“如果您具有“智能手機”內(nèi)容(我們將其視為普通的Web內(nèi)容,因為它通常是普通的HTML頁面,只是在布局上進行了調(diào)整以顯示較小的內(nèi)容),則可以使用rel = canonical指向您的桌面版本。這有助于我們專注于網(wǎng)絡(luò)搜索的桌面版本。當(dāng)用戶使用智能手機訪問該桌面版本時,您可以將他們重定向到移動版本。無論URL結(jié)構(gòu)如何,此方法均有效,因此您無需為智能手機移動網(wǎng)站使用子域/子目錄。 然而,更好的方法是使用相同的URL并顯示內(nèi)容的適當(dāng)版本而無需重定向。”

          百度還提供了以下提示,以檢查您的網(wǎng)站是否準備好使用移動優(yōu)先索引,但是從本質(zhì)上講,如果您正在為網(wǎng)站使用響應(yīng)式網(wǎng)頁設(shè)計模板,則此更改的問題應(yīng)該很小:

          • 確保網(wǎng)站的移動版本還具有重要的高質(zhì)量內(nèi)容。這包括文本,圖像(帶有alt屬性)和視頻-采用通常的可檢索和可索引格式。
          • 結(jié)構(gòu)化數(shù)據(jù)對于用戶喜歡的索引和搜索功能很重要:它應(yīng)該同時在網(wǎng)站的移動版和臺式機上。確保結(jié)構(gòu)化數(shù)據(jù)中的URL已更新為移動頁面上的移動版本。
          • 元數(shù)據(jù)應(yīng)同時存在于網(wǎng)站的兩個版本中。它提供有關(guān)頁面內(nèi)容的提示,以供索引和投放。例如,確保網(wǎng)站上所有頁面的兩個版本的標題和元描述都相同。
          • 與單獨的移動網(wǎng)址(單點網(wǎng)站)相互鏈接無需更改。對于使用單獨移動URL的網(wǎng)站,請在這些版本之間保留現(xiàn)有的鏈接rel = canonical和鏈接rel = alternate元素。
          • 檢查單獨的移動網(wǎng)址上的hreflang鏈接。當(dāng)使用link rel = hreflang元素進行國際化時,移動URL和桌面URL之間分別進行鏈接。您的移動URL的hreflang應(yīng)該指向其他移動URL上的其他語言/區(qū)域版本,并且類似地使用hreflang鏈接元素將桌面與其他桌面URL鏈接。
          • 確保承載站點的服務(wù)器有足夠的容量來處理可能增加的爬網(wǎng)速度。這不會影響使用響應(yīng)式網(wǎng)頁設(shè)計和動態(tài)服務(wù)的網(wǎng)站,只會影響移動版本位于單獨主機上的網(wǎng)站,例如m.example.com。

          用戶期望向下滾動頁面

          過去的網(wǎng)頁用戶通常不需要滾動,但多年來,這種情況已經(jīng)改變。

          因此,在設(shè)計時,應(yīng)考慮如果用戶只滾動一個完整屏幕或兩個屏幕,可以看到多少內(nèi)容。超過五個屏幕的長度可能表示您頁面上的內(nèi)容過多。當(dāng)然,用戶希望等待更短的時間來查看更全面的內(nèi)容。

          滾動和初始可見性顯然都取決于屏幕尺寸:較大的屏幕在屏幕上方會顯示更多內(nèi)容,并且需要較少的滾動。

          對響應(yīng)式移動網(wǎng)站的更改會導(dǎo)百度帶來更多流量嗎?

          不一定,但是有可能。

          與百度優(yōu)化有關(guān)的許多事情–建立一個適合移動設(shè)備的網(wǎng)站或多或少可以確保您保持已經(jīng)獲得的訪問量,并不一定能為您提供來自百度的更多免費訪問量。

          百度及其用戶再次提高了質(zhì)量標準,如果您想在更具競爭力的SERP中競爭,這是小企業(yè)克服困難的又一個障礙。

          從長遠來看,這種移動轉(zhuǎn)化僅對您的用戶來說是一件好事,但從短期來看,對小型企業(yè)的轉(zhuǎn)化率不會產(chǎn)生什么影響,因為通過移動設(shè)備獲得的轉(zhuǎn)化率通常低于桌面。

          百度表示,這種適用于移動設(shè)備的算法對SERP的影響更大,隨著時間的流逝,我們將發(fā)現(xiàn)更多信息。

          如何在您的網(wǎng)站上檢查重要的移動可用性問題

          百度站長工具

          您應(yīng)該能夠在百度站長工具中跟蹤移動設(shè)備錯誤,并且如果您的網(wǎng)站配置正確,錯誤會隨著時間的流逝而消失。


          主站蜘蛛池模板: 高清国产AV一区二区三区| 国产短视频精品一区二区三区| 亚洲Aⅴ无码一区二区二三区软件 亚洲AⅤ视频一区二区三区 | 中文字幕一区在线观看视频| 一区二区三区在线免费观看视频| 亚洲一区二区三区免费在线观看| 夜夜嗨AV一区二区三区| 能在线观看的一区二区三区| 国精产品一区一区三区有限在线| 人妻少妇久久中文字幕一区二区 | 国产成人综合一区精品| 精品人妻系列无码一区二区三区| 久久成人国产精品一区二区| 高清一区高清二区视频| 一本一道波多野结衣一区| 91精品国产一区| 亚洲图片一区二区| 无码人妻一区二区三区在线| 亚洲AV福利天堂一区二区三| 亚洲人成人一区二区三区| 奇米精品一区二区三区在线观看| 日韩人妻无码一区二区三区 | 国产一区麻豆剧传媒果冻精品| 午夜精品一区二区三区在线视| 国产一区二区三区视频在线观看| 国产一区在线播放| 一区二区免费在线观看| 久久亚洲中文字幕精品一区| 无码人妻精品一区二| 岛国精品一区免费视频在线观看| 一区三区三区不卡| 中文字幕一区二区三区精华液 | 精品女同一区二区三区在线| 日本一区二区三区四区视频| 精品少妇人妻AV一区二区| 国产成人av一区二区三区不卡 | 一区二区国产精品| 国产精品美女一区二区视频| 精品一区二区三区四区在线播放 | 国产在线观看精品一区二区三区91 | 日本高清无卡码一区二区久久|