html - 带有 css/html 的响应式图像

Question

我正在制作一个网站，并试图让它响应。我想要响应的第一件事是标题。在标题上我有网站的标志和 5 个按钮，分别是“主页”、“关于”、“团队”和“联系我们”

HTML 看起来像这样:

    <div class="clearfix" id="header" style="">            

        <div class="clearfix" id="logo" style="">
            <!-- Lynxus Logo -->
            <a class="nonblock nontext museBGSize grpelem" id="u223" href="index.html"><!-- simple frame --></a>
        </div>

        <div class="clearfix" id="nav" style="">
            <!-- Home -->
            <a class="nonblock nontext museBGSize grpelem" id="u224" href="index.html"><!-- simple frame --></a>
            <!-- About -->
            <a class="nonblock nontext museBGSize grpelem" id="u225" href="#"><!-- simple frame --></a>
            <!-- Team -->
            <a class="nonblock nontext museBGSize grpelem" id="u226" href="#"><!-- simple frame --></a>
            <!-- Blog -->
            <a class="nonblock nontext museBGSize grpelem" id="u227" href="http://lynxusapp.blogspot.com/" target="_blank"><!-- simple frame --></a>
            <!-- Contact Us -->
            <a class="nonblock nontext museBGSize grpelem" id="u228" href="#"><!-- simple frame --></a>
        </div>

CSS 是这样的:

#header
{
z-index: 1;
width: 100%;
min-height: 80px;        
position: absolute;
top: 0;
left:0;
right:0;
margin-left:auto;
margin-right:auto;
}

#logo{
z-index: 1;
width: 228px;
min-height: 80px;        
position: absolute;
top: 0;
left:0;
right:0;
margin-left:auto;
margin-right:auto;
}

#nav{
z-index: 1;
width: 732px;
min-height: 80px;        
position: absolute;
top: 0;
left:0;
right:0;
margin-left:auto;
margin-right:auto;    
}

#u223
{
z-index: 16;
width: 228px;
height: 77px;
position: relative;
margin-right: -10000px;
margin-top: 10px;
left: 10px;
background: transparent url("../images/LynxusLogo.png") no-repeat left top;
background-size: contain !important;
}

#u224
{
z-index: 17;
width: 131px;
height: 33px;
position: relative;
margin-right: -10000px;
margin-top: 30px;
left: 280px;
background: transparent url("../images/Home.png") no-repeat left top;
background-size: contain !important;
}

#u224:hover
{
margin: 30px -10000px 0px 0px;
background: transparent url("../images/Home-hover.png") no-repeat left top;
background-size: contain !important;
}

#u225
{
z-index: 18;
width: 131px;
height: 33px;
position: relative;
margin-right: -10000px;
margin-top: 30px;
left: 430px;
background: transparent url("../images/About.png") no-repeat left top;
background-size: contain !important;
}

#u225:hover
{
margin: 30px -10000px 0px 0px;
background: transparent url("../images/About-hover.png") no-repeat left top;
background-size: contain !important;
}

#u226
{
z-index: 19;
width: 131px;
height: 33px;
position: relative;
margin-right: -10000px;
margin-top: 30px;
left: 580px;
background: transparent url("../images/Team.png") no-repeat left top;
background-size: contain !important;
}

#u226:hover
{
margin: 30px -10000px 0px 0px;
background: transparent url("../images/Team-hover.png") no-repeat left top;
background-size: contain !important;
}

#u227
{
z-index: 20;
width: 131px;
height: 33px;
position: relative;
margin-right: -10000px;
margin-top: 30px;
left: 730px;
background: transparent url("../images/Blog.png") no-repeat left top;
background-size: contain !important;
}

#u227:hover
{
margin: 30px -10000px 0px 0px;
background: transparent url("../images/Blog-hover.png") no-repeat left top;
background-size: contain !important;
}

#u228
{
z-index: 21;
width: 131px;
height: 33px;
position: relative;
margin-right: -10000px;
margin-top: 30px;
left: 880px;
background: transparent url("../images/Contact.png") no-repeat left top;
background-size: contain !important;
}

#u228:hover
{
margin: 30px -10000px 0px 0px;
background: transparent url("../images/Contact-hover.png") no-repeat left top;
background-size: contain !important;
}

我一直在尝试使用 min-height、min-width 和我在 Internet 上找到的其他东西，但到目前为止它们都没有用。有谁知道我该如何解决？

Answer 1

响应式设计响应 CSS3 中的媒体查询。它检测设备/浏览器的宽度并做出相应的响应

    /* Smartphones (portrait and landscape) ----------- */
    @media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
    /* Styles */
    }

    /* Smartphones (landscape) ----------- */
    @media only screen 
    and (min-width : 321px) {
    /* Styles */
    }

    /* Smartphones (portrait) ----------- */
    @media only screen 
    and (max-width : 320px) {
    /* Styles */
    }        

    /* iPads (portrait and landscape) ----------- */
    @media only screen 
    and (min-device-width : 768px) 
    and (max-device-width : 1024px) {        
    /* Styles */
    }

    /* iPads (landscape) ----------- */
    @media only screen 
    and (min-device-width : 768px) 
    and (max-device-width : 1024px) 
    and (orientation : landscape) {
    /* Styles */
    }

    /* iPads (portrait) ----------- */
    @media only screen 
    and (min-device-width : 768px) 
    and (max-device-width : 1024px) 
    and (orientation : portrait) {
    /* Styles */
    }

    /* Desktops and laptops ----------- */
    @media only screen 
    and (min-width : 1224px) {
    /* Styles */
    }

    /* Large screens ----------- */
    @media only screen 
    and (min-width : 1824px) {
    /* Styles */
    }

    /* iPhone 4 ----------- */
    @media
    only screen and (-webkit-min-device-pixel-ratio : 1.5),
    only screen and (min-device-pixel-ratio : 1.5) {
    /* Styles */
    }