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');}