屏幕尺寸、分辨率和缩放初探：用CSS和div实现完美页面布局

前端

2023-11-06 08:11:52

屏幕尺寸、分辨率和缩放：基础知识

屏幕尺寸：屏幕尺寸是指屏幕的对角线长度，通常以英寸为单位。
分辨率：分辨率是指屏幕上像素的数量。像素是屏幕上最小的可寻址单元。分辨率越高，屏幕上显示的像素越多，图像就越清晰。
缩放：缩放是指放大或缩小屏幕上的内容。缩放通常用百分比来表示。

CSS媒体查询：构建响应式布局

CSS媒体查询允许您根据屏幕尺寸、分辨率或其他设备特征来应用不同的样式。这使您可以创建响应式布局，该布局可以适应不同屏幕尺寸和设备。

以下是使用CSS媒体查询创建响应式布局的步骤：

确定您的断点。断点是屏幕尺寸或分辨率的特定值，在该值处您希望更改网站的布局。
使用CSS媒体查询来针对不同的断点创建不同的样式。
在您的HTML代码中使用适当的类或ID来应用不同的样式。

使用CSS和div实现响应式布局的示例

以下是一个使用CSS和div实现响应式布局的示例：

<div class="container">
  <header>
    <h1>我的网站</h1>
  </header>

  <main>
    <article>
      <h2>文章标题</h2>

      <p>文章内容...</p>
    </article>

    <aside>
      <ul>
        <li>列表项 1</li>
        <li>列表项 2</li>
        <li>列表项 3</li>
      </ul>
    </aside>
  </main>

  <footer>
    <p>版权所有 &copy; 2023</p>
  </footer>
</div>

/* 针对屏幕尺寸小于768像素的设备 */
@media (max-width: 768px) {
  .container {
    flex-direction: column;
  }

  .main {
    width: 100%;
  }

  .aside {
    display: none;
  }
}

/* 针对屏幕尺寸大于或等于768像素的设备 */
@media (min-width: 768px) {
  .container {
    flex-direction: row;
  }

  .main {
    width: 75%;
  }

  .aside {
    display: block;
  }
}