阅读 10572

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

小知识,大挑战!本文正在参与“程序员必备小知识”创作活动。

本文同时参与 「掘力星计划」  ,赢取创作大礼包,挑战创作激励金

前言

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

  1. 第一种按照设计师提供的设计稿比例画页面的话,导致在不同比例的屏幕上,就会呈现不同的样式效果,有的过大有的过小,这时候用户就会问你,你是不是写的bug。。。很无语
  2. 第二种就是按照设计师提供的比例按自适应的方式来画页面,这样导致页面的尺寸与设计稿不同,并且在不同设备也会有差别,这时候设计师跟用户就会跑过来说,这里是不是少了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来查看灰色区域宽度。

<div id="app">
    <div class="nav">侧边栏
        <p>测试p字体</p>
    </div>
    <div class="content">内容</div>
</div>
复制代码
@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)});
复制代码
文章分类
前端
文章标签