移動端適配

DobbyKim 發布于2019-08-29 14:07 / 1827人閱讀

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

meta viewport

viewport的概念

移動設備上面的viewport就是設備上的屏幕用來顯示網頁的那塊區域，叫做視口，但是在默認情況下，移動設備上的viewport是要大于瀏覽器可視區域的，因為移動設備的分辨率相對于電腦來說比較小，所以為了能在移動設備上正常顯示那些傳統的電腦瀏覽器設計的網站，移動設備上的瀏覽器都會把自己默認的viewport設為980px或者1024px，所以移動設備上瀏覽器會出現橫向滾動條，因為瀏覽器可視區域寬度小于viewport

css中的1px不是設備的1px

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

三種viewport

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

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

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

利用meta viewport來控制viewport

進行移動設備開發時，將下面的代碼復制到head標簽中：

該標簽可以使移動設備開發時使用ideal viewport

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

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

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

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

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

媒體查詢

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

link元素中的css媒體查詢:

樣式表中的css媒體查詢

@media (max-width: 600px) {

}

可以根據自定義條件來設置媒體的樣式

動態rem

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

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

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

云服務器 GPU云服務器移動端適配移動端適配方案移動端適配 js 移動適配

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/112938.html

移動端布局與適配

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

Clect 2019-08-29 14:08 評論0 收藏0
移動端適配方案

摘要：業務環境是決定整體項目的適配方案的核心因素。而淘寶的主站和類似，分為移動端頁面和端頁面，端頁面同樣有著左右的留白，這也是為了讓用戶能夠在寬屏的時候將注意力集中在中間區域。移動端適配方案移動端適配方案是一個老生常談的話題，但是對于不同的項目、不同的業務場景可能會需要不同的適配方案來進行移動端適配，向下兼容的baseline也需要提前訂好。整體寬高其實移動端適配就和下面的玩具一樣，...

feng409 2019-08-30 15:54 評論0 收藏0
rem, vw, 還是...? 各憑本事的移動端適配方案

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

wangbinke 2019-08-29 16:56 評論0 收藏0
rem, vw, 還是...? 各憑本事的移動端適配方案

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

tianren124 2019-08-23 12:21 評論0 收藏0
我對移動端適配的了解

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

import. 2019-08-30 14:16 評論0 收藏0
我對移動端適配的了解

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

snowLu 2019-08-22 15:45 評論0 收藏0