亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專(zhuān)欄INFORMATION COLUMN

移動(dòng)端適配

Maxiye / 508人閱讀

摘要：在端，的一般對(duì)應(yīng)著電腦屏幕的個(gè)物理像素，但在移動(dòng)端，的等于幾個(gè)物理像素是和屏幕像素密度有關(guān)的。也被稱(chēng)為視網(wǎng)膜顯示屏。設(shè)備像素比設(shè)備像素比簡(jiǎn)稱(chēng)為，物理像素與設(shè)備獨(dú)立像素的比例。

在說(shuō)具體內(nèi)容之前，我們必須了解幾個(gè)概念，就是：Retina屏、物理像素、設(shè)備獨(dú)立像素、設(shè)備像素比
在CSS中我們一般使用px作為單位，需要注意的是，CSS樣式里面的px和物理像素并不是相等的。CSS中的像素只是一個(gè)抽象的單位，在不同的設(shè)備或不同的環(huán)境中，CSS中的1px所代表的物理像素是不同的。在PC端，CSS的1px一般對(duì)應(yīng)著電腦屏幕的1個(gè)物理像素，但在移動(dòng)端，CSS的1px等于幾個(gè)物理像素是和屏幕像素密度有關(guān)的。

Retina屏

所謂“Retina”是一種顯示標(biāo)準(zhǔn)，是把更多的像素點(diǎn)壓縮至一塊屏幕里，從而達(dá)到更高的分辨率并提高屏幕顯示的細(xì)膩程度。由摩托羅拉公司研發(fā)。最初該技術(shù)是用于Moto Aura上。這種分辨率在正常觀看距離下足以使人肉眼無(wú)法分辨其中的多帶帶像素。也被稱(chēng)為視網(wǎng)膜顯示屏。

Retina屏一般在蘋(píng)果公司的產(chǎn)品上用的比較多，諸如MacBook、iPad、iPhone等

以MacBook Pro with Retina Display為例，工作時(shí)顯卡渲染出2880x1800個(gè)像素，其中每四個(gè)像素一組，輸出原來(lái)屏幕的一個(gè)像素顯示的大小區(qū)域內(nèi)的圖像。這樣一來(lái)，用戶(hù)所看到的圖標(biāo)與文字的大小與原來(lái)的1440x900分辨率顯示屏相同，但精細(xì)度是原來(lái)的4倍，但對(duì)于特殊元素，如視頻與圖像，則以一個(gè)圖片像素對(duì)應(yīng)一個(gè)屏幕像素的方式顯示。故不會(huì)產(chǎn)生Windows中分辨率提升使屏幕文字與圖像變小，造成閱讀困難的問(wèn)題。這樣在設(shè)計(jì)軟件時(shí)只需將所有的UI元素的精細(xì)度都提高到原來(lái)的4倍就可以既保持了觀看舒適度，又提高了顯示效果。

2.物理像素(physical pixel)

物理像素又被稱(chēng)為設(shè)備像素、設(shè)備物理像素，它是顯示器（電腦、手機(jī)屏幕）最小的物理顯示單位，每個(gè)物理像素由顏色值和亮度值組成。所謂的一倍屏、二倍屏(Retina)、三倍屏，指的是設(shè)備以多少物理像素來(lái)顯示一個(gè)CSS像素，也就是說(shuō)，多倍屏以更多更精細(xì)的物理像素點(diǎn)來(lái)顯示一個(gè)CSS像素點(diǎn)，在普通屏幕下1個(gè)CSS像素對(duì)應(yīng)1個(gè)物理像素，而在二倍Retina屏幕下，1個(gè)CSS像素對(duì)應(yīng)的卻是4個(gè)物理像素（參照上面Retina屏的原理下文田字示意圖理解）。

設(shè)備獨(dú)立像素(device-independent pixel)

設(shè)備獨(dú)立像素是我們寫(xiě)CSS時(shí)所用的像素，它是一個(gè)抽像的單位，主要使用在瀏覽器上，用來(lái)精確度量Web頁(yè)面上的內(nèi)容。

設(shè)備像素比(device pixel ratio)

設(shè)備像素比簡(jiǎn)稱(chēng)為dpr，物理像素與設(shè)備獨(dú)立像素的比例。

當(dāng)這個(gè)比率為1:1時(shí)，使用1個(gè)設(shè)備像素顯示1個(gè)css像素。當(dāng)這個(gè)比率為2:1=2時(shí)，使用4(2-2)個(gè)設(shè)備像素顯示1個(gè)css像素。當(dāng)這個(gè)比率為3:1=3，使用9(3-3)個(gè)設(shè)備像素顯示1個(gè)css像素。

這里要注意，dpr=2,并不是物理像素是設(shè)備獨(dú)立像素的2倍，而是用4個(gè)物理像素去表示1個(gè)設(shè)備邏輯像素應(yīng)該說(shuō)1個(gè)設(shè)備獨(dú)立像素是1個(gè)物理像素的4倍，因?yàn)槟?個(gè)網(wǎng)物理像素才代表我1個(gè)設(shè)備獨(dú)立像素dpr只代表一個(gè)數(shù)字比例，不是倍數(shù)關(guān)系。

CSS的1px等于幾個(gè)物理像素，除了和屏幕像素密度dpr有關(guān)，還和用戶(hù)縮放有關(guān)系。例如，當(dāng)用戶(hù)把頁(yè)面放大一倍，那么CSS中1px所代表的物理像素也會(huì)增加一倍；反之把頁(yè)面縮小一倍，CSS中1px所代表的物理像素也會(huì)減少一倍。關(guān)于這點(diǎn)，在文章后面的1px細(xì)線問(wèn)題部分還會(huì)講到。

viewport

viewport就是設(shè)備上用來(lái)顯示網(wǎng)頁(yè)的那一塊區(qū)域，但viewport又不局限于瀏覽器可視區(qū)域的大小，它可能比瀏覽器的可視區(qū)域要大，也可能比瀏覽器的可視區(qū)域要小。

在默認(rèn)情況下，一般來(lái)講，移動(dòng)設(shè)備上的viewport都是要大于瀏覽器可視區(qū)域的，這是因?yàn)榭紤]到移動(dòng)設(shè)備的分辨率相對(duì)于桌面電腦來(lái)說(shuō)都比較小，所以為了能在移動(dòng)設(shè)備上正常顯示那些傳統(tǒng)的為桌面瀏覽器設(shè)計(jì)的網(wǎng)站，移動(dòng)設(shè)備上的瀏覽器都會(huì)把自己默認(rèn)的viewport設(shè)為980px或1024px（也可能是其它值，這個(gè)是由設(shè)備自己決定的），但帶來(lái)的后果就是瀏覽器會(huì)出現(xiàn)橫向滾動(dòng)條，因?yàn)闉g覽器可視區(qū)域的寬度是比這個(gè)默認(rèn)的viewport的寬度要小的。

這里要認(rèn)清三種視口

　1. visual viewport?可見(jiàn)視口，指屏幕寬度
　2. layout viewport?布局視口，指DOM寬度
　3. ideal viewport?理想適口，使布局視口就是可見(jiàn)視口即為理想視口

獲取屏幕寬度(visual viewport)的尺寸：window. innerWidth/Height
獲取DOM寬度(layout viewport)的尺寸：document. documentElement. clientWidth/Height

設(shè)置理想視口ideal viewport：

該meta標(biāo)簽的作用是讓layout?viewport的寬度等于visual viewport的寬度，同時(shí)不允許用戶(hù)手動(dòng)縮放，從而達(dá)到理想視口?！?/p>

　meta[name="viewport"]里各參數(shù)的含義為：

　　width: 設(shè)置layout viewport?的寬度，為一個(gè)正整數(shù)，或字符串”width-device”。

　　initial-scale: 設(shè)置頁(yè)面的初始縮放值，為一個(gè)數(shù)字，可以帶小數(shù)。

　　minimum-scale: 允許用戶(hù)的最小縮放值，為一個(gè)數(shù)字，可以帶小數(shù)。

　　maximum-scale: 允許用戶(hù)的最大縮放值，為一個(gè)數(shù)字，可以帶小數(shù)。

　　height: 設(shè)置layout viewport?的高度，這個(gè)屬性對(duì)我們并不重要，很少使用。

　　user-scalable: 是否允許用戶(hù)進(jìn)行縮放，值為“no”或“yes”。

rem適配

哇卡卡卡，終于說(shuō)到移動(dòng)端屏幕適配方案了，可能大家看的想罵娘了，不過(guò)別急啊，上面的東西弄不清楚，下面是適配也聽(tīng)不懂啊

rem是相對(duì)于根元素的字體大小的單位，也就是html的font-size大小，瀏覽器默認(rèn)的字體大小是16px，所以默認(rèn)的1rem=16px，我們可以根據(jù)設(shè)備寬度動(dòng)態(tài)設(shè)置根元素的font-size，使得以rem為單位的元素在不同終端上以相對(duì)一致的視覺(jué)效果呈現(xiàn)。

事實(shí)上 rem是把屏幕等分成 指定的份數(shù)，以20份為例，每份為 1rem ， 1rem 對(duì)應(yīng)的大小就是 rem基準(zhǔn)值 ，rem做的就是把 rem基準(zhǔn)值 給的 font-size ，所以如果設(shè)備的 物理像素 寬為 640px?，分成20份，那么 1rem=640px/20=32px , 的 font-size為32px 。

//這段代碼放在head標(biāo)簽里面
(function () {
    var html = document.documentElement;
 
    function onWindowResize() {
        html.style.fontSize = html.getBoundingClientRect().width / 20 + "px";
    }
 
    window.addEventListener("resize", onWindowResize);
    onWindowResize();
})();

當(dāng)然，你也可以分成30份，40份，60份等等，這個(gè)看自己的喜好了

在我們實(shí)際切圖的時(shí)候，對(duì)于視覺(jué)稿上的元素尺寸換算，只需要元素的 原始的px值(即你量的大小) 除以 rem基準(zhǔn)值 即可。例如設(shè)計(jì)稿的大小為640px， rem基準(zhǔn)值 = 640px/20 = 32px ，有個(gè)元素的大小你量出來(lái)是 140px286px* ，那么換算過(guò)來(lái)就是：

140px = 140/32 = 4.375rem
286px = 286/32 = 8.9375rem

這樣我們就可以用rem來(lái)代替像素px了，?而且在所有的移動(dòng)端都是自適應(yīng)的

這個(gè)方法目前是比較好的適配方法，只是rem在計(jì)算時(shí)很麻煩，有很多小數(shù)，這個(gè)時(shí)候大家可以試一下用less.js解決rem的小數(shù)問(wèn)題

rem+vw適配

什么是vw和vh?

vw : 1vw 等于視口寬度的1%
vh : 1vh 等于視口高度的1%
vmin : 選取 vw 和 vh 中最小的那個(gè)
vmax : 選取 vw 和 vh 中最大的那個(gè)

用視口單位度量，視口寬度為100vw，高度為100vh（左側(cè)為豎屏情況，右側(cè)為橫屏情況）

例如，在桌面端瀏覽器視口尺寸為650px，那么 1vw = 650 * 1% = 6.5px（這是理論推算的出，如果瀏覽器不支持0.5px，那么實(shí)際渲染結(jié)果可能是7px）

注意：這里的1%是指占視口的1%，而不是我們定義的div的1%

如何利用rem+vw進(jìn)行屏幕適配呢？我們以設(shè)計(jì)稿為750px為基準(zhǔn)

第一步：設(shè)置meta標(biāo)簽

第二步：設(shè)置html的font-size大小

html{
    font-size:13.33333333vw
}

為什么font-size=13.33333333vw?

下面分析下原理吧, 上面我們說(shuō)了vw表示1%的屏幕寬度,而我們的設(shè)計(jì)稿通常是750px的,屏幕一共是100vw,對(duì)應(yīng)750px,那么1px就是0.1333333vw,。

同時(shí)我們知道rem,rem是相對(duì)html元素的字體大小，為了方便計(jì)算,我們?nèi)tml的font-size=100px,通過(guò)上面的計(jì)算結(jié)果1px是0.13333333vw,那么100px就是13.333333vw了

所以，我們讓1rem=100px=13.333333vw

那么在項(xiàng)目上就很好地可以進(jìn)行使用了

當(dāng)我們通過(guò)ps測(cè)量一個(gè)div的大小為 width:200px,height:137px時(shí)，我們就可以這樣寫(xiě)，ps量出來(lái)的像素直接除以100，計(jì)算小數(shù)很方便

div {
  width: 2rem;
  height:1.37rem;
 
 }
是不是相對(duì)于前面的rem適配來(lái)說(shuō)，不用去計(jì)算小數(shù)了呢？

作者：油炸皮卡丘
來(lái)源：CSDN
原文：https://blog.csdn.net/im_dogg...
版權(quán)聲明：本文為博主原創(chuàng)文章，轉(zhuǎn)載請(qǐng)附上博文鏈接！

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/110241.html

相關(guān)文章

  • 移動(dòng)端布局與適配

    摘要：實(shí)戰(zhàn)之微信錢(qián)包騰訊服務(wù)界面網(wǎng)格布局是讓開(kāi)發(fā)人員設(shè)計(jì)一個(gè)網(wǎng)格并將內(nèi)容放在這些網(wǎng)格內(nèi)。對(duì)于移動(dòng)端適配，不同的公司不同的團(tuán)隊(duì)有不同的解決方案。柵格系統(tǒng)用于處理頁(yè)面多終端適配的問(wèn)題。 grid實(shí)戰(zhàn)之微信錢(qián)包 騰訊服務(wù)界面 CSS3網(wǎng)格布局是讓開(kāi)發(fā)人員設(shè)計(jì)一個(gè)網(wǎng)格并將內(nèi)容放在這些網(wǎng)格內(nèi)。而不是使用浮動(dòng)制作一個(gè)網(wǎng)格，實(shí)際上是你將一個(gè)元素聲明為一個(gè)網(wǎng)格容器，并把元素內(nèi)容置于網(wǎng)格中。 移動(dòng)端頁(yè)面適配—...

    Clect 評(píng)論0 收藏0

  • 移動(dòng)端適配方案

    摘要：業(yè)務(wù)環(huán)境是決定整體項(xiàng)目的適配方案的核心因素。而淘寶的主站和類(lèi)似，分為移動(dòng)端頁(yè)面和端頁(yè)面，端頁(yè)面同樣有著左右的留白，這也是為了讓用戶(hù)能夠在寬屏的時(shí)候?qū)⒆⒁饬性谥虚g區(qū)域。 移動(dòng)端適配方案 移動(dòng)端適配方案是一個(gè)老生常談的話(huà)題，但是對(duì)于不同的項(xiàng)目、不同的業(yè)務(wù)場(chǎng)景可能會(huì)需要不同的適配方案來(lái)進(jìn)行移動(dòng)端適配，向下兼容的baseline也需要提前訂好。 整體寬高 其實(shí)移動(dòng)端適配就和下面的玩具一樣，...

    feng409 評(píng)論0 收藏0

  • rem, vw, 還是...? 各憑本事的移動(dòng)端適配方案

    摘要：另一種就是不縮放，對(duì)等問(wèn)題單獨(dú)引入處理方案。彩蛋部分相信大多數(shù)同學(xué)也是有想法在實(shí)際開(kāi)發(fā)中把融入到現(xiàn)有的移動(dòng)端適配方案中的。 前言 2018年最后的法定假期都已經(jīng)結(jié)束了，我相信大部分正在進(jìn)行或曾經(jīng)進(jìn)行過(guò)移動(dòng)端頁(yè)面開(kāi)發(fā)的同學(xué)都或多或少的了解過(guò)使用rem進(jìn)行移動(dòng)端頁(yè)面適配的方案以及使用vw的方案，(沒(méi)了解過(guò)的同學(xué)可以參見(jiàn)大漠老師的這兩篇文章 使用Flexible實(shí)現(xiàn)手淘H5頁(yè)面的終端適配和再...

    wangbinke 評(píng)論0 收藏0

  • rem, vw, 還是...? 各憑本事的移動(dòng)端適配方案

    摘要：另一種就是不縮放，對(duì)等問(wèn)題單獨(dú)引入處理方案。彩蛋部分相信大多數(shù)同學(xué)也是有想法在實(shí)際開(kāi)發(fā)中把融入到現(xiàn)有的移動(dòng)端適配方案中的。 前言 2018年最后的法定假期都已經(jīng)結(jié)束了，我相信大部分正在進(jìn)行或曾經(jīng)進(jìn)行過(guò)移動(dòng)端頁(yè)面開(kāi)發(fā)的同學(xué)都或多或少的了解過(guò)使用rem進(jìn)行移動(dòng)端頁(yè)面適配的方案以及使用vw的方案，(沒(méi)了解過(guò)的同學(xué)可以參見(jiàn)大漠老師的這兩篇文章 使用Flexible實(shí)現(xiàn)手淘H5頁(yè)面的終端適配和再...

    tianren124 評(píng)論0 收藏0

  • 我對(duì)移動(dòng)端適配的了解

    摘要：隨著移動(dòng)端的發(fā)展，在手機(jī)上看電腦端的頁(yè)面已成為非常普及現(xiàn)象。方案一固定高度，使其寬度自適應(yīng)這也是我接觸移動(dòng)端適配第一次使用的方案。 不知不覺(jué)做前端已經(jīng)兩年了，從PC端，移動(dòng)端，微信小程序一路走來(lái)到今天剛剛開(kāi)放注冊(cè)的快應(yīng)用(手機(jī)廠商對(duì)抗小程序的新技能,所以在注冊(cè)時(shí)用的是qq郵箱的話(huà)要去垃圾箱里才能找到注冊(cè)郵件)，對(duì)于前端圈日新月異的磅礴發(fā)展對(duì)于大前端發(fā)展是喜聞樂(lè)見(jiàn)的，這次的快應(yīng)用的手機(jī)廠...

    import. 評(píng)論0 收藏0

  • 我對(duì)移動(dòng)端適配的了解

    摘要：隨著移動(dòng)端的發(fā)展，在手機(jī)上看電腦端的頁(yè)面已成為非常普及現(xiàn)象。方案一固定高度，使其寬度自適應(yīng)這也是我接觸移動(dòng)端適配第一次使用的方案。 不知不覺(jué)做前端已經(jīng)兩年了，從PC端，移動(dòng)端，微信小程序一路走來(lái)到今天剛剛開(kāi)放注冊(cè)的快應(yīng)用(手機(jī)廠商對(duì)抗小程序的新技能,所以在注冊(cè)時(shí)用的是qq郵箱的話(huà)要去垃圾箱里才能找到注冊(cè)郵件)，對(duì)于前端圈日新月異的磅礴發(fā)展對(duì)于大前端發(fā)展是喜聞樂(lè)見(jiàn)的，這次的快應(yīng)用的手機(jī)廠...

    snowLu 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<