瀏覽器切換裝置步驟：
f12開啟控制台，如圖：
viewport只針對於移動端，pc端無效
"viewport"
content="width=device-width,
initial-scale=
1.0,
maximum-scale=
1.0,
user-scalable=
0" /
>
width=device-width：寬度等於裝置寬度，瀏覽器寬度解析度等於系統的解析度
initial-scale=1：初始化比例是1
minimum-scale=1：最小的縮小比例是1
maximum-scale=1：最大的放大比例是1
user-scalable=no：使用者不允許縮放
物理解析度：即 標準解析度，是指 顯示屏顯示影象的原始解析度，也叫真實解析度
邏輯解析度：即 壓縮解析度，顯示屏解析度
決定影象清晰程度的是物理解析度，決定顯示屏的適用範圍的是邏輯解析度
兩者間由scale factor（縮放因子）計算得到
通常 物理解析度 > 邏輯解析度，而 物理解析度 = 邏輯解析度 * 縮放因子
但在使用 台式電腦 和 筆記本 的情況下 物理解析度 = 邏輯解析度
一般情況下，乙個專案會分為pc端的頁面的移動端的頁面
所以要獲取裝置的資訊，使用者傳送請求中包含了資訊
如果想要實現響應式布局
可以利用media設定不同解析度下各種情況的不同樣式
<
!doctype html>
"en"
>
"utf-8"
>
"viewport" content=
"width=device-width, initial-scale=1.0"
>
移動端與響應式<
/title>
.d1/* **查詢 */
/* 移動端設定 */
/* 設定小於600畫素時候的樣式 */
@media only screen and
(max-width:
600px )
}/* pc端設定 */
/* 設定大於1200畫素時候的樣式 */
@media only screen and
(min-width:
1200px)
}/* 平板設定 */
/* 設定600~1200px的樣式 */
@media only screen and
(min-width:
600px)
and(max-width:
1200px)
}<
/style>
<
/head>
/h1>
="d1"
>響應式1
<
/div>
="d1"
>響應式2
<
/div>
="d1"
>響應式3
<
/div>
="d1"
>響應式4
<
/div>
<
/body>
<
/html>注意：
1、並不是所有的介面都需要移動端和pc端響應，因為如果頁面比較複雜，那麼**就會比較凌亂，**量也會很多。並且不能針對性的設定移動端和pc端的頁面
2、使用**查詢，必須加上meta viewport設定
移動端響應式布局
1.快捷鍵 meta vp tab鍵 2.viewport視口 width device width 設定視口的寬度等於裝置的寬度，如果不設定的話，缺省視口寬度為980px。通俗的理解 我們這個操作其實就是告訴當前的瀏覽器按照多少寬度來渲染頁面，換句話說，就是展示當前這個頁面的區域一共有多寬 瀏覽器...
移動端響應式布局基礎
搭建乙個h5頁面，我們需要在head中新增乙個meta標籤 快捷鍵 meta vp tab鍵 width device width 設定視口的寬度等於裝置的寬度，如果不設定的話，缺省視口寬度為980px。通俗的理解 我們這個操作其實就是告訴當前的瀏覽器按照多少寬度來渲染頁面，換句話說，就是展示當前這...
移動端與響應式
lang en charset utf 8 name viewport content width device width,initial scale 1.0,minimum scale 1.0,maximum scale 1.0,user scalable no documenttitle he...