移動端的適配整理

一、移動端適配

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

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

方法二：框架搭建頁面

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

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

二、移動端問題

（1）、1px 邊框

方法一：偽元素 + transform 實現

.scale-1px

.scale-1px::after

方法二：view + rem 實現

（2）、移動端布局方式

方法一：響應式布局

流式布局 + **查詢

方法二：彈性布局

flexbox 

方法三：rem 布局

doctype html
>
<
html
>
<
head
>
<
meta 
charset
="utf-8"
>
<
title
>
title
>
<
script
>
//設定適口及縮放比例，目的：實現畫素1:1還原    
varratio =1
/(window.devicepixelratio||1
);  
瀏覽器的畫素比。
document.write(''
+ratio+'
,minimum-scale='+
ratio+'
,maximum-scale='+
ratio+'
,user-scalable=no" />')
//設定html字型大小
varsize 
=document.documentelement.clientwidth
/7.5; 
//以750尺寸計算
//要設定的html的font-size是100px,即1rem
document.getelementsbytagname(
'html')[
0].style.fontsize 
=size +'
px';        
script
>
head
>
<
body
>
code...
body
>
html
>

移動端的適配整理

一 移動端適配 方法一 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 裝置寬度 設計搞寬...