使頁面適合所有屏幕

Question

我需要使我的HTML適合所有屏幕分辨率的幫助。如果有人能幫忙，我會很高興，我會上傳根文件夾。我試圖做出改變，但它不會工作。

試過幾種不同的分辨率，它只適用於1920x1080分辨率。

感謝

.html 
{ 
    background-color: #E6E6E6; 
} 

#page 
{ 
    z-index: 1; 
    width: 1000px; 
    min-height: 585px; 
    background-image: none; 
    border-width: 1px; 
    border-style: solid; 
    border-color: #E6E6E6; 
    background-color: #E6E6E6; 
    padding-bottom: 61px; 
    margin-left: auto; 
    margin-right: auto; 
} 

#pu27090 
{ 
    width: 0.01px; 
    padding-bottom: 0px; 
    position: relative; 
    margin-right: -10000px; 
    margin-top: 9px; 
    left: -54px; 
} 

#u27090 
{ 
    z-index: 24; 
    width: 217px; 
    margin-left: 52px; 
    position: relative; 
} 

#slideshowu5115 
{ 
    z-index: 2; 
    width: 0.01px; 
    height: 412px; 
    margin-top: 45px; 
    position: relative; 
} 

#u5142 
{ 
    position: absolute; 
    width: 1032px; 
    height: 412px; 
    background-color: transparent; 
    left: 38px; 
} 

#u5142popup 
{ 
    z-index: 3; 
} 

#u5143 
{ 
    z-index: 4; 
    width: 1032px; 
    height: 412px; 
    border-style: none; 
    border-color: transparent; 
    background-color: #4F4F4F; 
    margin-right: -10000px; 
    position: relative; 
} 

#u5190 
{ 
    z-index: 6; 
    width: 1032px; 
    height: 412px; 
    border-style: none; 
    border-color: transparent; 
    background-color: #4F4F4F; 
    margin-right: -10000px; 
    position: relative; 
} 

#u13904 
{ 
    z-index: 8; 
    width: 1032px; 
    height: 412px; 
    border-style: none; 
    border-color: transparent; 
    background-color: #4F4F4F; 
    margin-right: -10000px; 
    position: relative; 
} 

#u5208 
{ 
    z-index: 10; 
    width: 1032px; 
    height: 412px; 
    border-style: none; 
    border-color: transparent; 
    background-color: #4F4F4F; 
    margin-right: -10000px; 
    position: relative; 
} 

#u5217 
{ 
    z-index: 12; 
    width: 1032px; 
    height: 412px; 
    border-style: none; 
    border-color: transparent; 
    background-color: #4F4F4F; 
    margin-right: -10000px; 
    position: relative; 
} 

#u5226 
{ 
    z-index: 14; 
    width: 1032px; 
    height: 412px; 
    border-style: none; 
    border-color: transparent; 
    background-color: #4F4F4F; 
    margin-right: -10000px; 
    position: relative; 
} 

#u5235 
{ 
    z-index: 16; 
    width: 1032px; 
    height: 412px; 
    border-style: none; 
    border-color: transparent; 
    background-color: #4F4F4F; 
    margin-right: -10000px; 
    position: relative; 
} 

#u5143_clip,#u5190_clip,#u13904_clip,#u5208_clip,#u5217_clip,#u5226_clip,#u5235_clip 
{ 
    overflow: hidden; 
    width: 1032px; 
    height: 412px; 
} 

#u5143_img,#u5190_img,#u13904_img,#u5208_img,#u5217_img,#u5226_img,#u5235_img 
{ 
    margin-left: -3px; 
    margin-right: -3px; 
} 

#u5139-3 
{ 
    position: absolute; 
    width: 15px; 
    min-height: 20px; 
    border-style: none; 
    border-color: transparent; 
    padding: 10px; 
    line-height: 20px; 
    text-align: center; 
    color: #999999; 
    font-family: Georgia, Palatino, Palatino Linotype, Times, Times New Roman, serif; 
    top: 173px; 
    background: transparent url("../images/levo.png") no-repeat left top; 
} 

#u5139-3popup 
{ 
    z-index: 18; 
} 

#u5135-3 
{ 
    position: absolute; 
    width: 15px; 
    min-height: 20px; 
    border-style: none; 
    border-color: transparent; 
    padding: 10px; 
    line-height: 20px; 
    text-align: center; 
    color: #999999; 
    font-family: Georgia, Palatino, Palatino Linotype, Times, Times New Roman, serif; 
    top: 173px; 
    left: 1073px; 
    background: transparent url("../images/desno.png") no-repeat left top; 
} 

#u5135-3popup 
{ 
    z-index: 21; 
} 

.SSSlideLoading /* slideshowFreeStyle */ 
{ 
    background: url("../images/loading.gif") no-repeat center center; 
} 

#menuu27092 
{ 
    z-index: 26; 
    width: 585px; 
    position: relative; 
    margin-right: -10000px; 
    margin-top: 62px; 
    left: 230px; 
} 

#u27093 
{ 
    width: 130px; 
    min-height: 31px; 
    position: relative; 
    margin-right: -10000px; 
} 

#u27096 
{ 
    width: 130px; 
    border-style: none; 
    border-color: transparent; 
    background-color: transparent; 
    padding-bottom: 13px; 
    position: relative; 
} 

#u27096.MuseMenuActive 
{ 
    border-style: none; 
    border-color: transparent; 
    margin: 0px; 
    background: transparent url("../images/kvacicaa.png") no-repeat left top; 
} 

#u27098-4 
{ 
    position: relative; 
    margin-right: -10000px; 
    top: 6px; 
    left: 44px; 
} 

#u27098-4_clip 
{ 
    overflow: hidden; 
    width: 42px; 
    height: 17px; 
    vertical-align: top; 
} 

#u27098-4_img 
{ 
    display: block; 
} 

#u27127 
{ 
    width: 161px; 
    min-height: 31px; 
    position: relative; 
    margin-right: -10000px; 
    left: 132px; 
} 

#u27128 
{ 
    width: 161px; 
    border-style: none; 
    border-color: transparent; 
    background-color: transparent; 
    padding-bottom: 13px; 
    position: relative; 
} 

#u27128:hover 
{ 
    margin: 0px; 
    background: transparent url("../images/kvacicaa.png") no-repeat left top; 
} 

#u27130 
{ 
    height: 17px; 
    width: 73px; 
    vertical-align: top; 
    background: url("../images/u27130.png") no-repeat 0px 0px; 
    position: relative; 
    margin-right: -10000px; 
    top: 6px; 
    left: 44px; 
} 

#u27128.MuseMenuActive #u27130 
{ 
    background: url("../images/u27130-a.png") no-repeat 0px 0px; 
} 

#u27120 
{ 
    width: 135px; 
    min-height: 31px; 
    position: relative; 
    margin-right: -10000px; 
    left: 295px; 
} 

#u27123 
{ 
    width: 135px; 
    border-style: none; 
    border-color: transparent; 
    background-color: transparent; 
    padding-bottom: 13px; 
    position: relative; 
} 

#u27128:active,#u27123:hover 
{ 
    margin: 0px; 
    background: transparent url("../images/kvacicaa.png") no-repeat left top; 
} 

#u27124 
{ 
    height: 17px; 
    width: 48px; 
    vertical-align: top; 
    background: url("../images/u27124.png") no-repeat 0px 0px; 
    position: relative; 
    margin-right: -10000px; 
    top: 6px; 
    left: 43px; 
} 

#u27123.MuseMenuActive #u27124 
{ 
    background: url("../images/u27124-a.png") no-repeat 0px 0px; 
} 

#u27113 
{ 
    width: 153px; 
    min-height: 31px; 
    position: relative; 
    margin-right: -10000px; 
    left: 432px; 
} 

#u27116 
{ 
    width: 153px; 
    border-style: none; 
    border-color: transparent; 
    background-color: transparent; 
    padding-bottom: 13px; 
    position: relative; 
} 

#u27123:active,#u27116:hover 
{ 
    margin: 0px; 
    background: transparent url("../images/kvacicaa.png") no-repeat left top; 
} 

#u27116:active 
{ 
    margin: 0px; 
    background: transparent url("../images/kvacicaa.png") no-repeat left top; 
} 

#u27117 
{ 
    height: 17px; 
    width: 65px; 
    vertical-align: top; 
    background: url("../images/u27117.png") no-repeat 0px 0px; 
    position: relative; 
    margin-right: -10000px; 
    top: 6px; 
    left: 44px; 
} 

#u27116.MuseMenuActive #u27117 
{ 
    background: url("../images/u27117-a.png") no-repeat 0px 0px; 
} 

.SSFirstButton,.SSPreviousButton,.SSNextButton,.SSLastButton,.SSSlideLink,.SSCloseButton,.MenuItem /* slideshowFreeStyle */ 
{ 
    cursor: pointer; 
} 

body 
{ 
    padding-top: 35px; 
} 

#page .verticalspacer 
{ 
    clear: both; 
} 

Answer 1

最簡單的方法，使您的網頁適合所有屏幕將使用哪些設置取決於屏幕的寬度具體規則的媒體查詢。媒體查詢是響應式網站設計背後的魔力。我建議您準備好關於媒體查詢的更多信息，也可以使用下面的查詢模板。

// Small screens 
@media only screen { } /* Define mobile styles */ 

@media only screen and (max-width: 40em) { } /* max-width 640px, mobile-only styles, use when QAing mobile issues */ 

// Medium screens 
@media only screen and (min-width: 40.063em) { } /* min-width 641px, medium screens */ 

@media only screen and (min-width: 40.063em) and (max-width: 64em) { } /* min-width 641px and max-width 1024px, use when QAing tablet-only issues */ 

// Large screens 
@media only screen and (min-width: 64.063em) { } /* min-width 1025px, large screens */ 

@media only screen and (min-width: 64.063em) and (max-width: 90em) { } /* min-width  1025px and max-width 1440px, use when QAing large screen-only issues */ 

// XLarge screens 
@media only screen and (min-width: 90.063em) { } /* min-width 1441px, xlarge screens */ 

@media only screen and (min-width: 90.063em) and (max-width: 120em) { } /* min-width  1441px and max-width 1920px, use when QAing xlarge screen-only issues */ 

// XXLarge screens 
@media only screen and (min-width: 120.063em) { } /* min-width 1921px, xlarge screens */ 

Answer 2

如果您試圖使其適合所有屏幕尺寸。始終使用媒體查詢。 這樣的事情對你來說很容易。它的乾淨和簡單

/* Tablet Landscape */ 
@media screen and (max-width: 1060px) { 
    #primary { width:67%; } 
    #secondary { width:30%; margin-left:3%;} 
} 

/* Tabled Portrait */ 
@media screen and (max-width: 768px) { 
    #primary { width:100%; } 
    #secondary { width:100%; margin:0; border:none; } 
}