英文:
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 -->
<>
<motion.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 ">
<button className="absolute top-0 right-10 m-5 p-2 cursor-pointer" onClick={onClose}>
<XMarkIcon className='fixed h-10 w-10 text-primary-green' />
</button>
<div className="p-10">
<h2 className='text-lg sm:text-2xl pt-2 font-bold font-source-sans-pro uppercase cursor-text'>{essay.title}</h2>
<p className='pb-2 font-source-sans-pro capitalize cursor-text'>{essay.author}</p>
<p className='text-sm sm:text-lg font-source-serif-pro cursor-text' dangerouslySetInnerHTML={{ __html: essay.content.replace(/\n/g, '<br/>')}}></p>
</div>
</motion.div>
<motion.div className='min-sm:hidden fixed top-0 left-0 w-screen h-screen bg-primary-bg overflow-auto'>
<button className='absolute top-0 left-0 p-5 cursor-pointer' onClick={onClose}>
<ArrowLeftIcon className='fixed h-8 w-8'/>
</button>
<div className='p-5 mt-12'>
<h2 className='text-2xl uppercase font-source-sans-pro font-bold'>{essay.title}</h2>
<p className='text-md font-source-serif-pro'>{essay.author}</p>
<p className='mt-4 text-sm sm:text-lg font-source-serif-pro cursor-text' dangerouslySetInnerHTML={{ __html: essay.content.replace(/\n/g, '<br/>')}}></p>
</div>
</motion.div>
</>
<!-- 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 -->
<script src="https://cdn.tailwindcss.com"></script>
<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>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论