尾风CSS：使用动态断点和容器查询
#javascript #css #网络开发人员 #tailwindcss

简介

  1. 断点
  • 什么是动态断点和容器查询？
  • 尾风CSS中的动态断点
  • 默认的尾风CSS断点
  • 在tailwind.config.js中自定义断点
  • 断点的示例：带尾风的响应式纳维布
  • 断点的示例2：带尾风的响应式网格布局
  1. 集装箱查询
  • 什么是容器查询？
  • 容器与媒体查询：比较
  • 尾风CSS中的容器查询
  • 使用PostCSS插件使用容器查询
  • 配置tailwind.config.js用于容器查询
  1. 组合动态断点和容器查询
  • 用于组合动态断点和容器查询的用例
  • 示例：带有尾风CSS的响应仪表板布局
  1. 最佳实践
  • 如何使用动态断点和容器查询
  • 如何避免常见错误
  1. 结论
  • 感谢您阅读文章

在本文中，我们将了解动态断点和容器查询。

什么是动态断点和容器查询？

为了适应不同的屏幕尺寸和分辨率，在网站的布局中有一些点可能会发生设计更改。

基本上，Breakpoints根据视口的宽度调整了网页上网页或HTML元素的样式。

因此，启用响应式设计并允许网站适应不同的屏幕尺寸

示例：

/*Dynamic breakpoints using media queries */

@media (max-width: 768px) {
  .element {
    /* styles for screen sizes smaller than 768px */
  }
}

容器查询

而不是使用整个视口来调整网页上HTML的样式。

我们可以使用元素容器的大小（该特定元素存在的容器）

这允许许多模块化方法和灵活的组件。可以在其他元素中重复使用

例子： 

/* container queries are not supported widely across browsers */

.element:container(max-width: 300px) {
  /* here you can write styles for container that has a max width of  300px */
}

尾风CSS中的动态断点

尾风是一个彻底改变了前端发展的框架。

尾风CS中有一组预定的断点，您可以开箱即用来创建响应式设计

<!-- Tailwind CSS breakpoints Example -->
<div class="bg-blue-200 md:bg-gray-200 lg:bg-indigo-500">
    The div is going to change the background color based on the size of the viewport
</div>

默认的尾风CSS断点

tailwind CSS提供以下默认断点

  • SM：640px
  • MD：768px
  • lg：1024px
  • XL：1280px
  • 2xl：1536px

这是您可以在HTML中使用断点
的方式 

<!--default breakpoints example -->
<div class="text-xs sm:text-sm md:text-base lg:text-lg xl:text-xl 2xl:text-2xl">
  Here we are changing the font size of the text based on the view port size
</div>

在tailwind.config.js中自定义断点

  • 要自定义我们需要编辑或创建tailwind.config.js文件中的断点
  • 在Cinfig文件中找到主题对象，然后在主题对象中添加或编辑屏幕属性。在这里，您可以定义自定义屏幕断点或编辑现有的断点
  • 让我们考虑下面的一个示例，我们添加了两个新的断点，即3xl和4xl 
//file tailwind.config.js
module.exports = {
  theme: {
    extend: {
      screens: {
        '3xl': '1920px',
        '4xl': '2560px',
      },
    },
  },
  variants: {},
  plugins: [],
}

现实生活中动态断点的例子

示例1：创建一个响应式NAV栏 


<script src="https://cdn.tailwindcss.com"></script>

<!-- Responsive Nav bar demo using Tailwind CSS -->
<nav class="bg-gray-500 p-4">
  <div class="container mx-auto">
    <div class="flex justify-between items-center">
      <div class="text-white font-bold text-lg">
        Your Brand Name here
      </div>
      <div class="hidden md:flex">
        <a href="#" class="text-white mx-2">Services</a>
        <a href="#" class="text-white mx-2">Products</a>
        <a href="#" class="text-white mx-2">Blog</a>
      </div>
      <button class="md:hidden text-white">
        <!-- hamburger icon here -->
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" width="24" height="24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
        </svg>
      </button>
    </div>
  </div>
</nav>

Image description

在上面的示例中，导航屏幕隐藏在小屏幕上，并在MD上显示到大屏幕

示例2：响应式网格布局

  • 网格布局将根据视口大小采用不同的尺寸
  • 我们正在通过在``md：grid-col-2''中的类别中实现CSS网格，在中型视口和LG中只有2个网格列：Grid-Col-3 3 3 3个网格列中的大型视口。<<<<<<<<<<<<<<<<<<<<<<<<<< /li>

Image description

`html 

Service A
Service B
Service C
Service D
Service E

`

要阅读完整的文章，请转到这里：

Tailwind CSS: Using Dynamic Breakpoints and Container Queries