当前位置：网站首页>Responsive page

Responsive page

2022-07-24 06:30:00 【PS notes】

The same set of static page code , Show different effects in different devices , And it can adapt

Monitor terminal equipment .

Media query

adopt @media Definition of style , The browser window meets the specified conditions , Will Yin use this style .

.box{

width:200px;

height:200px;

background-color:red;

}

Less than the specified width , Style works

@media screen and (max-width:600px){

background-color:blue;

}

</head>
<style>
    .box{
        width: 100px;
        height: 100px;
        background-color: yellow;
    }
    @media screen and (max-width:600px) {
        .box{
            width: 200px;
            height: 200px;
            background-color: red;
        }
    }
</style>
<body>
    <div class="box"></div>
        
</body>
</html>

You can also set multiple conditions ：

@media screen and (min - width:600px ) and (max-width:900px){

.box{

background-color:blue;

}

</head>
<style>
    .box{
        width: 100px;
        height: 100px;
        background-color: yellow;
    }
    @media screen and (min-width: 600px) and (max-width: 900px) {
        .box{
            width: 200px;
            height: 200px;
            background-color: red;
        }
    }
</style>
<body>
    <div class="box"></div>
        
</body>
</html>

Make a case ：

<style>
   .container{
        display: flex;
        width: 800px;
        margin:0 auto;
        background-color: #eee;
        justify-content: center;
    }
   .item{
        width: 200px;
        border: 1px solid red;
   }
   @media screen and ( max-width: 700px) {
        .container {
        width: 100%;
        flex-direction:column;
        }
    }
    .item{
        width: 100%;
    }
</style>
<body>
    <div class="container">
        <div class="item">
            <h1> file </h1>
        </div>
        <div class="item">
            <h1> Blog </h1>
        </div>
        <div class="item">
            <h1> video </h1>
        </div>
    </div>
        
</body>
</html>