最近在写一个PC端的活动页面，即将完工的时候，增加了个需求，想让页面适配不同的分辨率，既然提出了这样的需求，那么我们就要去尽量满足。
之前一直写的是固定版心，然后在将容器居中，这样写的话，就导致页面在低分辨屏幕下会出现横向的滚动条，内容不能全部展示。
提出这个需求的时候脑海里闪过几个方案。

1、link media属性加载不同样式
<link href="css/test.css" media="screen and (max-device-width=1024px)"
这样写的话那么就需要每个分辨率都需要写一个样式，而且代码内容几乎一致，样式文件增多，后期需要修改的话也是一个不少的工作量。

2、transform:scale()当时脑子里也闪过这句话，
可以用js获取页面宽度，然后对元素进行缩放，这样内容也会随着缩放，但是元素所占的位置没有改变，transform会影响画布上的视觉布局，不会影响css布局本身，只是引起页面重绘。

3、rem布局
在做手机wep开发的时候，会经常用到rem。rem根据页面的根节点的字体大小进行转变。作法与手机一致，利用js动态计算页面宽度在设定根元素的字体大小。

4、css media
好在现在都是使用css预处理器来书写css，不然的话，这也是相当大的工作量。写这个的时候，是根据设计图中元素宽度在总宽度中的占比，根据比例，在不同分辨率下获得元素宽度，这样的话元素的高度无法控制，写的是max-height，内外边距和设计图上保持一致。以下是用scss写的部分

样式。
$screenWidthList: (960,1024,1280,1360,1366,1400,1600,1920,2048);
$designWidth: 1920;
@function percentToPx($width,$screenWidth){
$percent: $width/$designWidth;
@return $percent * $screenWidth * 1px;
}
@each $sw in $screenWidthList{
@media screen and (min-width: $sw*1px){

....
}
}

链接: https://fly63.com/article/detial/2381