经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » 程序设计 » PHP » 查看文章
说一说你不了解的Tailwind CSS响应式设计~
来源:cnblogs  作者:神兵小将2016  时间:2020/11/23 12:23:05  对本文有异议

导语

响应式相信大家都不陌生,就是使用css的媒体查询设计,进行不同尺寸,显示不同效果,但是Tailwind CSS的响应式设计使用起来会更加爽,更加快捷方便,到底怎么搞呢?我们一起来探讨一下。

简介

Tailwind中的每个实用程序类都可以有条件地应用于不同的断点,这使得轻松构建复杂的响应式接口变得轻松,而无需离开HTML。
默认情况下,Tailwind提供了四个断点,也就是分别对应移动端,横屏,平板,桌面端。当然你也可以自定义断点。对应断点相应的是最小宽度为界。

  1. screens: {
  2. sm: '640px',
  3. //@media (min-width: 640px) { /* ... */ }
  4. md: '768px',
  5. //@media (min-width: 768px) { /* ... */ }
  6. lg: '1024px',
  7. //@media (min-width: 1024px) { /* ... */ }
  8. xl: '1280px',
  9. //@media (min-width: 1280px) { /* ... */ }
  10. },

简单使用

使用起来当然非常简单,省去了繁杂的过程,直接对应尺寸显示的样式即可,不加限制则全尺寸显示一样的效果。

默认情况下,Tailwind使用移动优先断点系统,类似于您可能在Bootstrap或Foundation中使用的系统。

使用:只要使用前缀加上:再加上对应类名即可。
例如: md:text-gray-700

  1. <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. 要为移动设备设计样式,您需要使用实用程序的无前缀版本,而不是带sm:前缀的版本。不要将其sm:视为“在小屏幕上”的含义,而应将其视为“在小断点处”。

  3. 不要sm:用于定位移动设备

  1. <!-- This will only center text on screens 640px and wider, not on small screens -->
  2. <div class="sm:text-center"></div>
  1. 使用无前缀的实用程序来定位移动设备,并在较大的断点处覆盖它们
  1. <!-- This will center text on mobile, and left align it on screens 640px and wider -->
  2. <div class="text-center sm:text-left"></div>

5.通常最好先为设计实现移动布局,然后在对sm屏幕有意义的所有更改上进行分层,然后再对md屏幕等进行分层。

  1. 我们不必为sm断点或xl断点指定背景色,您只需要指定实用程序何时应开始生效,而不是何时停止。
  1. <div class="bg-teal-500 md:bg-red-500 lg:bg-teal-500"></div>

原文地址:https://www.wjcms.net/archives/tailwindcss初体验之响应式设计

原文链接:http://www.cnblogs.com/wjcms/p/13996104.html

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号