响应式布局和rem移动端兼容

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第11天，点击查看活动详情。

一。 屏幕的类型由多种 比如电脑屏幕 比如打印机 screen 就表示所有的电子设备的屏幕 print 表示打印机的屏幕 如果想所有的设备比如电脑屏幕和打印机都使用媒体查询以及其他的屏幕 可以使用@media all

 <style>
    * {
        margin: 0;
        padding: 0;
    }

    nav {
        background: black;
        line-height: 43px;
        text-align: center;
        display: flex;
        position: relative;
    }

    .item {
        color: white;
        width: 200px;
    }

    /* 屏幕的类型由多种 比如电脑屏幕 比如打印机
    screen 就表示所有的电子设备的屏幕 
    print 表示打印机的屏幕
    如果想所有的设备比如电脑屏幕和打印机都使用媒体查询以及其他的屏幕
    可以使用@media all */
    /* @media screen and (max-width:1100px) {
        nav {
            background: red;
        }
    }
    屏幕小于等于1100px的时候,背景颜色为 */
    @media screen and (min-width:600px) {
        li {
            display: none;
        }
    }

  /* 屏幕大于等于600px的时候,li隐藏 */
    @media screen and (max-width:600px) {
        .a {
            display: none;
        }

        .item:last-of-type {
            display: block !important;
        }

        li {
            display: block;
            width: 100vw;
        }
    }
    
   
    @media all and (min-width:600px) and (max-width:1000px) {
        .item {
            color: red;
        }
    }

    /* 所有屏幕大于等于600，小于等于1000的时候，字体颜色变红色 */
    ul {
        position: absolute;
        top: 43px;
        left: 0;
    }

    li {
        list-style: none;
        line-height: 40px;
        background-color: black;
        color: white;
        border-bottom: 1px solid white;
        /* display: none; */
    }
</style>

二。理想视口和em rem

em 相对于父元素的大小

rem 相对于根元素html的大小

使用物理单位在不同宽度和不同分辨率的手机上会有一定的差异 我，们在这里推荐使用rem或者em 作为移动端的单位 来兼容不同的手机设备

em是相对于父级单位的大小来显示的 不够固定 我们一般使用rem作为移动端的主流单位 ， 因为rem是相对于根元素html的大小来显示的 html的大小相对固定

   html{
        font-size: 100px;
    }
    .a{
        font-size: 100px;
    }
    .d{
        font-size: 1rem;
    }

   <style>
    * {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    html {
        font-size: 100px;
    }

    body {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .box {
        border: .01rem solid #ccc;
        width: 3rem;
        border-bottom: none;
    }

    .a {
        background-color: #4CCDE2;
        line-height: .35rem;
        width: 3rem;
        display: flex;
        justify-content: center;
        align-items: center;
        justify-content: space-between;
    }

    p {
        font-size: .13rem;
        color: white;
    }

    .a img {
        width: .15rem;
        height: .15rem;
        margin: 0 .1rem;
    }

    ul {
        padding-left: 10px;
    }

    li {
        font-size: .14rem;
        line-height: .3rem;
        border-bottom: 0.01rem solid #ccc;
        display: flex;
    }

    header {
        background: #F2F2F2;
        font-size: .14rem;
        color: #ccc;
        line-height: .3rem;
        padding-left: .13rem;
    }

    span {
        display: block;

    }

    li span:first-child {
        color: #ccc;
        width: .69rem;
    }

    li span:last-child {
        color: #A8A8A8;
        width: 1.95rem;
    }

    footer span:first-child {
        color: #ccc;
        width: .69rem;
        }

    footer span:last-child {
        color: #A8A8A8;
        width: 1.95rem;
    }

    footer {
        font-size: .14rem;
        line-height: .3rem;
        display: flex;
        border-bottom: 1px solid #ccc;
        padding-left: .1rem;
    }
</style>