最近在写一个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){

    ....

}
}