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

Question

heres the html:继承人的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>

CSS: 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;

}
}

I have tried width:1366px;我试过 width:1366px; but this make the browser to leave a white space when viewed in large screens.但这会使浏览器在大屏幕中查看时留下空白。 In short;简而言之; My website should be scrolled horizontally when the window is minimized.当窗口最小化时，我的网站应该水平滚动。 for example;例如; in stack overflow website;在堆栈溢出网站中； when the browser is resized;当浏览器调整大小时； a horizontal scroll bar appears.出现水平滚动条。 Should i use java script for it?我应该使用java脚本吗？ Thanks in advance.提前致谢。

Answer 1

You can use javascript pixel ratio to determine the resolution.您可以使用 javascript 像素比来确定分辨率。 For testing mobile portrait or landscape mode you can test onorientchange aswell as or in place of onresize.为了测试移动纵向或横向模式，您可以测试 onorientchange 以及或代替 onresize。

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

问题描述

1 个解决方案

解决方案1
0 2016-10-12 05:12:06

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

问题描述

1 个解决方案

解决方案1 0 2016-10-12 05:12:06

解决方案1
0 2016-10-12 05:12:06