作为一名前端开发者，你有没有遇到过这种头痛的事情。每次开发pc端的网页时，不管是官网还是管理后台，UI设计师都是按照1920*1080（16:9）的比例来给你提供设计稿的，导致你画页面的时候。会出现两种情况。

第一种按照设计师提供的设计稿比例画页面的话，导致在不同比例的屏幕上，就会呈现不同的样式效果，有的过大有的过小，这时候用户就会问你，你是不是写的bug。。。很无语

第二种就是按照设计师提供的比例按自适应的方式来画页面，这样导致页面的尺寸与设计稿不同，并且在不同设备也会有差别，这时候设计师跟用户就会跑过来说，这里是不是少了1px的单位，这里是不是写错了。。。很头疼

今天我就介绍一种可以解决pc端网页适配的方法，大家觉得有用的话，就给我个小小点赞，也可以在评论区留言。

PC实现适配也是用了rem这个css3属性，rem相对于根元素(即html元素)font-size计算值的倍数。这里以PC常见的分辨率1920px和1366px(14寸笔记本)为例说明。为了更好的说明，假设设计师给的设计稿是1920px，我们既要做1920px屏幕，也要给1366px的屏幕做适配。

现在我们随便取1920px设计稿一块区域，假设宽度273px，高度随意。那么在1366px屏幕上宽度应该显示多少呢？

我们将屏幕宽度等比分成100份

//1920分辨率屏幕
avg = 1920 / 100 = 19.20 px

//1366分辨率屏幕
avg = 1366 / 100 = 13.66 px

在1366分辨率屏幕应该显示宽度 = (1366 * 273) / 1920 最后是194.228125px

//1920分辨率屏幕定义根

font-size = 19.20px //即 1rem = 19.20px

//1366分辨率屏幕

font-size = 13.66px  //即 1rem = 13.66px

适配代码

html{
font-size:19.20px;  /*默认以设计稿为基准*/

}

@media only screen and (max-width: 1366px) {
html{
font-size:13.66px;

   }

}
#test{
width:14.21875rem;

}

id为test的盒子在1920屏幕宽度= 14.21875 * 19.20 最后是273

id为test的盒子在1366屏幕宽度= 14.21875 * 13.66 最后是194.228125

这样一来我们就适配了1920px和1366px屏幕。PC一般也就是这两个分辨率占多数，兼容了这两个分辨率屏幕基本就可以了。在说下国内基本没有在兼容IE8的浏览器了。基本都是IE9+，css3属性在IE9+上还是可以使用的。不过建议小伙伴们使用前还是确定下，浏览器兼容

最后在对上面补充点，有的小伙伴可能觉得每次设置宽高前都要手动的转换，实在是太麻烦，不要着急我为大家找了个sass方法。

// PX 转 rem 
@function px2Rem($px, $base-font-size: 19.2px) {
@if (unitless($px)) { 
//有无单位 
@return ($px / 19.2) * 1rem; 

    } @else if (unit($px) == em) { 
@return $px; 

    } 
@return ($px / $base-font-size) * 1rem; 

}

测试下上面的方法

#test{
width:px2Rem(273px) 

}
//输出
#test{
width:14.21875rem;

}

大家将屏幕分辨率调整为1920px和1366px来查看灰色区域宽度。

@function px2Rem($px, $base-font-size: 19.2px) {

@if (unitless($px)) { //有无单位

@return ($px / 19.2) * 1rem;


} @else if (unit($px) == em) {

@return $px;


}
@return ($px / $base-font-size) * 1rem;

}


*{
margin:0;

padding:0;

}


html{
font-size:19.20px;

}


html,body{
height:100%;

}


body{
font-size:px2Rem(16px);

}


#app{
position:relative;

width:100%;

height:100%;

}


.nav{
position:fixed;

left:0;

top:0;

width:px2Rem(273px);

height:100%;

background-color:#E4E4E4;

transition:all .3s;

z-index:11;

}


.content{

position:absolute;

left:px2Rem(273px);

top:0;

right:0;

bottom:0;

width:auto;

height:100%;

background-color:#CBE9CB;

overflow-y:auto;

z-index:10;

}


p{
font-size:px2Rem(20px);

}

@media only screen and (max-width: 1366px) {
html{
font-size:13.66px;

    }

}

效果图

小伙伴们如果有更好的PC适配方案也可给我讲讲，欢迎在下方留言

sass下使用变量

height: calc(100% - #{px2rem(200px)});