自适应布局

最新推荐文章于 2024-06-28 21:22:19 发布

huanxiangcoco

最新推荐文章于 2024-06-28 21:22:19 发布

阅读量545

点赞数

分类专栏： CSS3、pink CSS3 文章标签：自适应布局

本文链接：https://blog.csdn.net/huanxianxianshi/article/details/105754638

版权

CSS3 同时被 2 个专栏收录

17 篇文章 0 订阅

订阅专栏

CSS3、pink

9 篇文章 0 订阅

订阅专栏

本文主要探讨了自适应布局在不同屏幕尺寸下的实现效果，特别关注当屏幕尺寸缩小至900px以下时的设计策略和解决方案，旨在为网页和应用提供流畅的用户体验。

摘要由CSDN通过智能技术生成

实现效果：
在这里插入图片描述

屏幕缩小至900以下
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
            .parent {
            width: 100%;
            background: pink;
        }
        
        .box {
            width: 1140px;
            margin-left: auto;
            margin-right: auto;
            display: flex;
            flex-direction: row;
            background: yellow;
            margin-bottom: 10px;
        }
        
        .left {
            width: 200px;
            height: 200px;
            background-color: red;
        }
        
        img {
            width: 100%;
            height: 100%;
        }
        
        .right {
            flex-grow: 1;
            margin-left: 10px;
            background-color: lime;
        }
        
        @media screen and (max-width: 900px) {
            .box {
                width: 200px;
                background: red;
                flex-direction: column;
            }
            .right {
                margin-left: 0;
            }
    </style>
</head>

<body>
    <div class="parent">
        <div class="box">
            <div class="left">
                <img src="1.jpg" alt="">
            </div>
            <div class="right">
                dcwegeftyru7yij78
            </div>
        </div>
        <div class="box">
            <div class="left">
                <img src="1.jpg" alt="">
            </div>
            <div class="right">
                dcwegeftyru7yij78
            </div>
        </div>
    </div>

</body>

</html>

huanxiangcoco

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
自适应布局

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&l...
复制链接

扫一扫

专栏目录