1920分辨率设计稿适配不同分辨率

Posted 2023-04-17

参考技术A function setRemFontSize()
const remSize = window.innerWidth / 19.2;
document.querySelector('html').style.fontSize = remSize + 'px';

100px = 1rem

setRemFontSize();
window.addEventListener('resize', function ()
setTimeout(function ()
setRemFontSize();
, 200);
);

移动适配移动Web怎么做屏幕适配

1

啃先生，移动端适配的是什么？

我们讨论的是网页适配多种尺寸屏幕，让网页效果看起来和设计师的设计稿一样。说白了就是 同一套代码在不同分辨率的手机上跑时，页面元素间的间距，留白，以及图片大小会随着变化，在比例上跟设计稿一致。

举个粟子吧

图1.  260*400的屏幕

图2.  380*400的屏幕

上边的页面在不同大小屏幕上的展现，咋一看没什么问题，一般的工程师会认为已经OK了，所以前端工程师很容易忽略屏幕适配。但是对于一些精益求精的产品而言，这还达不到要求。例如有以下问题：

1. 图1的屏幕的尺寸较小，因此头像应该小些，话题左边的空白也应该小一些。
2. 图片应该保持正方形，而且两张图之间的边距应该随屏幕变化而变化
   

明白了，所以padding，margin，图片等的大小基本都要做适配

2

那有什么方法可以做到这种适配？

关键要找到一种长度单位，使得一样的取值，在不同尺寸的屏幕上的大小按比例缩放。

长度单位我只知道px

以上是关于1920分辨率设计稿适配不同分辨率的主要内容，如果未能解决你的问题，请参考以下文章

怎样添加 android 1920 * 1080 ui

移动端适配方案

移动端页面制作字号大小设定问题,设计稿文字字号规范,解决移动端大小屏适配问题

移动端安卓界面设计规范有哪些？

聊聊PC端页面适配

响应式文字