移動端適配是怎麼做的?

2021-09-17 01:46:35 字數 721 閱讀 2013

一、使用 meta viewport ,在head標籤內部加入以下**,改**的作用是讓當前viewport的寬度等於裝置的寬度,同時不允許使用者手動縮放

width=device-width  讓當前viewport的寬度等於裝置的寬度

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

initial-scale=1.0 設定頁面初識縮放值為不縮放

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

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

二、**查詢(響應式)

格式一:

@media () and () {}     //滿足 () 內的提交,就會執行 {} 裡的樣式

eg:

格式二:

三、動態 rem 方案

原理:布局排版都用rem做單位,然後不同寬度的屏,js動態計算根節點的font-size。

在頁面中加入下面的**:

現在,根元素 html 的 font-size 的大小為 頁面的寬度 pagewidth 。

也就是說: 現在 ,1 rem === html 的 font-size === pagewidth。

因此,就可以利用 rem 來動態的控制頁面的大小。

移動端是怎麼做適配的?

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

移動端是怎麼做適配的?

width device width 讓當前視口寬度等於裝置的寬度 user scalable no 禁止使用者縮放 initial scale 1.0 設定頁面的初始縮放值為1.0 maximum scale 1.0 允許使用者的最大縮放值為1.0 minimum scale 1.0 允許使用者的...

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

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