移動端的適配整理

一、移動端適配

方法一：viewport自適應螢幕寬度

在html中建立meta標籤：頁面的寬度等於螢幕的寬度。

bootstrap　　基於jquery的響應工具，適用於移動端、pc、pad等

elementui（pc端）、mintui（移動端）　　基於vue元件庫開發

二、移動端問題

（1）、1px 邊框

方法一：偽元素 + transform 實現

.scale-1px

.scale-1px::after

（2）、移動端布局方式

方法一：響應式布局

流式布局 + **查詢

方法二：彈性布局

flexbox 

方法三：rem 布局

code...

方法一：viewport自適應螢幕寬度

在html中建立meta標籤：頁面的寬度等於螢幕的寬度。

bootstrap　　基於jquery的響應工具，適用於移動端、pc、pad等

elementui（pc端）、mintui（移動端）　　基於vue元件庫開發

二、移動端問題

（1）、1px 邊框

方法一：偽元素 + transform 實現

.scale-1px

.scale-1px::after

（2）、移動端布局方式

方法一：響應式布局

流式布局 + **查詢

方法二：彈性布局

flexbox 

方法三：rem 布局

code...

移動端的適配整理

一 移動端適配 方法一 viewport自適應螢幕寬度 在html中建立meta標籤 頁面的寬度等於螢幕的寬度。方法二 框架搭建頁面 bootstrap 基於jquery的響應工具，適用於移動端 pc pad等 elementui pc端 mintui 移動端 基於vue元件庫開發 二 移動端問題 ...

移動端適配

js適配方案 function resizefun else body removeclass hightscreen shortscreen portrait var ratio window width window height if screenstate portrait else if ...

移動端適配

不論裝置寬度是多少，統一把布局視口設定成設計稿的寬度。假設設計稿寬度是375px。不管螢幕多大，都看作375px。width只能改變布局視口，不能改變視覺視口。定義設計稿的寬度 計算當前裝置的寬度document.documentelement.offsetwidth scale 裝置寬度 設計搞寬...