手机浏览 RSS 2.0 订阅 膘叔的简单人生 , 腾讯云RDS购买 | 超便宜的Vultr , 注册 | 登陆

之前没有注意过的tailwindcss的响应式设计

首页 > Javascript >

 tailwindcss现在用的人越来越多了,大量的flex以及固定的text-[],w-[]等自定义的class,确实让人用起来非常方便,然后在页面上也可以用sm:/md:/等前缀符可以直接设置相应大小屏幕所对应的class。如果class太多太长,还可以用@apply来进行自定义的缩短等

 
之前一直没有注意,在写一些样式的时候就直接<div class="w-full lg:w-1/2 sm:w-1/2 md:w-1/2" >结果发现在更小的屏幕下无法设置,因为sm:是代表了640px,而象手机一般是320px/414px,这时候就没办法设置了。在想着自定义xs:前缀的时候,看了一下官方文档,结果发现上面有标明一个非常重要的话:【不要使用 sm: 来定位移动设备,而应该使用无前缀的功能类来定位移动设备,并在较大的断点处覆盖它们】参考(响应式设计 - Tailwind CSS 中文文档)。
官方提示:【因此,通常最好先为移动设备设计布局,接着在 sm 屏幕上进行更改,然后是 md 屏幕,以此类推。】
 
所以其实所有的样式理论上应该都是基于小屏幕写的,而比sm还大的屏幕,反而是需要加前缀进行自定义的。比如你需要小屏幕全屏,中屏幕1/2,大屏幕1/3,应该是这样写<div class="w-full sm:w-1/2 md:1/3" >因为lg比md还大,所以lg反而不需要设置了。
 
纯记录一下。这一个月我是从vue2写到react再返回vue3,快崩溃了。



本站采用创作共享版权协议, 要求署名、非商业和保持一致. 本站欢迎任何非商业应用的转载, 但须注明出自"易栈网-膘叔", 保留原始链接, 此外还必须标注原文标题和链接.

« 上一篇 | 下一篇 »

发表评论

评论内容 (必填):