如何用CSS判断手机、平板、PC终端？

最新推荐文章于 2025-03-20 20:50:19 发布

阿酷tony

最新推荐文章于 2025-03-20 20:50:19 发布

阅读量8.3k

点赞数 5

分类专栏： CSS3 html5 文章标签： CSS CSS判断 CSS终端适配

本文链接：https://blog.youkuaiyun.com/ffffffff8/article/details/120077593

版权

html5 同时被 2 个专栏收录

160 篇文章

订阅专栏

CSS3

27 篇文章

订阅专栏

<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>