当前位置：网站首页>Tailwind核心理念——响应式设计

Tailwind核心理念——响应式设计

2022-04-21 13:28:00 【_雪菜肉丝面_】

文章目录


在这里插入图片描述

响应式设计

就是会根据屏幕的大小调整页面。

举例：

<div class="grid grid-flow-row md:grid-flow-col">
	<div class="text-4xl ring-1">1</div>
	<div class="text-4xl ring-1">2</div>
	<div class="text-4xl ring-1">3</div>
	<div class="text-4xl ring-1">4</div>
</div>
<div class="w-full text-4xl ring-1">内容</div>

grid：grid布局。
grid-flow-row：自动放置，行方向。
md:grid-flow-col：宽度为md以上时，自动放置，列方向。

text-4xl：文字大小。
ring-1：轮廓线。
w-full：满宽。

效果：

在这里插入图片描述
内置的五个前缀：

在这里插入图片描述

何为移动端优先？

就是优先考虑小屏幕，默认最小。
每当宽度大于某个值了，就生效那个断点。

案例当中，行排列是最小的，列排列次之。故：
grid-flow-row：行排列，不加前缀，默认情况。
md:grid-flow-col：列排列，加前缀，屏幕大于768才会触发。

如何自定义？

比如，只有在640到768的范围内，才会显示出来。

block：display为block。
hidden：display为none。

在配置中弄：

theme: {
    
	screens: {
    
		"justsm": {
    'min': '640px', 'max': '767px'}
	}
}

然后使用它：

<div class="hidden justsm:block ">你好，世界！</div>

hidden：就是hidden。
justsm:block：只有在640到768的范围内，才会block。

效果：

在这里插入图片描述

版权声明
本文为[_雪菜肉丝面_]所创，转载请带上原文链接，感谢
https://blog.csdn.net/qq_37284843/article/details/124316312

边栏推荐

猜你喜欢

随机推荐