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

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

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

问题

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

<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 ">
    <!-- 这里是 div 的内容 -->
</div>

<div className='min-sm:hidden fixed top-0 left-0 w-screen h-screen bg-primary-bg overflow-auto'>
    <!-- 这里是第二个 div 的内容 -->
</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 -->

    &lt;&gt;
      &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;
        &lt;button className=&quot;absolute top-0 right-10 m-5 p-2 cursor-pointer&quot; onClick={onClose}&gt;
          &lt;XMarkIcon className=&#39;fixed h-10 w-10 text-primary-green&#39; /&gt;
        &lt;/button&gt;
        &lt;div className=&quot;p-10&quot;&gt;
          &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;
          &lt;p className=&#39;pb-2 font-source-sans-pro capitalize cursor-text&#39;&gt;{essay.author}&lt;/p&gt;
          &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;
        &lt;/div&gt;
      &lt;/motion.div&gt;
      &lt;motion.div className=&#39;min-sm:hidden fixed top-0 left-0 w-screen h-screen bg-primary-bg overflow-auto&#39;&gt;
        &lt;button className=&#39;absolute top-0 left-0 p-5 cursor-pointer&#39; onClick={onClose}&gt;
          &lt;ArrowLeftIcon className=&#39;fixed h-8 w-8&#39;/&gt;
        &lt;/button&gt;
        &lt;div className=&#39;p-5 mt-12&#39;&gt;
          &lt;h2 className=&#39;text-2xl uppercase font-source-sans-pro font-bold&#39;&gt;{essay.title}&lt;/h2&gt;
          &lt;p className=&#39;text-md font-source-serif-pro&#39;&gt;{essay.author}&lt;/p&gt;
          &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;
        &lt;/div&gt;
      &lt;/motion.div&gt;  
    &lt;/&gt;

<!-- end snippet -->

答案1

得分: 1

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

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

&lt;script src=&quot;https://cdn.tailwindcss.com&quot;&gt;&lt;/script&gt;

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

<!-- end snippet -->

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

发表评论

匿名网友

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

确定