移動端與響應式02

一般情況下，乙個專案會劃分為pc端的頁面與移動端的頁面。還有一種，只需要一頁**，就可以適應pc端與移動端，比如蘋果的官方**。這就需要用到**查詢@media的操作。

舉個例子：現在有乙個需求，當為pc大螢幕的時候，d1這個div佔據50%的寬度；當為移動端小螢幕的時候(這裡設定為小於600px)，d1佔據100%的寬度。

**如下：

lang
="en"
>
>
charset
="utf-8"
>
name
="viewport"
content
="width=device-width, initial-scale=1.0"
>
>
documenttitle
>
>
.d1/* **查詢 */
/* 設定小於600畫素時候的樣式 */
@media screen and (
max-width
:600px) }
style
>
head
>
>
class
="d1"
>
div>
body
>
html
>

舉一反三，就可以設定不同畫素區間的樣式，例如：

lang
="en"
>
>
charset
="utf-8"
>
name
="viewport"
content
="width=device-width, initial-scale=1.0"
>
>
documenttitle
>
>
.d1/* **查詢 */
/* 移動端設定 */
/* 設定小於600畫素時候的樣式 */
@media screen and (
max-width
:600px) }
/* 平板設定 */
/* 設定大於600畫素小於1200畫素的樣式 */
@media screen and (
min-width
:600px) and (
max-width
: 1200px) }
/* pc端設定 */
/* 設定大於1200畫素時候的樣式 */
@media screen and (
min-width
:1200px) }
style
>
head
>
>
class
="d1"
>
div>
body
>
html
>

並不是所有的頁面都需要移動端和pc端響應，因為如果頁面比較複雜，那麼**就會比較凌亂比較繁多。而且不能更加針對性的設定pc與移動端頁面。

使用**查詢，必須加上meta viewport標籤。

移動端與響應式

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...

移動端與響應式布局

瀏覽器切換裝置步驟 f12開啟控制台，如圖 viewport只針對於移動端，pc端無效 viewport content width device width,initial scale 1.0,maximum scale 1.0,user scalable 0 content的配置 width d...

移動端與響應式筆記

移動端與響應式 meta viewport 視窗的設定 僅使用移動端 width device width 寬度 裝置寬度 適配不同手機，可以寫死為750 initial scale 1 初始化比例為1 mininum scale 1 最小縮小比例為1 maxinum scale 1 最大放大比例為...