前言 在做公司做了很多大屏的项目之后，针对于屏幕适配，说实话有很多解决方案，例如媒体查询、scale缩放、Rem、vw等等，但每种方案都有其特定的使用场景，面对不同的项目，我们首先考虑的不是哪种方案最

出处 背景 近期公司投放在展厅大屏中演示的大数据页面，出现了文字、图表、表格等多类组件显示错乱的情况。 目的 解决页面错乱问题，实现多种分辨率的大屏适配 入坑分析 俗话说的好，走过的最多路，就是网友们

屏幕窗口适配是前端开发常见问题，每次新项目需求调研都绕不开讨论用什么适配方案，下面是我的遇到过的场景，总结出来适配方案

利用postcss-pxtorem自适应pc端分辨率 背景 1、1366*768 2、1920*1080 3、2k+屏幕 效果 由于px都变成了rem,字体大小，宽度等等都会随屏幕大小而变化。  1.

通常UI提供PC端项目的设计稿尺寸都是1920*1080(16:9)的，但是电脑显示屏的分辨率是不固定的，所以按照这个固定像素做出来的前端页面在不同的显示屏上可能会出现页面显示不全或者是页面无法充满屏

背景 现在手机、电脑、ipad成为了每个家庭必备内容，但是通常设计给到我们的都是一个固定大小的UI，如果用户是一个屏幕小或者大的设备，一般就会出现滚动条或者大片空白内容，为了更好的利用一些空间

组件将根据屏幕比例及当前浏览器窗口大小，自动进行缩放处理。 建议在组件内使用百分比搭配flex进行布局，以便于在不同的分辨率下得到较为一致的展示效果。 使用前请注意将body的margin设为0，否则会引起计算误差。 这样，一个页面自适应组件就这样搭建完成了，下面，我们将引入组…