Question

我的网站有问题，我尝试了所有内容，但仍未找到解决方案。

我想让我的网站在所有电脑屏幕尺寸上看起来几乎相同。当我在较大的屏幕上测试它时，页脚和页面内容的其余部分之间会出现间隙。当我在较小的屏幕上测试时，它显示正常，但你必须垂直和水平滚动。

<!DOCTYPE HTML>
<html>
<head>
<title>Royal Scottish Country Dance Society</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" type="text/css" href="CSS/general.css">
<link rel="stylesheet" type="text/css" href="CSS/index.css">
<style>
@font-face {
    font-family: 'Myriad Pro Regular';
    src: url('../Fonts/MyriadPro-Regular.otf'); 
}
@font-face {
    font-family: 'Myriad Pro Bold';
    src: url('Fonts/MyriadPro-Bold.otf');   
}
p {font-size:65%; text-align:left; padding-right:18%;}

h2 {
    font-size:98%;
    }
</style>
</head>

<body>
<div class="wrapper">
  <div id="header">
    <h1 class="alignleft"> RSCDS <span style="font-size:30%">Royal Scottish Country Dance Society</span></h1>
    <h1 class="alignright"> Call us on <span>07459107891</span><br/>
      for any further details </h1>
  </div>
  <div id="vmenu">
    <ul>
      <li><a href="index.html"><span class="current">Home</span></a></li>
      <li><a href="confweek.html">Conference<br>
        Weeekend</a></li>
      <li><a href="danceprog.html">Dance<br>
        Program</a></li>
      <li><a href="teachers.html">Teachers</a></li>
      <li><a href="travel.html">Travel</a></li>
      <li><a href="stay.html">Where to Stay</a></li>
      <li><a href="join.html">Join Us</a></li>
      <li><a href="contact.html">Contact</a></li>
    </ul>
  </div>
  <div id="vmenu2"></div>
  <img id="pattern2" src="Patterns/im4.jpg"/> <img id="pattern" src="Patterns/Pattern_1.jpg"/>
    <div id="pagewrap">
      <h2>Welcome to the royal scottish country<br>
        dance society</h2>
      <p> The youth groups of the RSCDS run a weekend conference every year. The event runs from Friday evening to Sunday lunchtime, and is a mixture of Scottish country dance and other classes for all levels of dancers from beginners to advanced along with meetings, evening dances and other social events. Young dancers in each area take it in turns to host the event and it is anticipated that the event will be held in Glasgow in 2015. Join us for a totally unique dance experience. With three days of performances, classes, advice and fun, RSCDS is your chance to design your perfect day of dance. <br>
        <br>
        There's plenty to choose from no matter your ability level. </p>
      <h2>WHOEVER YOU ARE, WHEREVER YOU ARE <br/> FROM, COME DANCE WITH US!</h2>
    </div>
    <div id="footer"> </div>
  </div>
</body>
</html>

和CSS：

body {
    margin: 0 auto;
    height: 100%;
    width: 100%;
}
div#header {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 85px;
    min-height: 9.5%;
    background: #4F4F50;
    position: relative;
}
div#footer {
    margin: 0;
    background: #4F4F50;
    width: 100%;
    height: 50px;
    bottom: 0;
    padding: 0;
    position: fixed;
    min-height: 5.5%;
}
div#pagewrap {
    padding: 1.77% 20% 0% 15.5%;
    font-family: "Myriad Pro Regular";
    width: 27%;
}
div#vmenu {
    margin: 0;
    padding: 2% 1% 0% 0%;
    background: #09051A;
    width: 12%;
    height: 672px;
    float: left;
}
div#vmenu2 {
    margin: 0;
    padding: 0;
    background: #09051A;
    width: 12%;
    height: 672px;
    float: right;
}
div#vmenu ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
div#vmenu ul li {
    margin: 0;
    padding: 0;
    list-style: none;
}
div#vmenu ul a:link {
    margin: 0;
    padding: 6% 8% 5% 0%;
    text-align: right;
    text-decoration: none;
    font-family: 'Myriad Pro Regular';
    color: #ffffff;
    display: block;
    width: 100%;
}
div#vmenu ul a:visited {
    margin: 0;
    text-decoration: none;
    font-size: medium;
    font-family: 'Myriad Pro Regular';
    color: #ffffff;
}
div#vmenu ul li a:hover {
    margin: 0;
    text-decoration: none;
    font-family: 'Myriad Pro Regular';
    font-size: medium;
    color: #289280;
}
img#pattern {
    width: 31%;
    padding: 3% 5.5% 3.5% 2%;
    float: right;
}
img#pattern2 {
    height: 668px;
    padding: 0;
    float: right;
    width: 6.7%;
    min-width: 100px;
    min-height: 668px;
}
h1 span {
    font-size: 180%;
}
h2 {
    font-size: 110%;
    width: 100%;
    font-family: "Myriad Pro Bold";
}
h3 {font-size: 100%;
    font-family: 'Myriad Pro Bold';
}
p a {
    text-decoration: none;
    color: #289280;
}
.wrapper {
    margin: 0 auto;
    width: 100%;
    max-width: 1440px;
    min-width: 1440px;
    position: relative;
}
.alignleft {
    margin: 0;
    padding: 0;
    color: #ffffff;
    font-size: 400%;
    font-family: 'Myriad Pro Bold';
    padding: 0.7% 0% 0% 1.3%;
    float: left;
    position: absolute;
}
.alignright {
    margin: 0;
    color: #ffffff;
    font-size: 80%;
    font-family: 'Myriad Pro Bold';
    padding: 1.2% 0% 1.3% 82.5%;
    position: absolute;
}
.current {
    color: #289280;
    width: 100%;
}

Answer 1

CSS3中的媒体查询采用了这种想法并对其进行了扩展。他们不是寻找一种类型的设备，而是查看设备的功能，您可以使用它们来检查各种事物。例如：

1.宽度和高度（浏览器窗口的） 2.设备宽度和高度 3.orientation - 例如是横向或纵向模式的手机？ 4.resolution

例如：

1）手机屏幕

2）平板电脑屏幕

3）桌面屏幕

4）Ipad屏幕

网站在较大的屏幕上混乱，并在较小的屏幕上显示滚动条

1 个答案: