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

資訊專欄INFORMATION COLUMN

移動端適配

DobbyKim / 1839人閱讀

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

meta viewport

viewport的概念

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

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

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

三種viewport

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

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

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

利用meta viewport來控制viewport

進行移動設(shè)備開發(fā)時，將下面的代碼復(fù)制到head標簽中：

該標簽可以使移動設(shè)備開發(fā)時使用ideal viewport

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

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

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

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

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

媒體查詢

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

link元素中的css媒體查詢:

樣式表中的css媒體查詢

@media (max-width: 600px) {

}

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

動態(tài)rem

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

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

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

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

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

相關(guān)文章

  • 移動端布局與適配

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

    Clect 評論0 收藏0

  • 移動端適配方案

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

    feng409 評論0 收藏0

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

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

    wangbinke 評論0 收藏0

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

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

    tianren124 評論0 收藏0

  • 我對移動端適配的了解

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

    import. 評論0 收藏0

  • 我對移動端適配的了解

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

    snowLu 評論0 收藏0

發(fā)表評論

0條評論

DobbyKim

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<