前端进阶路(一)（pc端适配手机端）

首先在head头部标签中写下适配属性：

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">

个人理解适配：

使用CSS媒体查询标签来达到适配的效果  ----------直接码上代码

/*css媒体查询适配*/
/*iphone5/SE*/
@media screen and (min-width: 320px) and (max-width: 568px) {
    /*导航栏字体*/
    .header-a {
        transform: translateX(40%);
        margin-left: 8px;
        font-size: 15px;
        color: black;
    }

    .item-div {
        position: absolute;
        width: 100%;
        top: 6px;
        transform: translateX(3%);
        color: white;
    }

    /*物流通/power-trans*/
    .power-trans {
        display: inline-block;
        position: relative;
        transform: translateY(39%);
        width: 200px;
    }

    .power-trans img {
        width: 184px;
    }

    /*字体自动换行样式*/
    .power-trans-font-div {
        width: 130px;
    }

    .power-trans-font-div h6 {
        color: black;
    }

    .power-trans-font {
        display: inline-block;
        position: relative;
        transform: translateY(-87%);
        margin-left: 194px;
    }

    .power-trans-font button {
        font-size: 10px;
        width: 65px;
        height: 25px;
        background-color: orangered;
    }

    .power-trans-font button:hover {
        color: white;
    }
}

/*iphone6/7/8*/
@media screen and (min-width: 375px) and (max-width: 667px) {
    .header-a {
        margin-left: 20px;
    }

    .item-div {
        top: 20px;
    }

    .power-trans {
        transform: translateY(39%);
    }

    .power-trans-font {
        transform: translateY(-95%);
        margin-left: 242px;
    }

    .power-trans-font h6 {
        font-size: 14px;
    }

    .power-trans img {
        width: 218px;
    }
}

/*iphone6/7/8plus*/
@media screen and (min-device-width: 414px) and (max-width: 736px) {
    .header-a {
        margin-left: 30px;
    }

    .power-trans {
        transform: translateY(43%);
    }
    .power-trans-font{
        transform: translateY(-102%);
        margin-left: 282px;
    }
    .power-trans img{
        width: 236px;
    }
}

/*iPad适配*/
@media screen and (min-width: 768px) and (max-width: 1024px) {
    .head-a {
        margin-left: 115px;
        color: black;
    }

    .item-div {
        top: 60px;
    }

    .power-trans {
        transform: translateY(120%);
    }

    .power-trans img {
        width: 320px;
    }
}

首先，使用 @media screen and (手机行型号最小宽度) and (手机型号最大宽度) 读取到手机的型号类型！上贴代码所有样式都是基于iphone5/SE   在切换成其它手机型号时，在对应的适配中改写需要更改的地方样式既可达到适配效果！

---------------------------------------我是下划线--------------------------------------------------

个人感觉：这样写很麻烦！但暂时还没找到更好的方法！网上看来很多资料，说有用js读取屏幕型号来达到适配的（ps:还是需要写不同手机型号类型的css样式），公司需要！暂时先写着 ！如果有大佬有更好的意见或者想法    欢迎留言指出不足！指教更好的方法！  每周一条博客！大家加油