移動端是怎麼做適配的?

2021-09-27 21:45:35 字數 974 閱讀 5354

width=device-width: 讓當前視口寬度等於裝置的寬度

user-scalable=no: 禁止使用者縮放

initial-scale=1.0: 設定頁面的初始縮放值為1.0

maximum-scale=1.0: 允許使用者的最大縮放值為1.0

minimum-scale=1.0: 允許使用者的最小縮放值為1.0

@media (查詢條件 )

//滿足()中的查詢條件,就會應用{}中的css樣式

@media(max-windth:800px)

}//如果某個**的最大寬度為800px(0-800之間),

那麼它就會應用這個樣式。

@media (min-width:321px) and (max-width:375px)

}//同時滿足兩個條件,大於等於321,小於等於375

這個單位代表根元素的 font-size 大小(例如 元素的font-size)。當用在根元素的font-size上面時 ,它代表了它的初始值。

即:

如果設定 html 的font-size為20px ,那麼 1rem就等於20px。

這樣的話,就可以根據根元素html的font-size值來寫各元素的尺寸大小。

在script標籤中寫入以下**:

那麼,在寫css的時候就可以根據想要的不同尺寸,以rem為單位來寫寬度和高度。

例如:

.***
不過此時html的字型大小就太大了,只需要在body中另寫乙個font-szie就行了。

移動端適配是怎麼做的?

一 使用 meta viewport 在head標籤內部加入以下 改 的作用是讓當前viewport的寬度等於裝置的寬度,同時不允許使用者手動縮放 width device width 讓當前viewport的寬度等於裝置的寬度 user scalable no 禁止使用者縮放 initial sc...

移動端是怎麼做適配的?

移動端 所謂移動端,就是指移動裝置的頁面,與之相對的稱為桌面端頁面,也稱為pc端頁面 適配 適配是一種自適應方案,用來解決由於終端眾多導致的頁面尺寸問題 1 用meta標籤 在head標籤中新增meta標籤,如下 該mate標籤的屬性內容解釋如下 name viewport 命名該meta標籤 wi...

HTML 移動端是怎麼做適配的?

一 meta viewport 在head標籤內部加上這段 該meta標籤的作用是讓當前viewport的寬度等於裝置的寬度,同時不允許使用者手動縮放。width device width 讓當前viewport寬度等於裝置的寬度 user scalable no 禁止使用者縮放 initial s...