移動(dòng)端比較麻煩的就是適配問(wèn)題村象。設(shè)計(jì)圖用px來(lái)畫笆环，該怎么開發(fā)或者適配呢？厚者？
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-
scale=1.0, maximum-scale=1.0,user-scalable=no">
viewport ：視口 就是 web 頁(yè)面上用戶的可見(jiàn)區(qū)域躁劣。就是手機(jī)的物理寬度。
后面的屬性就是直接翻譯后就可以
看到Html里面的這部分元數(shù)據(jù)的部分代碼之后库菲，離適配近了一大步账忘。
字體比較多，需要適配很多細(xì)節(jié)時(shí)候。極力推薦 rem方案鳖擒。直接上代碼, 整體思路就是用scss(css預(yù)編譯器)中將設(shè)計(jì)圖中px計(jì)算成rem溉浙。然后頁(yè)面根節(jié)點(diǎn)大小是根據(jù)窗口動(dòng)態(tài)變化的。（rem不熟悉的自行搜索）先看一下簡(jiǎn)單的例子蒋荚。
- 先安裝 flexble,安裝之后可以自行引入
npm install lib-flexible --save
// 使用flexble(vue的話 在main.js中引入)
import 'lib-flexible'
-
安裝完成之后放航，可以運(yùn)行之后看到下面的圖。
手機(jī)運(yùn)行模擬.png
html節(jié)點(diǎn).png
- 因?yàn)閣eb設(shè)計(jì)圖一般都是px來(lái)畫的圆裕。所以我們可以在scss里面寫一個(gè)將px轉(zhuǎn)換成Rem的函數(shù)
/* 根據(jù)750p分辨率來(lái)設(shè)置比率
**/
$base-design-font-size: 75px;
/*去掉數(shù)值后的單位 主要為了后面開發(fā)的維護(hù)*/
@function __strip-units($number) {
@if type-of($number) == 'number' {
@return $number/($number*0 +1);
}
@warn 'Exception in method __stip-unit : Not a number value: #{$number}';
@return $number;
}
//將px轉(zhuǎn)成rem
@function px2rem($origLen) {
$origLen: __strip-units($origLen);
$base-design-font-size: __strip-units($base-design-font-size);
@return #{$origLen/$base-design-font-size}rem;
}
- 在scss里面直接調(diào)用
//手機(jī)版本的樣式
@import '@/assets/css/base.scss';
// 寫設(shè)計(jì)圖中頁(yè)面的大小
比如圖片的 設(shè)計(jì)圖 width為81px广鳍。
img{
width:px2rem(81);
}
- 使用px2rem 在sass處理后瀏覽器的元素尺寸都是用rem來(lái)顯示的。
