注册

你还在为pc端适配而烦恼吗?相信我,看了之后就不烦恼了

作为一名前端开发者,你有没有遇到过这种头痛的事情。每次开发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;
}

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




内容



@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;
}
}

效果图


screenshot-waliblog.com-2021.10.05-01_12_14.png


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


sass下使用变量


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

链接:https://juejin.cn/post/7015257656193449992

0 个评论

要回复文章请先登录注册