IT课程 CSS基础 033_响应式布局

zhaoJian.Net

发布于 2024-04-03 12:54:09

730

发布于 2024-04-03 12:54:09

文章被收录于专栏：zhaoJian.NetzhaoJian.Net

响应式布局

响应式布局是一种能够适应不同屏幕尺寸和设备的网页设计方法。通过使用响应式布局，可以使网页在不同的设备上保持良好的显示效果，无论是在桌面电脑、平板电脑还是手机上。

媒体查询

使用 CSS 的媒体查询可以根据设备的特征（如屏幕宽度、高度、设备类型等）应用不同的样式。这使得你可以为不同的屏幕尺寸定义不同的布局。

示例：

/* PC */
@media (min-width: 992px) {
    * {
        background: yellow
    }
}
/* 平板电脑 */
@media (min-width: 768px) and (max-width: 992px) {
    * {
        background: red
    }
}
/* 普通手机 */
@media (min-width: 576px) and (max-width: 768px) {
    * {
        background: green
    }
}
/* 小屏设备 */
@media (max-width: 576px) {
    * {
       background: blue
    }
}

效果：

响应式图片

使用 max-width: 100%; 来确保图像和媒体元素在小屏幕上不会超出其容器。示例：

img {
  max-width: 100%; /* 图像最大宽度为其包含元素的100% */
  height: auto;    /* 保持宽高比，防止图像变形 */
}

/* 在小屏幕上调整图像大小 */
@media screen and (max-width: 600px) {
  img {
    max-width: 50%; /* 图像最大宽度为其包含元素的50% */
  }
}

<img src="zhaojian.jpg" alt="Responsive Image">

效果：

视口设置

使用 <meta> 标签设置视口，以确保页面在移动设备上正确缩放。

示例：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

这个元标签告诉移动端浏览器，它们应该将视口宽度设定为设备的宽度，将文档放大到其预期大小的 100%，在移动端以你所希望的为移动优化的大小展示文档。

和视口元标签一起，你可以使用另外几个设定，但大体说来，上面那行就是你想要使用的。

initial-scale：设定了页面的初始缩放，我们设定为 1。
height：特别为视口设定一个高度。
minimum-scale：设定最小缩放级别。
maximum-scale：设定最大缩放级别。
user-scalable：如果设为 no 的话阻止缩放。

避免使用minimum-scale、maximum-scale，尤其是 user-scalable设置为no。以保证用户可自行缩小、放大。

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

响应式

css

布局

基础

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度