电脑端自适应布局

        html{
            font-size: 100px;
        }
        button{
            background-color: aqua;
            color: rgb(42, 19, 107);
            border: 0;
            outline: 0;
            font-size: 0.2rem;
            width: 0.6rem;
            height: 0.3rem;
            border-radius: 0.1rem;
            box-shadow: 2px 2px 2px #321232;
        }
        button:hover{
            cursor: pointer;
            opacity: 0.8;
            transition: 0.4s;
            color: rgb(218, 169, 255);
            background-color: rgb(2, 9, 15);
        }
        h2{
            font-size: 0.5rem;
            padding: 0;
            margin: 0;
        }
        /* img < 300 */
        @media (max-width:300){
            img {
                width: 300px;
            }
        }
        /* 301 < img < 500 */
        @media (min-width:301px) and (max-width:500px) {
            img {
                width: 400px;
            }
        }
        /* 501 < img < 900 */
        @media (min-width:501px) and (max-width:900px) {
            img {
                width: 450px;
            }
        }
        /* 901 < img < 1024 */
        @media (min-width:901px) and (max-width:1024px) {
            img {
                width: 500px;
            }
        }

<body>
    <h2>电脑端自适应布局</h2>
    <button>but1</button>
    <button>but2</button>
    <button>but3</button>
    <div>
        <img src="1.png" alt="">
    </div>    
</body>

相关文章