江苏龙网

  1. 首页 > 人文 > >

断点|说一说你不了解的Tailwind CSS响应式设计~


断点|说一说你不了解的Tailwind CSS响应式设计~
导语

响应式相信大家都不陌生 ， 就是使用css的媒体查询设计 ， 进行不同尺寸 ， 显示不同效果 ， 但是Tailwind CSS的响应式设计使用起来会更加爽 ， 更加快捷方便 ， 到底怎么搞呢？我们一起来探讨一下 。
简介
Tailwind中的每个实用程序类都可以有条件地应用于不同的断点 ， 这使得轻松构建复杂的响应式接口变得轻松 ， 而无需离开HTML 。
默认情况下 ， Tailwind提供了四个断点 ， 也就是分别对应移动端 ， 横屏 ， 平板 ， 桌面端 。 当然你也可以自定义断点 。 对应断点相应的是最小宽度为界 。

screens: {

sm: '640px'

//@media (min-width: 640px) { /* ... */



md: '768px'

//@media (min-width: 768px) { /* ... */



lg: '1024px'

//@media (min-width: 1024px) { /* ... */



xl: '1280px'

//@media (min-width: 1280px) { /* ... */




简单使用
使用起来当然非常简单 ， 省去了繁杂的过程 ， 直接对应尺寸显示的样式即可 ， 不加限制则全尺寸显示一样的效果 。
默认情况下 ， Tailwind使用移动优先断点系统 ， 类似于您可能在Bootstrap或Foundation中使用的系统 。
使用：只要使用前缀加上：再加上对应类名即可 。
例如： md:text-gray-700
<p class=\"text-red-600 sm:text-yellow-300 lg:text-green-600 xl:text-blue-300\">Tailwind CSS text-color测试</p>

上述一段代码 ， 意思是：屏幕小于640尺寸为红色 ， 640-1024尺寸显示为黄色 ， 1024-1280尺寸显示为绿色 ， 大于1280尺寸显示为蓝色 。
这意味着未加前缀的类对所有屏幕尺寸都有效 ， 而带前缀的类仅在指定的断点及以上断点生效 。
几个小技巧
  1. 可以使用max-w-sm限定此网页为移动端 ， 在浏览器也只显示小尺寸 。
  2. 【断点|说一说你不了解的Tailwind CSS响应式设计~】要为移动设备设计样式 ， 您需要使用实用程序的无前缀版本 ， 而不是带sm:前缀的版本 。 不要将其sm:视为“在小屏幕上”的含义 ， 而应将其视为“在小断点处” 。
  3. 不要sm:用于定位移动设备


    推荐阅读


上一篇：百度|?237亿！百度成“接盘侠”，谁也没想到，一切竟来得如此之快！

下一篇：红米手机|新的MIUI12beta已开始推送，RedmiNote8Pro用户收到了吗？