前端成神之路-移動web開發_流式佈局

不一樣的花朵發表於2020-11-28
前端Web

移動web開發流式佈局

1.0 移動端基礎

1.1瀏覽器現狀

PC端常見瀏覽器：360瀏覽器、谷歌瀏覽器、火狐瀏覽器、QQ瀏覽器、百度瀏覽器、搜狗瀏覽器、IE瀏覽器。

移動端常見瀏覽器：UC瀏覽器，QQ瀏覽器，歐朋瀏覽器，百度手機瀏覽器，360安全瀏覽器，谷歌瀏覽器，搜狗手機瀏覽器，獵豹瀏覽器，以及其他雜牌瀏覽器。

國內的UC和QQ，百度等手機瀏覽器都是根據Webkit修改過來的核心，國內尚無自主研發的核心，就像國內的手機作業系統都是基於Android修改開發的一樣。

總結：相容移動端主流瀏覽器，處理Webkit核心瀏覽器即可。

1.2 手機螢幕的現狀

  • 移動端裝置螢幕尺寸非常多，碎片化嚴重。
  • Android裝置有多種解析度：480x800, 480x854, 540x960, 720x1280，1080x1920等，還有傳說中的2K，4k屏。
  • 近年來iPhone的碎片化也加劇了，其裝置的主要解析度有：640x960, 640x1136, 750x1334, 1242x2208等。
  • 作為開發者無需關注這些解析度，因為我們常用的尺寸單位是 px 。

1.3常見移動端螢幕尺寸

1.4移動端除錯方法

  • Chrome DevTools（谷歌瀏覽器）的模擬手機除錯
  • 搭建本地web伺服器，手機和伺服器一個區域網內，通過手機訪問伺服器
  • 使用外網伺服器，直接IP或域名訪問

2.0 視口

視口（viewport）就是瀏覽器顯示頁面內容的螢幕區域。 視口可以分為佈局視口、視覺視口和理想視口

2.1 佈局視口 layout viewport

一般移動裝置的瀏覽器都預設設定了一個佈局視口，用於解決早期的PC端頁面在手機上顯示的問題。

iOS, Android基本都將這個視口解析度設定為 980px，所以PC上的網頁大多都能在手機上呈現，只不過元素看上去很小，一般預設可以通過手動縮放網頁。
在這裡插入圖片描述

####2.2視覺視口 visual viewport

字面意思，它是使用者正在看到的網站的區域。注意：是網站的區域。

我們可以通過縮放去操作視覺視口，但不會影響佈局視口，佈局視口仍保持原來的寬度。

在這裡插入圖片描述

2.3理想視口 ideal viewport

為了使網站在移動端有最理想的瀏覽和閱讀寬度而設定

理想視口，對裝置來講，是最理想的視口尺寸

需要手動添寫meta視口標籤通知瀏覽器操作

meta視口標籤的主要目的：佈局視口的寬度應該與理想視口的寬度一致，簡單理解就是裝置有多寬，我們佈局的視口就多寬

總結：我們開發最終會用理想視口，而理想視口就是將佈局視口的寬度修改為視覺視口

2.4meta標籤

在這裡插入圖片描述

最標準的viewport設定

  • 視口寬度和裝置保持一致
  • 視口的預設縮放比例1.0
  • 不允許使用者自行縮放
  • 最大允許的縮放比例1.0
  • 最小允許的縮放比例1.0

3.0二倍圖

####3.1物理畫素&物理畫素比

物理畫素點指的是螢幕顯示的最小顆粒，是物理真實存在的。這是廠商在出廠時就設定好了,比如蘋果6 是 750* 1334

我們開發時候的1px 不是一定等於1個物理畫素的

一個px的能顯示的物理畫素點的個數，稱為物理畫素比或螢幕畫素比

如果把1張100*100的圖片放到手機裡面會按照物理畫素比給我們縮放

lRetina（視網膜螢幕）是一種顯示技術，可以將把更多的物理畫素點壓縮至一塊螢幕裡，從而達到更高的解析度，並提高螢幕顯示的細膩程度。

對於一張 50px * 50px 的圖片,在手機或 Retina 屏中開啟，按照剛才的物理畫素比會放大倍數，這樣會造成圖片模糊

在標準的viewport設定中，使用倍圖來提高圖片質量，解決在高清裝置中的模糊問題

通常使用二倍圖， 因為iPhone 6 的影響背景圖片 注意縮放問題

3.2背景縮放background-size

background-size 屬性規定背景影像的尺寸

background-size: 背景圖片寬度 背景圖片高度;

單位： 長度|百分比|cover|contain;

cover把背景影像擴充套件至足夠大，以使背景影像完全覆蓋背景區域。

contain把影像影像擴充套件至最大尺寸，以使其寬度和高度完全適應內容區域

4.0 移動開發選擇和技術解決方案

####4.1移動端主流方案

1.單獨製作移動端頁面（主流）

通常情況下，網址域名前面加 m(mobile)
可以開啟移動端。通過判斷裝置，如果是移動裝置開啟，則跳到移動端頁面。

也就是說，PC端和移動端為兩套網站，pc端是pc斷的樣式，移動端在寫一套，專門針對移動端適配的一套網站

京東pc端：

在這裡插入圖片描述

京東移動端：
在這裡插入圖片描述

2.響應式頁面相容移動端（其次）
在這裡插入圖片描述

響應式網站：即pc和移動端共用一套網站，只不過在不同螢幕下，樣式會自動適配

4.2 移動端技術解決方案

1.移動端瀏覽器相容問題

移動端瀏覽器基本以 webkit 核心為主，因此我們就考慮webkit相容性問題。

我們可以放心使用 H5 標籤和 CSS3 樣式。

同時我們瀏覽器的私有字首我們只需要考慮新增 webkit 即可

2.移動端公共樣式

移動端 CSS 初始化推薦使用 normalize.css/

Normalize.css：保護了有價值的預設值

Normalize.css：修復了瀏覽器的bug

Normalize.css：是模組化的

Normalize.css：擁有詳細的文件

官網地址： http://necolas.github.io/normalize.css/

4.3 移動端大量使用 CSS3盒子模型box-sizin

傳統模式寬度計算：盒子的寬度 = CSS中設定的width + border + padding

CSS3盒子模型： 盒子的寬度= CSS中設定的寬度width 裡面包含了 border 和 padding

也就是說，我們的CSS3中的盒子模型， padding 和 border 不會撐大盒子了

/*CSS3盒子模型*/
box-sizing: border-box;
/*傳統盒子模型*/
box-sizing: content-box;

移動端可以全部CSS3 盒子模型

PC端如果完全需要相容，我們就用傳統模式，如果不考慮相容性，我們就選擇 CSS3 盒子模型

4.4移動端特殊樣式

    /*CSS3盒子模型*/
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    /*點選高亮我們需要清除清除  設定為transparent 完成透明*/
    -webkit-tap-highlight-color: transparent;
    /*在移動端瀏覽器預設的外觀在iOS上加上這個屬性才能給按鈕和輸入框自定義樣式*/
    -webkit-appearance: none;
    /*禁用長按頁面時的彈出選單*/
    img,a { -webkit-touch-callout: none; }

5.0移動端常見佈局

移動端單獨製作

  • 流式佈局（百分比佈局）
  • flex 彈性佈局（強烈推薦）
  • less+rem+媒體查詢佈局
  • 混合佈局

響應式

  • 媒體查詢
  • bootstarp

流式佈局：

流式佈局，就是百分比佈局，也稱非固定畫素佈局。

通過盒子的寬度設定成百分比來根據螢幕的寬度來進行伸縮，不受固定畫素的限制，內容向兩側填充。

流式佈局方式是移動web開發使用的比較常見的佈局方式。

相關文章