Question

我正在为博客设计一个页面。该页面具有固定位置侧边栏和内容的居中div。你可以看到它here。这是我的CSS：

Add to cart

.container {
  width: 100%;
  height: 100%;
  text-align: center;
}
.sidebar {
  position: fixed;
  left: 0px;
  top: 10%;
  height: 80vh;
  width: 10%;
  background-color: red;
}
.content {
  width: 40%;
  display: inline-block;
  text-align: justify;
}

目前所有宽度均为百分比。我不希望内容跨越页面的整个宽度（以便于阅读）。但是在移动设备上（或者当屏幕宽度足够小时），我希望内容跨越页面。但是，对于％widths，内容宽度会随页面宽度不断变化。在电脑屏幕上没问题但是对于较小的宽度，内容div变得太窄了。

一个例子是网站medium。您可以看到（当您调整窗口大小时）对于较大的宽度，内容宽度保持不变，但对于较小的宽度，内容开始跨越整个页面。

知道如何实现这个目标吗？

Answer 1

您可以在min-width中设置.content您想要的任何值，只需记住您有fixed侧边栏

＆＃13;

.container {
  width: 100%;
  height: 100%;
  text-align: center;

}
.sidebar {
  position: fixed;
  left: 0px;
  top: 10%;
  height: 80vh;
  width: 10%;
  background-color: red;
}
.content {
  width: 40%;
  display: inline-block;
  text-align: justify;
  min-width: 260px
}

＆＃13;

<div class="container">

  <div class="sidebar">
    THis is the sidebar.
  </div>

  <div class="content">
    <h1>Fourth</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in sapien vel augue auctor tempor. Duis orci velit, congue at ornare non, tincidunt quis sapien. Nam at fringilla tortor. Fusce non pharetra quam. Vestibulum fermentum facilisis urna sed
      consequat. Nam rutrum sapien at facilisis porttitor. Fusce vehicula dignissim nisl, vel cursus lorem mattis ut. Sed eros libero, euismod et ligula sed, rutrum varius libero. Nulla eget sem sit amet velit pretium porttitor. Morbi tempus ultrices
      urna, in egestas erat cursus ut. In hac habitasse platea dictumst.</p>

    <p>Donec efficitur gravida pellentesque. Curabitur dignissim odio at tempus fermentum. Aenean pharetra sed sem sed convallis. Praesent pretium urna sit amet leo porttitor, eu auctor purus consequat. Donec id velit eleifend, fringilla enim vitae, blandit
      lacus. Nulla tincidunt sed lacus ac euismod. Nam non blandit diam.</p>

    <p>Vivamus hendrerit ex a orci dapibus convallis. Vivamus dictum maximus purus, in condimentum massa molestie ut. Donec aliquet, augue ut consequat consectetur, velit turpis finibus elit, sed porta dui felis sed massa. Nulla aliquam interdum est eget
      ornare. Suspendisse cursus nec lorem eu rhoncus. Curabitur vehicula pellentesque egestas. Proin et commodo purus. Nulla malesuada consequat tortor, interdum volutpat est congue sed. Curabitur vitae placerat lacus, vestibulum lacinia mi. Duis auctor
      malesuada lacus id consectetur. Etiam venenatis nisi eget tellus accumsan, vel ornare mi porttitor. Curabitur dictum non tortor et laoreet.</p>

    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent egestas quam orci, et eleifend lectus lobortis vel. Nullam pulvinar porttitor egestas. Phasellus consectetur felis eget erat iaculis pulvinar in
      sit amet sapien. Nulla sollicitudin maximus nulla, nec ullamcorper arcu tempor at. Aliquam at nisl massa. Sed eleifend urna sit amet erat semper, ac aliquam quam imperdiet. Ut nec cursus nisl. Quisque feugiat imperdiet tellus sed aliquam. Nulla
      magna velit, interdum nec auctor vitae, congue at augue. Phasellus placerat risus et vehicula efficitur. Etiam hendrerit egestas interdum. Nulla placerat fringilla mi et rhoncus. Fusce porttitor, arcu consectetur finibus porta, mi ante ultrices
      tellus, nec vulputate diam leo quis tellus. Fusce aliquam nulla vel sem tempus, non elementum est condimentum. Nunc accumsan libero diam, ut varius nibh dapibus luctus.</p>

    <p>Integer vitae tempor velit. Sed convallis sed dolor id pulvinar. Donec nisi nisl, accumsan quis ante in, tempor dapibus metus. Mauris sed libero consequat, pellentesque sapien ac, tristique felis. Nullam et justo varius, fringilla tellus non, egestas
      justo. Morbi sodales libero orci, id viverra nulla lobortis iaculis. In hac habitasse platea dictumst. Pellentesque rutrum sollicitudin augue, nec laoreet dolor mattis non. Mauris non urna ligula. Donec vel velit libero. Sed elit arcu, bibendum
      non consectetur eu, varius ut lacus. Fusce commodo nunc ut molestie blandit. In scelerisque suscipit metus, at suscipit felis porta in. Morbi porttitor dapibus malesuada. Fusce vel elit aliquet, convallis nulla eget, ultricies metus.</p>

  </div>
</div>
<br/>
<p><em>This is the footer</em>
</p>

＆＃13;

Answer 2

您可以使用CSS特殊选择器：示例：

@media screen and (max-width: 480px) {
   .content {
      width: 80%;
   }
}

因此.content将在小屏幕上设置为80％宽度。您可能还想更改小分辨率的侧边栏行为，例如将其位置设置为初始值并将其宽度扩展到与内容相同的宽度，因此设计保持一致。

这是一个小提琴（您需要通过单击并拖动来调整渲染帧的大小以查看其中的操作） https://jsfiddle.net/9c3ztska/1/

现在我将在设计响应式网站时向您介绍一些非常有用的内容：

这是一个名为Skel的框架。简而言之，它使用网格系统，让您为特定分辨率指定div的特定大小。

网格系统的宽度为12个单位，因此12u代表容器宽度的100％。

这是一个代码示例：

<div class="row">
   <div class="6u 12u(small)"> YOUR CONTENT </div>
</div>

含义：在大屏幕上，您的内容将是容器宽度的50％，但在小屏幕上将扩展到100％。

如果你想尝试一下并加快速度，我建议你试试baseline使用Skel框架的样板。您可以将其下载并将其放在您的服务器上（无需数据库）并开始编码。基线附带预先配置的Skel和“断点”（断点是屏幕分辨率，因为Skel将在CSS规则之间切换）

如何调整div的大小，使它们在移动设备上看起来不会太小？

2 个答案: