Flutter螢幕適配（自適應）方案

現代手機螢幕尺寸各不相同，導致我們平時寫布局的時候會在個不同的移動裝置上顯示的效果不同。

為了達到一套**所有手機體驗一致效果，需要做尺寸上的適配。

適配方案：

計算公式：實際尺寸 = ui尺寸 * 裝置寬度/設計圖寬度

1px方案 : 1px = 1 / 裝置畫素比

實現**如下（以750設計圖為例）：

import 'package:flutter/material.dart';
import 'dart:ui';
class adapt 
static px(number)
return number * _ratio;
}static onepx()
static screenw()
static screenh()
static padtoph()
static padboth()
}

解析：1、預設750設計圖

2、引入 'dart:ui' 獲得螢幕尺寸相關資訊

3、計算真實畫素值

使用方式：

// 設定文字大小 30 為設計圖尺寸

new text(
'hello world!',
style: textstyle(
fontsize: adapt.px(30),
))// 容器尺寸大小設定 乙個設計圖為 300*300畫素的容器
new container(    width: adapt.px(300),  
height: adapt.px(300),
)// 1px 
new container(
decoration: new boxdecoration(
border: new border(bottom:borderside(width: adapt.one())),
),)

adapt.px(100) 計算適配後的尺寸

adapt.onepx() 1px畫素大小

螢幕自適應

1 media screen and max width 240px 寬度小於240px執行 media screen and min width 240px 寬度大於240px執行 2 flexible.js 在所有資源載入之前先放入 3 使用數值單位時可以嘗試使用rem作為單位替代px。rem一...

vue專案螢幕自適應 Vue專案螢幕自適應

一安裝lib flexible npm i lib flexible d 二在main.js中引入 import lib flexible flexible 三在index.html檔案中設定meta標籤四然後在專案中寫css時會自動將rem轉化為px,需要安裝px2rem這個工具 npm...

Flutter螢幕適配（自適應）方案

螢幕自適應

vue專案螢幕自適應 Vue專案螢幕自適應

vue專案螢幕自適應 Vue專案螢幕自適應

相關推薦