HTML适配 css代码根据屏幕大小适配 导入自己想要的字体

/*-----------

    响应式设计---适配多尺寸:
    原理:监听屏幕的最大尺寸,当屏幕缩小或者放大到该尺寸的时候,实现内部的样式改变
    退出: 高度也是一样的

----------*/

/*最大宽度为1154px*/
@media screen  and (max-width:1154px){
    #nav ul li a{
        width: 150px;
        font-size:28px;
    }
}

/*最大宽度为897px*/
@media screen  and (max-width:897px){
    #nav ul li a{
        width: 120px;
        font-size:25px;
    }
}

/*最大宽度为746px*/
@media screen  and (max-width:746px){
    #nav ul li a{
        width: 80px;
        font-size:20px;
    }

    #nav{
        margin-bottom: 60px;
    }
}

/*最大宽度为629px*/
@media screen  and (max-width:629px){
    #nav ul li a{
        width: 65px;
        font-size:20px;
        height: 40px;
        line-height: 40px;
    }

    #nav{
        margin-bottom: 30px;
    }


    #list .love{
        display: inline-block;
        width: 362px;
        text-align: left;
        padding: 20px;
    }

    #list .love img{
        width: 355px;
    }
}

*-------导入字体-------*/
@font-face {
    font-family: BebasNeue-webfont;
    src: url('../fonts/BebasNeue-webfont.ttf');
}