我正在参加跨端技术专题征文活动，详情查看：juejin.cn/post/710123…

在跨端开发过程中，我们通常会遇到设计图固定尺寸，但是在不同设备上显示会不同，比如在iphoneX与iPhoneXR设备上相同150px显示大小效果是不同的，我们期望在不同设备上能够有相同效果，让UI在不同尺寸的屏幕上都能显示合理的布局。

 屏幕尺寸大全

1.方案一

传统的css适配rem、视口（vw、vh） rem是一种css单位，rem的英文全称是“font size of the root element”，是指相对于根元素的字体大小的单位；而em是指相对于父元素的字体大小的单位。
vw: 视口宽度的百分比（1vw 等于视口宽度的 1%）
**vh: **视口高度的百分比（1vh 等于视口高度的 1%）
通过设置rem、或者使用视口方式来设置字体、宽度、高度的方式实现设备屏幕的适配。

2.方案二

flutter_screenutil flutter_screenutil是目前较为流行的屏幕适配方案，其原理是获取原型设备以及实际设备的尺寸，通过等比例缩放进行px的适配。

安装依赖：

安装之前请查看最新版本 新版本如有问题请使用上一版

dependencies:
  flutter:
    sdk: flutter
  # 添加依赖
  flutter_screenutil: ^5.0.0-nullsafety.0

初始化

属性	类型	默认值	描述
designSize	Size	Size(1080, 1920)	设计稿中设备的尺寸(单位随意,但在使用过程中必须保持一致)
allowFontScaling	bool	false	设置字体大小是否根据系统的“字体大小”辅助选项来进行缩放

初始化并设置适配尺寸及字体大小是否根据系统的“字体大小”辅助选项来进行缩放

//填入设计稿中设备的屏幕尺寸

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    //设置适配尺寸 (填入设计稿中设备的屏幕尺寸) 此处假如设计稿是按iPhone6的尺寸设计的(iPhone6 750*1334)
    return ScreenUtilInit(
      designSize: Size(750, 1334),
      allowFontScaling: false,
      child: MaterialApp(
        ...
      ),
    );
  }
}

//默认 width : 1080px , height:1920px , allowFontScaling:false
ScreenUtil.init(constraints);

//假如设计稿是按iPhone6的尺寸设计的(iPhone6 750*1334) 
ScreenUtil.init(constraints, designSize: Size(750, 1334));

//设置字体大小根据系统的“字体大小”辅助选项来进行缩放,默认为false
ScreenUtil.init(constraints, designSize: Size(750, 1334), allowFontScaling: true);

在每个使用的地方导入包：

import 'package:flutter_screenutil/flutter_screenutil.dart';

使用

传入设计稿的px尺寸 px
使用 sdk>=2.6 的用法

ScreenUtil().setWidth(540)  (sdk>=2.6 : 540.w) //根据屏幕宽度适配尺寸
ScreenUtil().setHeight(200) (sdk>=2.6 : 200.h) //根据屏幕高度适配尺寸
ScreenUtil().setSp(24)      (sdk>=2.6 : 24.sp)  //适配字体
ScreenUtil().setSp(24, allowFontScalingSelf: true)   (sdk>=2.6 : 24.ssp) //适配字体(根据系统的“字体大小”辅助选项来进行缩放)
ScreenUtil().setSp(24, allowFontScalingSelf: false)  (sdk>=2.6 : 24.nsp) //适配字体(不会根据系统的“字体大小”辅助选项来进行缩放)

ScreenUtil().pixelRatio       //设备的像素密度
ScreenUtil().screenWidth   (sdk>=2.6 : 1.sw)   //设备宽度
ScreenUtil().screenHeight  (sdk>=2.6 : 1.sh)   //设备高度
ScreenUtil().bottomBarHeight  //底部安全区距离，适用于全面屏下面有按键的
ScreenUtil().statusBarHeight  //状态栏高度 刘海屏会更高  单位dp
ScreenUtil().textScaleFactor //系统字体缩放比例

ScreenUtil().scaleWidth  // 实际宽度的dp与设计稿px的比例
ScreenUtil().scaleHeight // 实际高度的dp与设计稿px的比例

0.2.sw  //屏幕宽度的0.2倍
0.5.sh  //屏幕高度的50%

参考文档：

• 官方中文文档