极客观点
研发管理
HarmonyOS
比如1920的设计稿有一个模块宽400px
在写样式的时候是不是需要这样写：
@media screen and (min-width:1920px) {
.container .panel{width:400px; margin-top:20/1080 => 1.8%;}
}
@media screen and (min-width:1366px) {
.container .panel{width: 400 * 1366 / 1920 => 284.58px; margin-top:20*768 / 1080 => 14.2% }
}这样做适配对吗，如果接下来还要兼容1024X768 800X600甚至2K~4K屏，是不是都要这么算？感觉这样太烦琐了，不知道大佬们是怎么处理这种问题的呢？
我对于这个问题也很好奇。
看起来你试图使用媒体查询进行不同分辨率下的页面布局，然后进行计算试图获取一个和在1920px下同样的元素比例。
但是这个问题实际上挺复杂的，如果你只是想保证页面比例不会发生改变，那么可以采取rem的方案这是最常见的方法之一。
这里有几篇文章，追求速度直接在文章中搜索关键字rem就可以了：
长话短说,rem方案就是使用浏览器的大小属性之一的rem单位,因为这个单位的大小取决于根元素的字体大小,如果根元素的字体设置16px那么1rem就是16px, 400px也就是400/16 = 25rem了，然后根据页面的不同宽度来动态的计算根元素的字体大小，试想一下如果所有的大小都经过rem转换，那么这个网页可以适应不同分辨率的。
但是据我所知这个问题挺复杂的(真的),单纯的比例缩小对于移动设备来说没有太大意义,例如把淘宝桌面版完整的缩小到手机上也没有太大意义,因为根本看不清啊(而且没有这么简单）.
如果要是考虑到这点,就不如直接照搬bootstrap等现成的方案了,也就是栅格布局方案.这点在bootstrap3文档中就有介绍，或者你使用的前端类库中肯定有布局这个组件，大部分情况下都是照搬的bootstrap的模式就直接使用就好了。
最后一点,一般的网页都有个内容区域的最大限制一般是1200px和1400px之类的(取决于具体情况和设计),也就是说只有页面中央会有内容,那么4k或者更高分辨率的情况也就无需太过于操心了.
还有这只是我的自己的一点思考但是没有实际尝试过,如果你问题解决了,希望可以贴出解决问题方式.