responsive-design 相关问题

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

如何在 HTML 和 CSS 中创建包含两行文本的响应式圆圈？

身体{ 显示：柔性；调整内容：居中；对齐项目：居中；间隙：15px； } 。圆圈 { 显示：柔性；弯曲方向：列；对齐项目：居中；调整内容：居中；

html css flexbox responsive-design aspect-ratio

回答 1 投票 0

在网页中的 div 中使用 REM 单位

我有一个页面使用 REM 单位和媒体查询。说inner.php 我将该页面包含到我的其他网页中假设outer.php包含inner.php。这里inner.php使用html字体大小......

css responsive-design

回答 4 投票 0

CSS非标准响应式图片框架

我正在尝试为新闻部分的图片实现一个非标准框架。我的想法是让图片的 z-index 低于框架，并将框架放在其顶部，并使它们响应...

html css responsive-design responsive

回答 1 投票 0

如何将在视图中的一个字段中输入的值以不同的形式显示为Lotus Notes中以不同形式的另一个字段中的下拉选项

如何将在表单视图中的一个字段中输入的值显示为另一字段中不同表单但在 Lotus Notes 中同一数据库中的下拉选项。我尝试创建一个隐藏字段...

responsive-design lotus-notes

回答 1 投票 0

响应高度，全高背景

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

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

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