简单实现响应式布局

最新推荐文章于 2023-04-25 18:07:56 发布

Guovz

最新推荐文章于 2023-04-25 18:07:56 发布

阅读量602

点赞数

分类专栏： HTML5 文章标签：基础响应式 html

本文链接：https://blog.csdn.net/jilinwang/article/details/42462019

版权

HTML5 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

学习HTML5已有一段时间，今天用到响应式布局，分享自己的入门代码，希望能对初学前端的朋友有所帮助：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>响应式布局</title>
    <style type="text/css">
          .box{
                height: 100px;
                color: #000;
                font-size: 16px;
                text-align: center;
                line-height: 100px;
                float: left;
            }
           .box1{
                background: red;
            }
            .box2{
                background: orange;
            }
            .box3{
                background: yellow;
            }
             .box4{
                background: green;
            }
        @media(min-width: 768px){
            .box1{
                width: 20%;
            }
            .box2{
                width: 60%;
            }
            .box3{
                width: 20%;
            }
             .box4{
                width: 100%;
            }
        }
         
        @media (min-width: 372px) and (max-width: 768px) {
            .box1{
                width: 50%;
            }
            .box2{
                width: 50%;
            }
            .box3{
                width: 50%;
            }
            .box4{
                width: 50%;
            }
        }
         
        @media (max-width: 372px) {
            .box1{
                width: 100%;
            }
            .box2{
                width: 100%;
            }
            .box3{
                width: 100%;
            }
            .box4{
                width: 100%;
            }
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="box box1">box1</div>
        <div class="box box2">box2</div>
        <div class="box box3">box3</div>
        <div class="box box4">box4</div>
    </div>
</body>
</html>