responsive-design 相关问题

响应式网页设计（RWD）是一种Web设计和开发方法，旨在制作网站，以便根据屏幕大小，平台和方向在各种设备上提供最佳体验。

https://chuk-norris-jokes.onrender.com/ 我想将的背景颜色：rgba(0, 0, 0, 0.5)拉伸到屏幕的整个高度。 https://chuk-norris-jokes.onrender.com/ 我想将的背景颜色：rgba(0, 0, 0, 0.5) 拉伸到屏幕的整个高度。获得“overlay”类 onclick。但是当笑话块很多时，高度就不会拉伸到全高。当高度静态时一切正常。媒体屏幕 820px-1280px 出现问题 (https://i.sstatic.net/4i63WcLj.png) (https://i.sstatic.net/lGSkyjS9.png) 我尝试设置 body {height: 100vh 或 100%} 我也设置了 .overlay{min-height:100vh 或 100%}。但是当水平滚动出现body和overlay时就不会拉伸 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Chuck Norris Jokes</title> </head> <body> <div id="overlay"></div> <div class="main_wrapper " id="mainWrapper"> <div class="content_wrapper"> <header class="header" id="header"> </header> <div class="title_wrapper" id="titleWrapper"> </div> <div class="form_wrapper" id="formWrapper"> </div> <div class="jokes_wrapper" id="jokesWrapper"> </div> </div> </div> <div class="sidebar hide" id="sideBar"> <h3 class="sidebar_title">Favorite</h3> <div class="favorite_jokes_wrapper" id="favJokesWrap"> </div> </div> </body> </html> body,html{ @apply min-h-screen; overflow: auto; } .main_wrapper{ @apply p-5 overflow-auto container min-h-full m-auto w-full relative md:m-auto md:p-2 md:pt-5 xl:max-w-[960px] xl:m-0; .content_wrapper{ @apply xl:max-w-[600px] xl:m-auto } }; .overlay{ @apply w-full absolute top-0 left-[-32px] bottom-0 right-0 min-h-full pointer-events-auto ; z-index: 2; background-color: rgba(0, 0, 0, 0.5);} .sidebar{ @apply container bg-light_grey absolute z-10 top-0 min-h-screen right-0 md:w-[56%] xl:block max-w-[480px];} .sidebar_title{ @apply hidden xl:block xl:m-10 font-medium text-xl text-sub_main_color; } .favorite_jokes_wrapper{ @apply flex flex-col mt-16 items-center justify-center min-h-full bg-light_grey xl:mt-5; .joke { @apply bg-white rounded-xl gap-5 md:pt-12 md:px-5 md:pb-5; border: 1px solid #F8F8F8; box-shadow: 0px 4px 6px 0px #0000001A; div{ @apply md:w-[298px]; } p { @apply text-sm font-normal; } h3{ @apply mt-0 bg-light_grey mt-2 text-10px ; } } } ` 这是因为 100vh 意味着 100 视口高度，当您滚动 overlay 高度不会改变并随着 main_wrapper 滚动时，我认为您需要的是将覆盖层固定在屏幕左侧，这样它就不会不随内容一起滚动解决方案是使用 fixed 代替 absolute 参考：

css responsive-design height

回答 1 投票 0

使用 CSS flex 平行排列行列

我正在尝试的是“您的隐私”，说明和按钮应在同一行对齐。 HTML： ... 我正在尝试的是，“您的隐私”，描述和按钮应该在同一行对齐。 HTML： <div class="cookie-notice"> <div class="cn-body"> <h2 id="title">Your Privacy</h2> <p id="id-cookie-notice"><span><span>We use cookies to improve your experience on our site.</span></span></p> <div class="cn-ok"> <a href="#" class="cm-link cn-learn-more">Decline</a> <div class="cn-buttons"><button type="button" class="cm-btn cm-btn-danger cn-decline">Decline</button><button type="button" class="cm-btn cm-btn-success">Accept</button></div> </div> </div> </div> CSS： .cn-body { display: flex; flex-direction: column; font-family: myriad-pro, sans-serif; gap: 0; padding: 0; width: 100%; padding: 40px 113px; boder: 1px solid red; margin: 10px; } .cm-btn-danger { display: none; } .cn-ok { align-items: center; display: flex; flex-direction: row-reverse; gap: 10px; justify-content: end; margin-top: 20px } 这是代码：代码我们可以使用 justify-content: start 来对齐按钮！ .cn-body { display: flex; flex-direction: column; font-family: myriad-pro, sans-serif; gap: 0; padding: 0; width: 100%; padding: 40px 113px; boder: 1px solid red; margin: 10px; } .cm-btn-danger { display: none; } .cn-ok { align-items: center; display: flex; flex-direction: row-reverse; gap: 10px; justify-content: start; margin-top: 20px } <div class="cookie-notice"> <div class="cn-body"> <h2 id="title">Your Privacy</h2> <p id="id-cookie-notice"><span><span>We use cookies to improve your experience on our site.</span></span> </p> <div class="cn-ok"> <a href="#" class="cm-link cn-learn-more">Decline</a> <div class="cn-buttons"><button type="button" class="cm-btn cm-btn-danger cn-decline">Decline</button><button type="button" class="cm-btn cm-btn-success">Accept</button></div> </div> </div> </div> 您可以在 align-items: flex-start 上添加 .cn-body，这样就可以了。 .cn-body { display: flex; flex-direction: column; font-family: myriad-pro, sans-serif; gap: 0; padding: 0; width: 100%; padding: 40px 113px; boder: 1px solid red; margin: 10px; align-items:flex-start; } .cm-btn-danger { display: none; } .cn-ok { align-items: center; display: flex; flex-direction: row-reverse; gap: 10px; justify-content: end; margin-top: 20px } <div class="cookie-notice"> <div class="cn-body"> <h2 id="title">Your Privacy</h2> <p id="id-cookie-notice"><span><span>We use cookies to improve your experience on our site.</span></span></p> <div class="cn-ok"> <a href="#" class="cm-link cn-learn-more">Manage Preferences</a> <div class="cn-buttons"><button type="button" class="cm-btn cm-btn-danger cn-decline">Decline</button><button type="button" class="cm-btn cm-btn-success">Accept</button></div> </div> </div> </div>

html css flexbox responsive-design responsive

回答 2 投票 0

如何使用boostrap在移动设备中隐藏div？

我想在所有移动设备中隐藏下面的div 我已经尝试过以下建议，但没有任何效果：缺少可见的-** ...

html css twitter-bootstrap responsive-design

回答 3 投票 0

为什么当我展开浏览器时我的网站没有响应

下面我附上了我的 CSS，我的网页是一个音频播放器、一个嵌入式 Twitter 链接和一些视频的混合体。当我在 iPhone 上打开网页时，项目显示居中，但是当我

css flexbox responsive-design

回答 1 投票 0

在屏幕右上角放置一个响应圆圈

我想在右上角画一个圆圈。我很难让它做出响应。我尝试了这段代码，但似乎没有任何效果。此代码导致响应中水平滚动...