成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

移動(dòng)端適配

Ververica / 524人閱讀

摘要：三種因?yàn)槭謾C(jī)的分辨率越來越大，為了讓手機(jī)顯示電腦瀏覽器的網(wǎng)頁(yè)正常，瀏覽器默認(rèn)情況下把設(shè)為或者，這樣即使是那些為桌面設(shè)計(jì)的網(wǎng)站也能在移動(dòng)瀏覽器上正常顯示，這就是，它的寬度可以通過。

meta viewport

viewport的概念

移動(dòng)設(shè)備上面的viewport就是設(shè)備上的屏幕用來顯示網(wǎng)頁(yè)的那塊區(qū)域，叫做視口，但是在默認(rèn)情況下，移動(dòng)設(shè)備上的viewport是要大于瀏覽器可視區(qū)域的，因?yàn)橐苿?dòng)設(shè)備的分辨率相對(duì)于電腦來說比較小，所以為了能在移動(dòng)設(shè)備上正常顯示那些傳統(tǒng)的電腦瀏覽器設(shè)計(jì)的網(wǎng)站，移動(dòng)設(shè)備上的瀏覽器都會(huì)把自己默認(rèn)的viewport設(shè)為980px或者1024px，所以移動(dòng)設(shè)備上瀏覽器會(huì)出現(xiàn)橫向滾動(dòng)條，因?yàn)闉g覽器可視區(qū)域?qū)挾刃∮趘iewport

css中的1px不是設(shè)備的1px

css中的像素只是一個(gè)抽象的單位，在不同設(shè)備或者不同環(huán)境中，css中的1px所代表的設(shè)備物理像素是不同的。
在早先的移動(dòng)設(shè)備中，屏幕像素密度低，一個(gè)css像素確實(shí)就是一個(gè)屏幕物理像素，當(dāng)后來移動(dòng)設(shè)備屏幕分辨率變高，但屏幕尺寸沒有變，這時(shí)，一個(gè)css像素是等于兩個(gè)物理像素的，所以css像素相當(dāng)于多少物理像素是不確定的。

三種viewport

layout viewport:因?yàn)槭謾C(jī)的分辨率越來越大，為了讓手機(jī)顯示電腦瀏覽器的網(wǎng)頁(yè)正常，瀏覽器默認(rèn)情況下把viewport設(shè)為980px或者1024px，這樣即使是那些為桌面設(shè)計(jì)的網(wǎng)站也能在移動(dòng)瀏覽器上正常顯示，這就是layout viewport，它的寬度可以通過document.documentElement.clientWidth。

visual viewport:因?yàn)閘ayout viewport的寬度是大于瀏覽器可視區(qū)域的寬度，所以需要一個(gè)viewport代表瀏覽器可視區(qū)域的大小，這就是visual viewport，它可以用window.innerWidth來獲取

ideal viewport：為移動(dòng)設(shè)備多帶帶設(shè)計(jì)，需要一個(gè)能完美適配移動(dòng)設(shè)備的viewport，不需要用戶縮放和橫向滾動(dòng)條就能正常查看網(wǎng)站的內(nèi)容

利用meta viewport來控制viewport

進(jìn)行移動(dòng)設(shè)備開發(fā)時(shí)，將下面的代碼復(fù)制到head標(biāo)簽中：

該標(biāo)簽可以使移動(dòng)設(shè)備開發(fā)時(shí)使用ideal viewport

width=device-width: 讓當(dāng)前viewport寬度等于設(shè)備的寬度

user-scalable=no: 禁止用戶縮放

initial-scale=1.0: 設(shè)置頁(yè)面的初始縮放值為不縮放

maximum-scale=1.0: 允許用戶的最大縮放值為1.0

minimum-scale=1.0: 允許用戶的最小縮放值為1.0

媒體查詢

媒體查詢可以根據(jù)用戶設(shè)備屏幕大小和橫向或縱向來提供不同的樣式，使用方法：

link元素中的css媒體查詢:

樣式表中的css媒體查詢

@media (max-width: 600px) {

}

可以根據(jù)自定義條件來設(shè)置媒體的樣式

動(dòng)態(tài)rem

要保持頁(yè)面布局按照比例布局
什么是rem，rem是相對(duì)尺寸單位，相對(duì)于html標(biāo)簽字體大小的單位
所以我們通過用js來控制html標(biāo)簽的font-size值:

    document.documentElement.style.fontSize = window.innerWidth / 10 + "px";

使用rem，這樣保持了整體頁(yè)面的比例，不會(huì)導(dǎo)致頁(yè)面變形

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

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

相關(guān)文章

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

    摘要：實(shí)戰(zhàn)之微信錢包騰訊服務(wù)界面網(wǎng)格布局是讓開發(fā)人員設(shè)計(jì)一個(gè)網(wǎng)格并將內(nèi)容放在這些網(wǎng)格內(nèi)。對(duì)于移動(dòng)端適配，不同的公司不同的團(tuán)隊(duì)有不同的解決方案。柵格系統(tǒng)用于處理頁(yè)面多終端適配的問題。 grid實(shí)戰(zhàn)之微信錢包 騰訊服務(wù)界面 CSS3網(wǎng)格布局是讓開發(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)目的適配方案的核心因素。而淘寶的主站和類似，分為移動(dòng)端頁(yè)面和端頁(yè)面，端頁(yè)面同樣有著左右的留白，這也是為了讓用戶能夠在寬屏的時(shí)候?qū)⒆⒁饬性谥虚g區(qū)域。 移動(dòng)端適配方案 移動(dòng)端適配方案是一個(gè)老生常談的話題，但是對(duì)于不同的項(xiàng)目、不同的業(yè)務(wù)場(chǎng)景可能會(huì)需要不同的適配方案來進(jìn)行移動(dòng)端適配，向下兼容的baseline也需要提前訂好。 整體寬高 其實(shí)移動(dòng)端適配就和下面的玩具一樣，...

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

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

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

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

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

    摘要：另一種就是不縮放，對(duì)等問題單獨(dú)引入處理方案。彩蛋部分相信大多數(shù)同學(xué)也是有想法在實(shí)際開發(fā)中把融入到現(xiàn)有的移動(dòng)端適配方案中的。 前言 2018年最后的法定假期都已經(jīng)結(jié)束了，我相信大部分正在進(jìn)行或曾經(jīng)進(jìn)行過移動(dòng)端頁(yè)面開發(fā)的同學(xué)都或多或少的了解過使用rem進(jìn)行移動(dòng)端頁(yè)面適配的方案以及使用vw的方案，(沒了解過的同學(xué)可以參見大漠老師的這兩篇文章 使用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)端適配第一次使用的方案。 不知不覺做前端已經(jīng)兩年了，從PC端，移動(dòng)端，微信小程序一路走來到今天剛剛開放注冊(cè)的快應(yīng)用(手機(jī)廠商對(duì)抗小程序的新技能,所以在注冊(cè)時(shí)用的是qq郵箱的話要去垃圾箱里才能找到注冊(cè)郵件)，對(duì)于前端圈日新月異的磅礴發(fā)展對(duì)于大前端發(fā)展是喜聞樂見的，這次的快應(yīng)用的手機(jī)廠...

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

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

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

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

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

0條評(píng)論

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