Javascript 如何根据屏幕分辨率设置页面宽度，并在调整浏览器大小时水平滚动页面的其余部分？_Javascript_Jquery_Html_Css

Javascript 如何根据屏幕分辨率设置页面宽度，并在调整浏览器大小时水平滚动页面的其余部分？

javascript jquery html css

Javascript 如何根据屏幕分辨率设置页面宽度，并在调整浏览器大小时水平滚动页面的其余部分？,javascript,jquery,html,css,Javascript,Jquery,Html,Css,以下是html： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta content='width=device-width; initial-scal

以下是html：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content='width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;' name='viewport' />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test1</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="header"></div>
<div id="picb"><ul id=b><button class="but1">KARATE</button><button class="but2">SILAMBATAM</button><button class="but3">KAALADI KUTHUVARISAI</button></ul></div>
<div id="home1"></div>
<div id="home2"><img id="shot_kara" src="src/ska-logo.png" ></img></div>
<div id="footer1"></div></body>
</body>
</html>

我试过宽度：1366px；但这使得浏览器在大屏幕上观看时留下空白。简言之当窗口最小化时，我的网站应该水平滚动。例如栈内溢出网站；调整浏览器大小时；此时会出现一个水平滚动条。我应该使用java脚本吗？

提前感谢。

您可以使用javascript像素比率来确定分辨率。

要测试移动纵向或横向模式，您可以测试onorientchange以及onresize或替代onresize。

您是否尝试过宽度：100%？另外，您是否添加了css重置以删除任何可能添加空白的浏览器样式？是的。但这将使所有其他因素与决议相一致

@media screen and (min-width: 500px) {
 body

 {
    position:absolute;
    width:100%;
    overflow-x:scroll;
    overflow:scroll;
    background-color:#FFF;
    margin:0 auto 0 auto;
}
div#picb {
    top:30px;
    vertical-align:top;
    max-height:100%;
    height:auto;
    min-width:500px;
    position:relative;
    margin-left:0;
    background-image:url(src/black-belt.png);
    background-repeat:no-repeat;
    background-size:contain;
    background-position:center; 
    -webkit-animation: fadein 2s;
    animation: fadein 2s;
    padding-top:40%;
    overflow:hidden;
}
@keyframes fadein {
    from{opacity:0}
    to{opacity:1}
}
@-webkit-keyframes fadein {
    from{opacity:0}
    to{opacity:1}
}


div#header {
    max-height:100%;
    height:auto;
    opacity:0.96;
    z-index:10000;
    color: #CCC;
    letter-spacing: 8px;
    position: fixed;
    left: 0%;
    right: 0;
    top: 0%;
    background-color: #333;
    padding-bottom: 3.5%;
    /* padding-left:100%;
    padding-right:100% */
    font-size: 20px;
    overflow:hidden;
    }
div#footer1 {
    margin-top:60%;
    max-height:100%;
    height:auto;
    /* padding-left:100%; */
    position:relative;
    left:0;
    right: 0;
    background-color:#F60;
    padding-top:260px;
    /* padding-right:100%; */

}
div#home1 {
    vertical-align:top;
    overflow-x:hidden;
    padding-left:100%;
    padding-bottom:40%;
    position:relative;
    background-color:#999;
}
#b { 
  position:absolute;
    left:30%;
    top:50%;
    }
button.but1 {
    margin:0 4px 0 0;
    line-height:40px;
    cursor:pointer;
    font:"Lucida Console";
    font-size:25px;
    position:relative;
    border-radius: 3px;
    -webkit-transition-duration: 0.4s;
    transition-duration: 0.4s;
    background-color: transparent;
    color: White;
    border: 2px solid #FFF;  
}
button.but1:hover {
    color: black;
    background-color:#FFF;
}

button.but2 {
    margin:0 4px 0 0;
    line-height:40px;
    cursor:pointer;
    font:"Lucida Console";
    -webkit-transition-duration: 0.4s;
    font-size:25px;
    position:relative;
    border-radius: 3px;
    transition-duration: 0.4s;
    background-color: transparent;
    color: White;
    border: 2px solid #FFF;  
}
button.but2:hover {
    color: black;
    background-color:#FFF;
}
button.but3 {
    line-height:40px;
    cursor:pointer;
    font:"Lucida Console";
    font-size:25px;
    position:relative;
    border-radius: 3px;
    -webkit-transition-duration: 0.4s;
    transition-duration: 0.4s;
    background-color: transparent;
    color: White;
    border: 2px solid #FFF;  
}
button.but3:hover {
    color: black;
    background-color:#FFF;
}
#home2 {

    overflow-x:hidden;

    overflow-y:hidden;
    left:0px;
    position:relative;
    margin-top:60%;
    background-color:#C60;
    padding-right:100%;
    padding-bottom:40%;
    }
#shot_kara {
    position:relative;
    left:310px;
    top:210px;

}
}