使页面适合所有屏幕

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; } 
}