2015-09-07 39 views
1

我期待构建一个网站并使用CSS定位。但是对于每个决议,由于保证金属性,它将边界放置在不同的位置。但是,如何将所有屏幕分辨率均匀分布?所有分辨率的CSS元素定位

<!DOCTYPE html> 
<html> 
<head> 
    <title>Demo Page</title> 

    <style type="text/css"> 
    #homeHeader{ 
     text-align: center; 
     font-family: Verdana; 
    } 
    #homeTabs{ 
     border: 1px solid black; 
     height: 800px; 
     width: inherit; 
    } 
    #tabOne{ 
     margin:50px 50px 20px 100px; 
     width: 100px; 
     height: 60px; 
     border: 1px solid black; 
    } 
    #tabTwo{ 
     margin: 0px 50px 20px 250px; 
     font-family: Arial; 
     font-style: italic; 
     width: 100px; 
     height: 60px; 
     border: 1px solid black; 
    } 
    #tabThree{ 
     margin: 0px 50px 20px 400px; 
     font-family: Arial; 
     font-style: italic; 
     width: 100px; 
     height: 60px; 
     border: 1px solid black; 
    } 
    #tabFour{ 
     margin: 0px 50px 20px 550px; 
     font-family: Arial; 
     font-style: italic; 
     width: 100px; 
     height: 60px; 
     border: 1px solid black; 
    } 
    #tabFive{ 
     margin: 0px 50px 20px 700px; 
     font-family: Arial; 
     font-style: italic; 
     width: 100px; 
     height: 60px; 
     border: 1px solid black; 
    } 
    #tabSix{ 
     margin: 0px 50px 20px 850px; 
     font-family: Arial; 
     font-style: italic; 
     width: 100px; 
     height: 60px; 
     border: 1px solid black; 
    } 
    #tabSeven{ 
     margin: 0px 50px 20px 1000px; 
     font-family: Arial; 
     font-style: italic; 
     width: 100px; 
     height: 60px; 
     border: 1px solid black; 
    }s 
    center{ 
     font-family: verdana; 
    } 
    </style> 


</head> 
<body> 

<div id="homeHeader"> 

    <h1 id="headerH1">HOMELESS MONKEYS</h1> 
</div> 

<div id="homeTabs"> 

<div id="tabOne"> 
    <center><br>Fashion1</center> 
</div> 

<div id="tabTwo"> 
    <center><br>Fashion2</center> 
</div> 
<div id="tabThree"> 
    <center><br>Fashion3</center> 
</div> 
<div id="tabFour"> 
    <center><br>Fashion4</center> 
</div> 
<div id="tabFive"> 
    <center><br>Fashion5</center> 
</div> 
<div id="tabSix"> 
    <center><br>Fashion6</center> 
</div> 
<div id="tabSeven"> 
    <center><br>Fashion7</center> 
</div> 
</div> 

</body> 
</html> 

我可以理解,它把不同的不同的分辨率从边境,因为保证金的距离,但如何使其同样为所有的屏幕分辨率间隔多长时间?

回答

0

如果您需要响应式布局或固定布局,您必须选择。如果你想要一个固定的布局,你的主容器在px中应该有一个固定的宽度,而里面的元素也必须在px中。

如果你想要一个响应式布局,你应该使用相对单位(主要是em/rem和%)和媒体查询来改变你在某些断点处的布局。

链接:

Media queries

CSS units