响应室

最新推荐文章于 2024-05-23 18:58:38 发布

古月萧歌.

最新推荐文章于 2024-05-23 18:58:38 发布

阅读量114

点赞数

分类专栏： CSS 前端文章标签：响应室

本文链接：https://blog.csdn.net/weixin_45666821/article/details/103111953

版权

前端同时被 2 个专栏收录

24 篇文章 0 订阅

订阅专栏

CSS

6 篇文章 0 订阅

订阅专栏

[媒体查询]

响应式：根据浏览器宽度的不同（设备终端）来进行同一个区块，实现不同布局的展示

格式：@media screen and (取值)
取值1： min-width最小应用样式的范围
例： min-width:700px 表示从700开始应用相应的样式
取值2： max-width最大应用样式的范围
例： max-width:900px 表示样式只应用到900px

<header>        
 <nav>            
  <ul>                
    <li>1</li>                
    <li>2</li>               
    <li>3</li>            
  </ul>        
 </nav>    
</header>

/* 小于700 */
 @media screen and (max-width:700px) {
    header {        
    width: 100%;        
    background-color: skyblue;    
    }
    ul {        
    margin: 0;        
    padding: 0;    
    }
    li {        
    width: 200px;        
    list-style: none;        
    background-color: purple;        
    border: 1px solid wheat;    
    }
    }

在这里插入图片描述

/*700-900*/

@media screen and (min-width:700px ) and (max-width:900px){
        header {        
        width: 100%;        
        background-color: skyblue;   
         }
    ul {        margin: 0;        
    padding: 0;        
    display: flex;    }
    li {        width: 200px;        
    list-style: none;        
    background-color: deeppink;       
     border: 1px solid wheat;        
     margin: 0 20px;    }}

在这里插入图片描述

 /*900以上*/
 @media screen and (min-width:900px) {

    header {        width: 100%;        
    background-color: skyblue;    
    }
    ul {        margin: 0;        
    padding: 0;        
    display: flex;    }
    li {        width: 200px;        
    list-style: none;        
    background-color: purple;        
    border: 1px solid wheat;       
     margin: 0 20px;    }
     }