css3-Media Query实现最简单的响应式布局

最新推荐文章于 2021-03-29 09:02:09 发布

EffIdong

最新推荐文章于 2021-03-29 09:02:09 发布

阅读量428

点赞数

分类专栏： CSS 文章标签： css3 响应式

本文链接：https://blog.youkuaiyun.com/Efficiency9/article/details/73301818

版权

CSS 专栏收录该内容

15 篇文章

订阅专栏

本文档提供了一个简单的响应式网页设计示例，通过使用HTML和CSS，该示例能够根据屏幕尺寸变化调整页面样式。当屏幕宽度小于480像素时，网页背景将变为特定的颜色。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--外嵌方式-->
    <!--当屏幕分辨率小于480px时，背景色为max.css的背景色-->
    <link rel="stylesheet" href="max.css" media="only screen and (max-width:480px)">
    <style>
        /*内嵌方式*/
        /*当屏幕分辨率小于480px时，背景色为yellowgreen*/
        @media screen and (min-width:480px){
            body{background: yellowgreen;}
        }
    </style>
</head>
<body>

</body>
</html>