Skip to main content

Responsive

Basic Concepts of Responsive​

/* 在小于或等于 992 像素的屏幕上，将背景色设置为蓝色 */
@media screen and (max-width: 992px) {
  body {
    background-color: blue;
  }
}
 
/* 在 600 像素或更小的屏幕上，将背景色设置为橄榄色 */
@media screen and (max-width: 600px) {
  body {
    background-color: olive;
  }
}

How to use it in Tailwind​

    <div className="w-full">
      {/* 等价于： @media (min-width: 640px) {}，当宽度大于等于640px的时候生效 */}
      <div className="sm:bg-red-300 w-full text-center">sm (640 px)</div>
      <div className="md:bg-green-100 w-full text-center">md (768 px)</div>
      <div className="lg:bg-blue-100 w-full text-center">lg (1024 px)</div>
      <div className="xl:bg-purple-100 w-full text-center">xl (1280 px)</div>
      <div className="2xl:bg-slate-100 w-full text-center">2xl (1536 px)</div>
    </div>