布局之Aspect-Ratio Container Box-Decoration-Break Object-Fit Object-Position】
1.布局-纵横比(Aspect Ratio)
1.1 快速参考
用于控制元素纵横比的实用程序。
class | Properties |
---|---|
aspect-auto | aspect-ratio: auto; |
aspect-square | aspect-ratio: 1 / 1; |
aspect-video | aspect-ratio: 16 / 9; |
1.2 基本用法
1.2.1设置纵横比
使用实用程序设置元素的所需纵横比。aspect-{ratio}
<iframe
class="w-full aspect-video"
src="https://player.bilibili.com/player.html?aid=814174829&bvid=BV1qG4y1v7R9&cid=794450776&page=1"
scrolling="no"
border="0"
frameborder="no"
framespacing="0"
allowfullscreen="true"
></iframe>
可以发现宽高比是16:9
1.2.2 浏览器支持
这些实用程序使用本机 CSS 属性,直到版本 15 才在 Safari 中支持该属性。在Safari 15普及之前,Tailwind的宽高比插件是一个不错的选择。aspect-{ratio}``aspect-ratio
1.3 有条件地应用
1.3.1 悬停、焦点和其他状态
Tailwind 允许您使用变体修饰符在不同状态下有条件地应用效用类。例如,使用 仅在悬停时应用该实用程序。hover:aspect-square``aspect-square
<iframe
class="w-full aspect-video hover:aspect-square"
src="https://player.bilibili.com/player.html?aid=814174829&bvid=BV1qG4y1v7R9&cid=794450776&page=1"
></iframe>
有关所有可用状态修饰符的完整列表,请查看 Hover、Focus 和 Other State 文档。
移入后
移入后宽高比变成1:1
1.3.2 断点和媒体查询
您还可以使用变体修饰符来定位媒体查询,如响应式断点、深色模式、首选减少运动等。例如,用于仅在中等屏幕尺寸及以上位置应用该实用工具。md:aspect-square``aspect-square
<iframe
class="w-full aspect-video md:aspect-square"
src="https://player.bilibili.com/player.html?aid=814174829&bvid=BV1qG4y1v7R9&cid=794450776&page=1"
scrolling="no"
></iframe>
这时在md屏幕以上宽高比为1:1
这时在md屏幕以下宽高比变为我们设置的16:9
若要了解详细信息,请查看有关响应式设计、深色模式和其他媒体查询修饰符的文档。
1.4 使用自定义值
1.4.1 自定义主题
默认情况下,Tailwind 提供最少的一组实用程序。您可以通过编辑或在文件中自定义这些值。aspect-ratio``theme.aspectRatio``theme.extend.aspectRatio``tailwind.config.js
tailwind.config.js
module.exports = {
theme: {
extend: {
aspectRatio: {
'4/3': '4 / 3',
},
}
}
}
有关自定义默认主题的详细信息,请参阅主题自定义文档。
1.4.2 任意值
如果需要使用一次性值,而该值在主题中没有意义,请使用方括号使用任意值动态生成属性。aspect-ratio
<iframe
class="w-full aspect-[4/3]"
src="https://player.bilibili.com/player.html?aid=814174829&bvid=BV1qG4y1v7R9&cid=794450776&page=1"
></iframe>
有关任意值支持的详细信息,请参阅任意值文档。
这时宽高比变成了我们设置的4:3
2.布局-容器(Container)
2.1 快速参考
容器
根据当前断点固定元素宽度的组件。
container
类设置一个元素的 max-width
来匹配当前断点的 min-width
。container
对应的尺寸如下:
断点 | 属性 |
---|---|
None | width: 100%; |
sm (640px) | max-width: 640px; |
md (768px) | max-width: 768px; |
lg (1024px) | max-width: 1024px; |
xl (1280px) | max-width: 1280px; |
2xl (1536px) | max-width: 1536px; |
举个例子:如果现在屏幕宽度是800px(768px-1024px),这时设置了container元素的宽度为768px
2.2 使用方法
container
类设置一个元素的 max-width
来匹配当前断点的 min-width
。如果您想为一组固定的屏幕尺寸设计,而不是试图适应一个完全流动的视窗,这很有用。
注意:Tailwind CSS容器不会自动居中,居中需要使用
mx