002 移動WEB開發之流式布局 md

2022-10-11 03:03:09 字數 1979 閱讀 5230

新建模板

小書匠▲

前言:學習目標:

學習目錄:

pc端常見瀏覽器

移動端常見瀏覽器

總結︰相容移動端主流瀏覽器,處理webkit核心瀏覽器即可。

各種尺寸的顯示裝置

常見移動端螢幕尺寸

作為前端開發,我們不需要去糾結 dp dpi pt ppt 等單位.

視口(viewport)就是瀏覽器顯示頁面內容的螢幕區域. 視口可以分為布局視口,視覺視口理想視口.

布局視口概念圖

視覺視口

語法:

name="viewport"

content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">

屬性解釋說明

width

寬度設定的是 viewport寬度,可以設定device-width特殊值

initial-scale

初始化縮放比,大於0的數字

maximum-scale

最大縮放比,大於0的數字

minimum-scale

最小縮放比,大於0的數字

user-scalable

使用者是否可以縮放,yes或no (1或0)

為什麼手機端不能和pc端一樣實現 1px = 1物理畫素呢?

解析度對比

邏輯示意圖

物理畫素與 retina 螢幕在開發意義上對畫素的理解如下:

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

語法:

background-size:  背景寬度 背景高度;
或者:

background-size:  背景的寬度;
如果只寫乙個引數,那麼這個引數就是寬度,高度會根據設定的寬度,進行等比例縮放。

注意: 單位可以是百分比,可以是px,可以是cover,可以是contain,如果是百分比,那麼這個百分比是相對于父盒子而言的。

單獨製作移動端頁面(主流)

京東**手機版

**觸屏版

蘇寧易購手機版

……響應式頁面相容移動端 (其次)

三星手機官網

……通常情況下,**網域名稱前面加m(mobile)可以開啟移動端。 通過判斷裝置,如果是移動裝置開啟,則跳轉至移動端頁面

三星電子官網,通過判斷螢幕

缺點: 製作麻煩,需要花很大精力去除錯 相容性問題。

現在市場常見的移動端開發有 單獨製作移動端頁面 和響應式頁面 兩種方案, 現在市場主流的選擇還是單獨製作移動端頁面。

移動Web端 流式布局

2 作為開發者無需關注這些解析度,因為我們常用的尺寸單位是 px 3 移動端除錯方法 1 chrome devtools 谷歌瀏覽器 的模擬手機除錯 2 搭建本地web伺服器,手機和伺服器乙個區域網內,通過手機訪問伺服器 3 使用外網伺服器,直接ip或網域名稱訪問 二 視口 視口 viewport ...

前端布局方法之流式布局

移動端 viewport是瀏覽器顯示頁面內容的螢幕區域 viewport 是使用者網頁的可視區域。viewport 翻譯為中文可以叫做 視區 layout viewport visual viewport 理想視口 meta標籤 視口寬度和裝置寬度一致 預設縮放比例為1.0 不允許使用者縮放 最大縮...

什麼是移動web開發流式布局,具體實現方法是怎樣的

總結 相容移動端主流瀏覽器,處理webkit核心瀏覽器即可。視口寬度和裝置保持一致 視口的預設縮放比例1.0 不允許使用者自行縮放 最大允許的縮放比例1.0 最小允許的縮放比例1.0 物理畫素點指的是螢幕顯示的最小顆粒,是物理真實存在的。這是廠商在出廠時就設定好了,比如蘋果6 是 750 1334 ...