简单地响应式布局----CSS3中的Media Query（媒介查询）

最新推荐文章于 2022-04-01 20:07:56 发布

九

最新推荐文章于 2022-04-01 20:07:56 发布

阅读量723

点赞数

分类专栏： html5 css 文章标签：布局响应式 html5 css3

本文链接：https://blog.csdn.net/qq_31301099/article/details/50382493

版权

html5 同时被 2 个专栏收录

28 篇文章 0 订阅

订阅专栏

css

20 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<style >

    @media screen and (min-width: 680px){   屏幕宽度大于680的布局
        #div_1{
            background-color: black;
            height: 200px;
            width: 200px;
        }
    }
    @media screen and (min-width: 480px) and (max-width: 680px){  屏幕宽度大于480小于680的布局
        #div_1{
            background-color: aqua;
            height: 400px;
            width: 400px;
        }
    }

    @media screen and (max-width: 480px){       屏幕宽度小于480的布局
        #div_1{            background-color: red;            height: 400px;            width: 400px;        }    }</style><body><div id="div_1"> </div></body></html>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

九

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
简单地响应式布局----CSS3中的Media Query（媒介查询）

html>html lang="en">head> meta charset="UTF-8"> title>title>head>style > @media screen and (min-width: 680px){ 屏幕宽度大于680的布局 #div_1{ background-color: black;
复制链接

扫一扫