使 css 下拉菜单响应

Question

我正在尝试使 css 下拉菜单根据浏览器 window 响应。

我希望菜单文本根据浏览器居中显示window

请观看此视频作为预期行为的示例：

/* ------------------------------------------ */
/* BASIC SETUP */
/* ------------------------------------------ */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.page-wrap {
    width: 1216px;
    margin: 0 auto;
}

/* ------------------------------------------ */
/* PAGE CONTENT */
/* ------------------------------------------ */
    
.box1 {
    height: 30px;
    width: 300px;
    background: #8242b1;
}    
    
.box2 {
    height: 30px;
    width: 300px;
    background: #b14242;
}     
    
.box3 {
    height: 30px;
    width: 300px;
    background: #424bb1;
}      

.page-content {
    display:flex;
    justify-content: center;
    transition: ease-in-out 0.3s;
    position:relative;
    top: -260px;
    z-index: 0; }
    
.toggle {
    transition: ease-in-out 0.3s;
    text-decoration: none;
    font-size: 30px;
    color: #eaeaea;
    position:relative;
    top: -120px;
    left: 20px;
    z-index: 1; }
    .toggle:hover  {
        color:#cccccc; }

.sidebar {
    display:flex;
    justify-content: center;
    align-items: center;
    transition: ease-in-out 0.3s;
    position: relative;
    top: -220px;
    bottom: 0px;
    left: 0px;
    height: 220px;
    width: auto;
    padding: 30px;
    background: #333;
    z-index: 1; }
    .sidebar li {
        display:flex;
        justify-content: center;
        list-style: none;
        color: rgba(255, 255, 255,0.8);
        font-family: 'Lato', sans-serif;
        font-size: 16px;
        margin-bottom: 16px;
        cursor: pointer; }
        .sidebar li:hover {
            color: rgba(255, 255, 255,1); }

#sidebartoggler {
  display: none; }
  #sidebartoggler:checked + .page-wrap .sidebar {
    top: 0px; }
  #sidebartoggler:checked + .page-wrap .toggle {
    top: 100px; }
  #sidebartoggler:checked + .page-wrap .page-content {
    padding-top: 220px; }

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

        <link rel="stylesheet" type="text/css" href="resources/css/style.css">        
        <link href='https://fonts.googleapis.com/css?family=Lato:400,900' rel='stylesheet' type='text/css'>
            
    </head>
    
<body>


<input type="checkbox" id="sidebartoggler" name="" value="">    
    
<div class="page-wrap"> 
    
    <div class="sidebar">
        <ul>
            <li>Home</li>
            <li>Projects</li>
            <li>Clients</li>
            <li>Blog</li>
            <li>Contact</li>
        </ul>
    </div>
    
    <label for="sidebartoggler" class="toggle">☰</label>
    
    <div class="page-content">
        <div class="box1"></div>            
        <div class="box2"></div>            
        <div class="box3"></div>            
    </div>
  
</div>
    
</body>
</html>

Answer 1

这会起作用，

.page-wrap{
width:1216px;
}

+ 按如下方式使用媒体查询：

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

.page-wrap{
width: 100%;}

}

使 css 下拉菜单响应

make css dropdown menu responsive

css

menu

dropdown

responsive-nav

+ 按如下方式使用媒体查询：