CSS：一个元素

Question

我会救你的到底是什么解释复杂的宽度规则，但有可能有具有以下元素：

如果屏幕是小于说600px的再元素的宽度为：100％; 如果屏幕大于640px，则该元素的宽度可变，但左右边距为20px。 在600和640像素之间，边距从20px变为0px。理想情况下，当屏幕宽度为620时，边距降至10px等等。 此外，当屏幕大于1000px时，宽度保持不变，并且元素保持居中。

我的css知识很基础。就他们自己而言，我可以轻松地实施这些任何一项，但一起？我正在寻找javascript解决方案，但作为最后一个尝试，我在这里问一个很好的解决方案。

感谢

垫

Answer 1

见：http://css-tricks.com/resolution-specific-stylesheets/

这是适用于大多数现代浏览器。

Answer 2

您在这里有两个选项。

选项1：坚持600px的固定宽度，让它自动居中。

要做到这一点只需添加下面一行到你的CSS的最外层DIV标签：

margin: 0 auto; 

选项2：这是使用JavaScript。你可以首先使用CSS设置最外层DIV的min-width属性。然后让JavaScript进行条件计算。

就个人而言，我会去选择1

Answer 3

下面是一个布局，因为我做了我儿子的棒球队网站的CSS和HTML。布局与你想要的相似。

CSS

/* page element and contents */ 
#page 
{ 
    overflow:auto; 
    height: 100%; 
} 
#centerContent 
{ 
    position: relative; 
    overflow: hidden; 
    height: 100%; 
    width: 66%; 
    min-height: 430px; 
    min-width: 778px; 
    margin: 0px auto; 
    border-left-style: ridge; 
    border-right-style: ridge; 
    border-left-width: 5px; 
    border-right-width: 5px; 
    border-right-color: #f6e662; 
    border-left-color: #f6e662; 
} 

#leftMargin 
{ 
    position: absolute; 
    overflow: hidden; 
    left: 0px; 
    top: 0px; 
    height: 100%; 
    width: 17%; 
    border-right-width: 5px; 
    text-align: center; 
} 
#rightMargin 
{ 
    position:absolute; 
    overflow:hidden; 
    right:0px; 
    top:0px; 
    height:100%; 
    width:17%; 
    border-left-width: 5px; 
} 

/* header element and contents */ 
#header 
{ 
    overflow:hidden; 
    background-color: #FFFFFF; 
    border-bottom: solid 1px #053c01; 
    height:75px; 
    top: 0px; 
    left: 0px; 
} 
/* main element and contents. */ 
#main 
{ 
    position:absolute; 
    overflow:hidden; 
    background-color: #FFFFFF; 
    top: 76px; 
    bottom: 25px; 
    left: 0px; 
    right: 0px; 

} 
/* footer element and contents */ 
#footer 
{ 
    position:absolute; 
    overflow: hidden; 
    background-color: #FFFFFF; 
    border-top: solid 1px #053c01; 

    height: 25px; 
    bottom: 0px; 
    left: 0px; 
    right: 0px; 
} 

HTML

<div id="page"> 
    <div id="leftMargin"> 
    </div> 
    <div id="centerContent"> 
    <div id="header"> 
    </div> 
    <div id="main"> 
    </div> 
    <div id="footer"> 
    </div> 
    </div> 
    <div id="rightMargin"> 
    </div> 
</div> 

Answer 4

可以实现，随着现代浏览器媒体查询，只是没有在IE8或更早。因此，例如，你必须：

@media screen and (max-width:600px) { 
    #divID {width:100%;} 
} 

它说如果屏幕为600像素宽下，然后用所谓的DIVID ID的div有100％的宽度。

您可以像这样大小之间的在设定的条件：

media screen and (min-width: 601px) and (max-width:640px) { 
    #divID {width:auto;} 
} 

而且你可以有宽度超过一定尺寸的设置：

@media screen and (min-width: 601px) { 
     #divID {width: 500px;} 
}