新建模板
小書匠▲
前言:學習目標:
學習目錄:
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 ...