cssportrait【代码示例】

CSS Portrait是一种用于创建网页布局的CSS技术，它可以使网页在不同设备上呈现出不同的布局。通过使用CSS Portrait，我们可以根据设备的方向（横向或纵向）来调整网页的样式和布局。

下面是一个示例代码，它展示了如何使用CSS Portrait来创建响应式的网页布局：

/* 在横向方向上的布局 */
@media (orientation: landscape) {
  body {
    background-color: lightblue;
  }
  h1 {
    font-size: 36px;
    color: white;
  }
  .content {
    display: flex;
    justify-content: space-between;
  }
  .content .left {
    width: 50%;
    background-color: white;
    padding: 20px;
  }
  .content .right {
    width: 50%;
    background-color: lightgray;
    padding: 20px;
  }
}
/* 在纵向方向上的布局 */
@media (orientation: portrait) {
  body {
    background-color: lightpink;
  }
  h1 {
    font-size: 24px;
    color: black;
  }
  .content {
    display: block;
  }
  .content .left,
  .content .right {
    width: 100%;
    background-color: white;
    padding: 20px;
    margin-bottom: 20px;
  }
}

在上面的代码中，我们使用了@media查询来根据设备的方向应用不同的样式。当设备处于横向方向时，我们将背景颜色设置为浅蓝色，标题的字体大小设置为36像素，并使用flex布局将内容分为左右两栏。左栏的宽度为50%，背景颜色为白色，右栏的宽度也为50%，背景颜色为浅灰色。

当设备处于纵向方向时，我们将背景颜色设置为浅粉色，标题的字体大小设置为24像素，并使用块级布局将内容显示为垂直排列。左栏和右栏的宽度都设置为100%，背景颜色为白色，底部有20像素的边距。

通过使用CSS Portrait，我们可以根据设备的方向来调整网页的布局，从而提供更好的用户体验。无论用户是使用横向还是纵向的设备浏览网页，都能够获得适合屏幕方向的布局。这种技术对于响应式设计非常有用，可以帮助我们创建适应不同设备的网页。