jquery - 所有分辨率的CSS定位元素

Question

我在处理以下代码中使用的不同 div 元素时遇到问题。它完美适用于我的 1024 x 768 分辨率。但是当分辨率改变时，元素不在正确的位置。

site

我已将其上传到免费的虚拟主机服务中，因此加载可能需要一些时间。

例如， watch 定制器可能不适合屏幕。

上面的CSS文件如下。

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote,         pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section{
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}    


body {
background: url(../assets/classy_fabric.png);

color: white;
font-size: 20px;
font-family: "Terminal Dosis", sans-serif;
text-shadow: 
    1px 1px 0 transparent,
    2px 2px 0 #101010;
overflow: hidden;
}
h1 {
font-size: 75px;
font-weight: bold;
line-height: 1.5em;
text-shadow: 
    2px 2px 0 transparent,
    4px 4px 0 #101010;
}

a, a:visited {
color: white;
text-decoration: none;
border-bottom: 2px dotted;
transition: color 0.2s;
}

a:hover {
color: #AAA;
}

a:active {
color: lightblue;
}

.big {
display: block;
font-size: 45px;
font-weight: bold;
line-height: 1.3em;
margin-bottom: 10px;
text-shadow: 
    2px 2px 0 transparent,
    4px 4px 0 #101010;
}

.wrapper div {
/*position: absolute;*/
position: relative;
}


.settings, nav {
position: fixed;
z-index: 9999999;
bottom: 10;
background: rgba(10,10,10, 0.5);
font-family: Helvetica, Arial, sans-serif;
font-weight: normal;
font-size: 20px;
width:100%;

display: block; /* may help stop any text wrapping and display it inline. */
display: inline; /* same as above */
white-space: nowrap;/* ensure no wrapping */
overflow: hidden; 
}

.settings {
right: 0;
padding: 10px 20px;
border-radius: 10px 0 0 0;
}

.settings a {
border: none;
}

nav {
left: 0;
border-radius: 0 10px 0 0;
}

nav li {
float: left;
}

nav a {
display: block;
text-indent:50px;
height: 40px;
line-height: 40px;
border: none;
text-align: center;
transition: 0.25s;
}

nav li:last-child a {
border-radius: 0 10px 0 0;
}

nav a:hover {
background: rgba(15,15,15, 0.5);
}

.sp-canvas {
display: none;
}

.arrow {
position: relative;
display: inline-block;
}
/*For home TAB*/
.demo { 
position: absolute;
top: -200px;
right: 0px;


}


/*For About us TAB*/
.description {
position: absolute;
top: 0px;
left: 0px;
width: 440px;
}
/*For watch customizer TAB*/
.syntax {
position: absolute;
top: 180px;
left:130px;
width: 400px;
}
/*For retailers TAB*/
.scrollbar {
position: absolute;
top: -500px;
left: 1300px;
width: 0px;
}

.rotations {
left: 2185px;
top: 660px;
width: 460px;
transform: rotate(-90deg) translateY(2.5em);
}

/*For FAQ TAB*/
.source {
position: absolute;
left: 2050px;
top: -3600px;
width: 400px;
transform: rotate(90deg) translateX(50px);
}

/*For contactTAB*/
.follow {
position: absolute;
left: 995px;
top: -4200px;

transform: rotate(90deg) translateX(50px);
}

.follow .big {
    font-size: 30px;
}

.highlight {
animation: highlight 0.2s alternate 6 ;
}

@keyframes point-down {
from {
    top: 0;
}
to {
    top: 5px;
}
}

@keyframes highlight {
to {
    background: lightblue;
}
}

我尝试了相对定位，但它变得更加复杂。

如果你能帮助我，我将不胜感激。

Answer 1

当使用 CSS 定位不同的浏览器尺寸时，您应该尽可能避免使用绝对定位。对于 CSS 框架或一些 Javascript 代码，这是一个很好的应用程序。您可能还会发现使用 CSS 媒体查询来定位特定分辨率很有用。

http://www.w3.org/TR/css3-mediaqueries/