移動端與響應式筆記

2021-10-24 22:26:00 字數 784 閱讀 7044

移動端與響應式

meta viewport:視窗的設定(僅使用移動端)

width=device-width 寬度=裝置寬度(適配不同手機,可以寫死為750)

initial-scale=1 初始化比例為1

mininum-scale=1 最小縮小比例為1

maxinum-scale=1 最大放大比例為1

user-scalable=no 使用者能否進行縮放

物理解析度&&系統解析度

pc端與移動端響應式

一般情況,乙個專案會劃分為pc端頁面和移動端頁面。

響應式頁面:適應pc的頁面和移動端頁面

**查詢

寬度大於1200px時樣式

@media only screen and (min-width:1200px)

} 寬度小於600px時樣式

@media only screen and (max-width:600px)

寬度大於600px且小於1200px時樣式

@media only screen and (min-width:600px) and (max-width:1200px)

注意: 1.並不是所有頁面都需要移動端和pc端響應。

因為如果頁面比較複雜,**就會比較凌亂和繁多。

且不能更加針對性的設定pc和移動端頁面。

2.使用**查詢,必須加上 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...

移動端與響應式02

一般情況下,乙個專案會劃分為pc端的頁面與移動端的頁面。還有一種,只需要一頁 就可以適應pc端與移動端,比如蘋果的官方 這就需要用到 查詢 media的操作。舉個例子 現在有乙個需求,當為pc大螢幕的時候,d1這個div佔據50 的寬度 當為移動端小螢幕的時候 這裡設定為小於600px d1佔據10...

移動端與響應式布局

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