只在屏幕尺寸为 sm 或更小时显示元素（TailwindCSS）。

huangapple
go评论88阅读模式
英文:

How to only show element when screen is sm or smaller (TailwindCSS)

问题

我试图让一个 div 只在屏幕宽度小于 "sm" 时显示，而在宽度大于 "sm" 时隐藏。在下面的示例中，我想要第一个 motion.div 除了小尺寸屏幕以外都显示。我希望第二个 div 只在屏幕宽度小于 "sm" 时显示。

  1. <div className="hidden sm:inline cursor-default w-8/12 bg-primary-bg overflow-auto h-3/4 rounded-2xl relative pt-5 items-center ">
  2.     <!-- 这里是 div 的内容 -->
  3. </div>
  5. <div className='min-sm:hidden fixed top-0 left-0 w-screen h-screen bg-primary-bg overflow-auto'>
  6.     <!-- 这里是第二个 div 的内容 -->
  7. </div>
英文:

I am trying to have a div only appear once the screen is below sm and hidden once above sm size. In the example below, I want the first motion.div to appear at all sized except for small. I want the second div to only appear once screen is sm or smaller.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

  1.     &lt;&gt;
  2.       &lt;motion.div className=&quot;hidden sm:inline cursor-default w-8/12 bg-primary-bg overflow-auto h-3/4 rounded-2xl relative pt-5 items-center &quot;&gt;
  3.         &lt;button className=&quot;absolute top-0 right-10 m-5 p-2 cursor-pointer&quot; onClick={onClose}&gt;
  4.           &lt;XMarkIcon className=&#39;fixed h-10 w-10 text-primary-green&#39; /&gt;
  5.         &lt;/button&gt;
  6.         &lt;div className=&quot;p-10&quot;&gt;
  7.           &lt;h2 className=&#39;text-lg sm:text-2xl pt-2 font-bold font-source-sans-pro uppercase cursor-text&#39;&gt;{essay.title}&lt;/h2&gt;
  8.           &lt;p className=&#39;pb-2 font-source-sans-pro capitalize cursor-text&#39;&gt;{essay.author}&lt;/p&gt;
  9.           &lt;p className=&#39;text-sm sm:text-lg font-source-serif-pro cursor-text&#39; dangerouslySetInnerHTML={{ __html: essay.content.replace(/\n/g, &#39;&lt;br/&gt;&#39;)}}&gt;&lt;/p&gt;
  10.         &lt;/div&gt;
  11.       &lt;/motion.div&gt;
  12.       &lt;motion.div className=&#39;min-sm:hidden fixed top-0 left-0 w-screen h-screen bg-primary-bg overflow-auto&#39;&gt;
  13.         &lt;button className=&#39;absolute top-0 left-0 p-5 cursor-pointer&#39; onClick={onClose}&gt;
  14.           &lt;ArrowLeftIcon className=&#39;fixed h-8 w-8&#39;/&gt;
  15.         &lt;/button&gt;
  16.         &lt;div className=&#39;p-5 mt-12&#39;&gt;
  17.           &lt;h2 className=&#39;text-2xl uppercase font-source-sans-pro font-bold&#39;&gt;{essay.title}&lt;/h2&gt;
  18.           &lt;p className=&#39;text-md font-source-serif-pro&#39;&gt;{essay.author}&lt;/p&gt;
  19.           &lt;p className=&#39;mt-4 text-sm sm:text-lg font-source-serif-pro cursor-text&#39; dangerouslySetInnerHTML={{ __html: essay.content.replace(/\n/g, &#39;&lt;br/&gt;&#39;)}}&gt;&lt;/p&gt;
  20.         &lt;/div&gt;
  21.       &lt;/motion.div&gt;  
  22.     &lt;/&gt;

<!-- end snippet -->

答案1

得分: 1

为了使第二个 div 仅在屏幕为 "sm" 或更小时出现一次，请使其在 sm: 断点下的 sm:hidden 类中默认可见，然后应用 display: none：

  1.     <div class='sm:hidden fixed top-0 left-0 w-screen h-screen bg-primary-bg overflow-auto'>
  2.       <button class='absolute top-0 left-0 p-5 cursor-pointer'>
  3.         <ArrowLeftIcon class='fixed h-8 w-8'>ArrowLeftIcon</ArrowLeftIcon>
  4.       </button>
  5.       <div class='p-5 mt-12'>
  6.         <h2 class='text-2xl uppercase font-source-sans-pro font-bold'>{essay.title}</h2>
  7.         <p class='text-md font-source-serif-pro'>{essay.author}</p>
  8.         <p class='mt-4 text-sm sm:text-lg font-source-serif-pro cursor-text'>essay.content</p>
  9.       </div>
  10.     </div>
英文:

To have the second div to only appear once screen is sm or smaller, have it be visible "by default" and then apply display: none for sm: breakpoint with the sm:hidden class:

<!-- begin snippet: js hide: false console: false babel: false -->

<!-- language: lang-html -->

  1. &lt;script src=&quot;https://cdn.tailwindcss.com&quot;&gt;&lt;/script&gt;
  3. &lt;div class=&#39;sm:hidden fixed top-0 left-0 w-screen h-screen bg-primary-bg overflow-auto&#39;&gt;
  4.   &lt;button class=&#39;absolute top-0 left-0 p-5 cursor-pointer&#39;&gt;
  5.     &lt;ArrowLeftIcon class=&#39;fixed h-8 w-8&#39;&gt;ArrowLeftIcon&lt;/ArrowLeftIcon&gt;
  6.   &lt;/button&gt;
  7.   &lt;div class=&#39;p-5 mt-12&#39;&gt;
  8.     &lt;h2 class=&#39;text-2xl uppercase font-source-sans-pro font-bold&#39;&gt;{essay.title}&lt;/h2&gt;
  9.     &lt;p class=&#39;text-md font-source-serif-pro&#39;&gt;{essay.author}&lt;/p&gt;
  10.     &lt;p class=&#39;mt-4 text-sm sm:text-lg font-source-serif-pro cursor-text&#39;&gt;essay.content&lt;/p&gt;
  11.   &lt;/div&gt;
  12. &lt;/div&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年6月9日 05:31:09
  • 转载请务必保留本文链接：https://go.coder-hub.com/76435816.html
  • css
  • html
  • tailwind-css
  • tailwind-ui
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定