Question

我的代码非常草率，我真的不知道如何使用媒体查询。我真的只是感觉到我的方式，现在我有一个非常草率的反应迟钝的导航栏。请帮我修理一下。它以300px宽度折叠，内部元素在400px处变得奇怪。我也非常想知道一种更好的方式来编写媒体查询。每当我想改变一些东西时，我觉得我必须添加一百万个，即使我可能没有。

rootfs

.nav {
    width: 100%;
    height: 5%;
    border-bottom: 2px solid white;
    background-color: #333333;
    z-index: 98;
    text-align: center;
    position: fixed;
    padding: 1% 0;
    top: 0;
}

.nav ul li {
    display: inline-block;
    width: 20%;
    list-style-type: none;
    margin: 1% 0 0 0;
    z-index: 99;
}

.nav ul li a {
    text-decoration: none;
    color: white;
    padding: 5px 20px;
    border: 2px solid #C6B99C;
    transition: background .5s;
    font-family: Times;
}

.nav ul li a:hover {
    transition: background .5s;
    background-color: #C6B99C;
}

.nav ul li a:active {
    transition: background .5s;
    background-color: #C6B99C;
}

#btn {
    border-radius: 0;
    border: 2px solid #95747F;
    transition: background .5s;
}

#btn:hover {
    background-color: #95747F;
    transition: background .5s;
}

#btn:active {
    background-color: #95747F;
    transition: background .5s;
}

@media (max-width: 2560px) {
    .nav ul li a {
        font-size: 50px;
        width: 20px;
    }
    .nav {
        padding-bottom: 10px;
        height: 15%;
    }
}

@media (max-width: 1440px) {
    .nav ul li a {
        font-size: 20px;
        width: 15px;
    }
    .main h1 {
        font-size: 40px;
    }
    .nav {
        height: 10%;
    }
}

@media (max-width: 420px) {
    .nav {
        height: 5%;
    }
    .nav ul li {
        font-size: 14px;
    }
}

@media (max-width: 1440px) {
    .nav ul li a {
        font-size: 20px;
        width: 15px;
    }
    .main h1 {
        font-size: 40px;
    }
    .nav {
        height: 5%;
    }
}

@media(max-width: 1000px) {
    .nav {
        height: 10%;
    }
}

@media(max-width: 2560px) {
    .nav {
        height: 10%;
    }
}

@media(max-width: 420px) {
    .nav {
        height: 2%;
    }
    .nav ul li {
        font-size: 14px;
    }
}

@media(max-width: 688px) {
    iframe {
        width: 300px;
    }
    .nav ul li a {
        padding: 5px 10px;
        font-size: 15px;
        margin: 10px 10px;
    }
}

Answer 1

首先，永远不要给酒吧高度。尝试使用填充使其成为可能。关于媒体查询，我们有ipad分辨率，即768 * 1024，所以在ipad以下都是移动的。您可以执行以下操作：

@media(max-width:767px){
  Here you can define all the responsive styles for mobile view. You can resize the screen to the smallest screen resolution i.e iphone 4 320 * 480. So according to whatever the size is required, you can just define it once. It will be applicable to all the devices.
}

我的导航栏以300px的宽度折叠。导航栏内的元素以400px折叠

1 个答案: