CSS3 怎么判断终端是手机、平板、PC

浏览数：5 / 时间：2023年03月21日

响应式前端，经常用到判断终端来源，以下是 css3 判断用户是什么类型的终端的代码：

<style>

/*手机*/
@media screen and (max-width:600px){
    .box_2 {
        padding-top: 45px;
        padding-bottom: 50px;
        /* background: #fff; */
        /* 添加背景图片 */
        background-image: url("Home/images/bgP.jpg");
        background-size: 100% 100%;
        background-repeat: no-repeat;
        background-position: center;
    }
}
/*平板*/
@media screen and (min-width:600px) and (max-width:960px){
    .box_2 {
        padding-top: 45px;
        padding-bottom: 50px;
        /* background: #fff; */
        /* 添加背景图片 */
        background-image: url("Home/images/bg2.jpg");
        background-size: 100% 100%;
        background-repeat: no-repeat;
        background-position: center;
    }
}
/*PC*/
@media screen and (min-width:960px){
    .box_2 {
        padding-top: 45px;
        padding-bottom: 50px;
        /* background: #fff; */
        /* 添加背景图片 */
        background-image: url("Home/images/bg2.jpg");
        background-size: 100% 100%;
        background-repeat: no-repeat;
        background-position: center;
    }
}

</style>

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。