Question

所以我有一个关于我正在上课的网站的页面，而我的问题是，无论何时我调整窗口大小时，图片和文字都被挤压在一起，我不知道为什么。我尝试使用百分比代替边框的确切像素大小，并且尝试将内容左右浮动，并且还尝试将位置设置为相对而不是绝对。

.p2coop{
float:left;
position: absolute;
width: 1000px;
font-family: "Times New Roman", Times, serif;
font-style: normal;
font-weight: normal;
font-size: 36px;
line-height: normal;
color: #000000;
background-color:white;
 text-align:left;
 vertical-align: left; 
 opacity: 0.6;
}
.right {
  position: absolute;
  right: 0px;
  width: 880px;
  height:290px;
  padding: 10px;
}
.campaign{
  position: absolute;
  top: 600px;
  right: 0;
  left: 0;
  width: 1900px;
  height: 600px;
}
.campaignblurb{
  position: relative;
  top: 1050px;
  right: 0;
  left: 0;
  width: 1900px;
  background-color:white; 
  text-align:left;
  vertical-align: middle; 
  padding:20px 47px;
  opacity: 0.6;
  font-family: "Times New Roman", Times, serif;
  font-style: normal;
  font-weight: normal;
  font-size: 42px;
  line-height: normal;
  color: #000000;
}
.editorblurb{
    position: absolute;
    font-family: "Times New Roman", Times, serif;
    font-style: normal;
    font-weight: normal;
    font-size: 42px;
    line-height: normal;
    color: #000000;
    top: 1630px;
    width: 700px;

    right: 100px;
    background-color:white; 
  text-align:left;
  vertical-align: middle; 
  padding:20px 47px;
  opacity: 0.6;
}
.editor{
  position: absolute;
  top: 1610px;
  right: 1000;
  left: 0;
  width: 880px;
  height: 350px;
}

<div class="p2coop">The game’s two-player cooperative mode features its own entirely
 separate campaign with a unique story, test chambers, and two new player characters ATLAS and P-body, 
 referred to as Blue and Orange by GLaDOS, a pair of bipedal Personality Construct
 based androids. This new mode forces players to reconsider everything they thought they knew about portals.
 Success will require them to not just act cooperatively, but to think cooperatively.</div>
 <img src="portal_atlas_pbody.jpg" class="right">
 <img src="portal2campaign.jpg" class="campaign">
 <div class="campaignblurb">The single-player portion of Portal 2 introduces a cast of dynamic 
 new characters, a host of fresh puzzle elements, and a much larger set of devious test chambers.
 Players will explore never-before-seen areas of the Aperture Science Labs and be reunited with GLaDOS,
 the occasionally murderous computer companion who guided them through the original game.</div>
 <div class="editorblurb">
The Puzzle Creator (also known as Puzzle Maker or Editor) is a part of the Perpetual Testing 
Initiative in Portal 2, allowing the creation of single-player
and Co-op test chambers within a simple in-game editor.
</div>
 <img src="leveleditor.jpg" class="editor">

Answer 1

以下是您可以尝试使您的网站响应不同屏幕尺寸的一些事情：

1）您需要编写媒体查询来处理不同的分辨率，因为简单地添加百分比并不总是适用于所有屏幕尺寸。下面是在CSS中使用媒体查询的示例：

比方说，您有一个组件，其中的类'abc'包含宽度为50％的属性。但是问题是，当您在较小的屏幕上（例如移动视图）查看此元素时，该元素将过于压缩并且会变得混乱。您需要做的就是根据要查看的屏幕尺寸将宽度切换到100％。

.abc{
  width: 50%;
}

@media screen and (max-width: 400px) {
  .abc{
      width: 100%;
    }
}

@media screen and (max-width: 800px) {
  .abc{
      width: 70%;
    }
}

因此，这里的媒体查询告诉浏览器在实现“ abc”类的元素上应用50％的宽度，但是如果设备的最大宽度为400px（例如，可能是移动设备或其他较小的设备），则使宽度为100％同班。与800px相同。您可以根据业务案例实施多个媒体查询以处理响应性。 here有关媒体查询的进一步说明。

2）您可以简单地使用任何外部响应式CSS库，例如Twitter的引导程序。它适用于12网格系统，这意味着它将每个屏幕按逻辑划分为12列。它具有用于不同屏幕尺寸的特定CSS类，例如特小（xs），小（sm），中（md）和大（lg）。以下是示例如何将它们应用于元素

<div class="col-xs-12 col-sm-12 col-md-6 col-lg-4"></div>

以上实现将告诉浏览器，如果屏幕宽度过小或太小，则以12列呈现此元素；如果屏幕尺寸为中等，则以6列（1/2）呈现元素；如果div为4，则呈现div （1/3）（如果存在于大屏幕上）。

有关如何使用引导程序使元素响应的更多文档，here

Answer 2

用您的当前样式css

替换该样式

body {
  overflow-x: hidden;
}
.p2coop {
  float:left;
  width: 50%;
  font-family: "Times New Roman", Times, serif;
  font-style: normal;
  font-weight: normal;
  font-size: 36px;
  line-height: normal;
  color: #000000;
  background-color:white;
  text-align:left;
  vertical-align: left; 
  opacity: 0.6;
}
.right {
  float:right;
  right: 0px;
  width: 50%;
  height:290px;
}
.campaign {
  width: 100%;
  height: auto;
}
.campaignblurb {
  width: 100%;
  float:left;
  background-color:white; 
  text-align:left;
  vertical-align: middle; 
  padding:20px 10px;
  opacity: 0.6;
  font-family: "Times New Roman", Times, serif;
  font-style: normal;
  font-weight: normal;
  font-size: 42px;
  line-height: normal;
  color: #000000;
}
.editorblurb {
  width:50%;
  float:right;
  font-family: "Times New Roman", Times, serif;
  font-style: normal;
  font-weight: normal;
  font-size: 35px;
  line-height: normal;
  color: #000000;
  right: 100px;
  background-color:white; 
  text-align:left;
  vertical-align: middle; 
  padding:20px 0px;
  opacity: 0.6;
}
.editor {
  width: 50%;
  height: 350px;
  float:left;
}

我需要使该页面在多种不同的分辨率下工作

2 个答案: