元素的反应性和尺寸

dirilisartogul.

在本文中，我们回顾了视口概念的总结，并讨论了哪些功能和单元可以帮助我们进行响应式设计，特别是在照片和视频的排列方面。 帖子标题[ 隐藏] 1 CSS中视口的概念 2 个可变尺寸 2.1响应式设计中的照片 2.2响应式设计中的视频 3学期末 4。结论 CSS中视口的概念 我们可以将这个概念的定义总结如下： 视口是指我们查看网站的范围。关于了解 Viewport，我们在综合HTML培训文章集中提供了一篇完整的文章，您可以阅读。 视口概念 视口只包含网站的内容，不包含滚动条之类的东西。 默认情况下，移动设备和平板电脑浏览器会缩小网站的大小（与桌面上的外观相同）以适应自己的视口。


有了这个，我们就可以使用该网站了，但是会有很大的缩放、痛苦和困难！因此，在做任何事情之前，我们应该告诉浏览器：等等，不要对网站做任何事情，我要自己做出反应！ 为了让浏览器理解这一点，只需将以下 阿尔及利亚 手机号码 代码添加到 head 元素的主体中： <meta name="viewport" content="width=device-width, initial-scale=1.0"> 此代码被视为元标记，您可以在HTML教程中阅读更多相关信息。 尺寸可变 反应模式下的大小必须以可变单位表示。 例如，百分比、vw 和 vh 等单位是可变的，而 px 和 pt 等单位是不可变的。 这些单位根据视口的尺寸进行自我调整。例如，20vw 表示视口宽度的 20%。




可变单位允许元素在不同情况下轻松放大或缩小。 为了更好地理解这些单位，请考虑以下示例： 我们在响应式设计中大量使用这些维度。这些维度是应该分配给我们的内容的维度。 要了解有关变量和独立单位的更多信息，您可以参考CSS中单位的文章。 响应式设计中的照片 照片是网站页面上最重要的元素之一。它们的存在将我们的网站变成了一个真实的世界，并对用户体验产生了很大的影响。 因此，我们不应该允许更改网站页面的大小对照片产生负面影响。 要让照片响应式，必须注意以下几点。 正确使用 width 属性 只要我们不为照片指定尺寸，它们就会采用默认尺寸，并且可能会弄乱所有内容。 我们应该始终尝试将它们的尺寸设置为其父元素尺寸的百分比。这样，如果父元素是响应式的，那么想要的照片也会响应式，并且照片的尺寸会随着屏幕尺寸的最小变化而变化。