How to use CSS Viewport unit vw to implement horizontal adaptive layout

How to use the CSS Viewport unit vw to implement horizontal adaptive layout

CSS Viewport is a unit relative to the viewport width, which can be used to create responsive Layout. Among them, vw represents the percentage unit of the viewport width.

In this article, we will learn how to use CSS Viewport unit vw to implement horizontal adaptive layout, and provide specific code examples.

1. Set basic styles

First, we need to set some basic styles to start our layout.

HTML:

<div class="container">
  <div class="content">
    <p>这是一个水平自适应布局的示例文本。</p>
  </div>
</div>

CSS:

.container {
  width: 100vw; /* 使用 vw 单位设置容器的宽度 */
  height: 100vh; /* 使用 vh 单位设置容器的高度 */
  display: flex; /* 使用 flexbox 布局 */
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  background-color: #f4f4f4;
}

.content {
  width: 80%; /* 使用百分比设置内容的宽度 */
  padding: 20px;
  background-color: #fff;
}

In the above code, we create a container containing text content and use vw and vh units to set the container width and height. We also used flexbox layout for horizontal and vertical centering.

2. Add media queries

Next, we will add media queries to adapt the layout to different screen widths.

@media (max-width: 768px) {
  .content {
    width: 90%; /* 在小屏幕下，设置内容的宽度为 90% */
  }
}

@media (max-width: 480px) {
  .content {
    width: 95%; /* 在更小屏幕下，设置内容的宽度为 95% */
  }
}

In the above code, we use media queries to control the width of content under different screen widths. When the screen width is less than or equal to 768px, the content's width is set to 90%; when the screen width is less than or equal to 480px, the content's width is set to 95%.

3. Implement scrolling effect

Sometimes, we may want the layout to be scrollable when it exceeds the width of the screen so that the user can view the entire content. Here's how to achieve the scrolling effect.

CSS:

.container {
  overflow-x: scroll; /* 在水平方向上启用滚动效果 */
}

By setting overflow-x: scroll on the container, we can enable horizontal scrollbars when exceeding the screen width. This allows users to browse the entire content with a horizontal scroll bar.

In this article, we learned how to use the CSS Viewport unit vw to implement horizontal adaptive layout. We set the width and height of the container and achieved horizontal and vertical centering via flexbox layout. We also added media queries to adapt the layout to different screen widths, and achieved a horizontal scrolling effect by setting overflow-x: scroll.

Through these technologies and sample code, we can better control and adapt to the layout of different screen sizes, providing users with a better browsing experience.

The above is the detailed content of How to use CSS Viewport unit vw to implement horizontal adaptive layout. For more information, please follow other related articles on the PHP Chinese website!