当我缩小浏览器的大小时，如何让图片和文字一起缩小？

Question

我正在为我们的群组应用程序制作一个用户个人资料页面，我想知道当我缩小浏览器的大小时，如何使图片的大小和文本的大小缩小。

下面是类的scss代码：

    .show-picture{
        width: 200px;
        height: 150px;
        border-radius: 10%;
        size-adjust:relative;
    }

    .Trip_info{
        width: 20%;
        height: 200px;
        float:left;
    }

    .Planner_page{
        width: 20%;
        height: 200px;
        margin-left:40%;

    }

    .Social{
        width: 20%;
        height: 200px;
        float: left;
    }

    .Setting{
        width: 20%;
        height: 200px;
        margin-left:40%;
    }


    .button{
        font-size: 2em;
        letter-spacing: 0px;
        margin-bottom: 30px;
        margin: 4px 2px;
        cursor: pointer;
        text-align: center;
        text-decoration: none;
        color: grey;
  
    }

我试图将它们分成行的 div，但大小不会缩小。而且我也尝试了宽度和高度自动，但这个尺寸会非常奇怪。

Answer 1

        body{
            margin: 0;
            padding: 0;
            background-color: grey;
            text-align: center;
        }
        p{
            color: blue;
            font-size: 40px;
        }
        img{
            width: 300px;
            height: 300px;
        }


        /* media query breakpoints */

        @media screen and (max-width: 480px){
            body{
                background-color: lightblue;
            }
            p{
            color: red;
            font-size: 20px;
            }
            img{
                width: 150px;
                height: 150px;
            }
        }

<p>Dummy Text</p>
<img src="http://docllpdemo.com/asteroid/wp-content/uploads/2020/11/dummy-man.png" alt="dummy-man">

Answer 2

为响应式网站使用媒体查询断点