pc端rem适配_PC端各分辨率适配

最近在写一个PC端的运动页面，行将落成的时刻，增加了个需求，想让页面适配差别的区分率，既然提出了如许的需求，那末我们就要去只管满足。

之前一直写的是牢固版心，然后在将容器居中，如许写的话，就致使页面在低区分屏幕下会涌现横向的滚动条，内容不能悉数展现。

提出这个需求的时刻脑海里闪过几个计划。

1、link media属性加载差别款式

如许写的话那末就须要每一个区分率都须要写一个款式，而且代码内容险些一致，款式文件增加，后期须要修正的话也是一个不少的工作量。

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){

....

}

}