responsive 相关问题

当我点击汉堡时，导航栏菜单不显示

我的代码有问题。我想制作一个响应式导航栏，但是，虽然当我点击汉堡时它变成“X”，但菜单没有显示。我真的不明白，...

如何让div覆盖整个屏幕

我有一个问题。 到目前为止我得到了这个： 我基本上希望突出显示的 div 覆盖您的设备屏幕，无论设备屏幕有多大。现在，当我在我的...上打开它时，我看到 2 个不同的 div

如何让<div>始终全屏？

不管它的内容是什么样的。 可以这样做吗？

浏览器宽度缩小时字体变得太大

我在响应文本大小方面遇到了困难： 标题 我的字体大小：2.4rem。字体大小非常适合...

手机屏幕导航栏隐藏内容

我正在开发一个实现 100vh 登陆屏幕的网站，但底部导航栏（带有主页、后退选项的手机导航）隐藏了内容的底部。我已经在使用 JavaScript ...

全屏 HTML 中的 div

<...

更改方向导致 requestAnimationFrame 滚动“闪烁”？

我正在处理由第三方软件生成的网站，我无法真正更改或删除生成的任何 JavaScript。我遇到这个问题，每次用户单击 o...

我在移动设备上的 CLS 很高，因为图像不会停止加载

这是我面临问题的页面，这里是移动版 Google Pagespeed 报告的链接。我尝试过停止延迟加载，也尝试过预加载图像，但总是有延迟

声明“const”在 JavaScript 中不起作用

当我尝试编写 JavaScript 程序来创建响应式导航菜单时，我收到了我无法理解的错误消息。 当我在括号中编写代码时，出现错误“预期

警告：未定义的数组键“margin_widescreen”

我在 wordpress 中使用 elementor 并面临以下错误： 警告：C:\xampp\htdocs\innstylesalon\wp-content\plugins 中未定义的数组键“margin_widescreen”

显示两个相互依赖的“反应网格布局”

我想要两个反应网格布局。一个位于左侧，项目的大小没有改变。我可以将它们拖放到右侧，然后更改它们的大小或位置。拖动的项目

Bootstrap 5 导航栏切换按钮没有响应

我无法让 Bootstrap 5 导航栏中的切换按钮正常工作。该按钮出现，但单击它不会在较小的屏幕上显示导航链接。我已经关注了

如何使两个联系人字段响应

我需要将两个字段（“致电我们”和“我们的电子邮件”）居中，并使它们同时响应。他们应该在小屏幕上将一个堆叠在另一个之上。我有内联 CSS...

如何使内容在较小的屏幕上具有 100% 宽度？

我真的需要有人帮我解决这个问题：我正在使用 Flexbox 构建响应式网页，但是当我调整到较小的屏幕尺寸时，所有内容都会失去全宽，并且出现“whitespa...”

将响应式导航栏中的链接与下拉菜单对齐，使其与网站内容对齐

我使用了在 w3schools.com 上找到的代码，并根据自己的喜好对其进行了样式设置，以创建我的网站顶部导航菜单： /* 在顶部添加背景颜色 </desc> <question vote="0"> <p>我使用了在 <a href="https://www.w3schools.com/howto/howto_js_responsive_navbar_dropdown.asp" rel="nofollow noreferrer">w3schools.com</a> 找到的代码，并根据自己的喜好对其进行了样式设置，以创建我的网站顶部导航菜单：</p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code>&lt;!DOCTYPE html&gt; &lt;style&gt; /* Add a background color to the top navigation */ .topnav { background-color: #0066ff; overflow: hidden; } /* Style the links inside the navigation bar */ .topnav a { float: left; display: block; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 17px; transition-duration: 0.4s; } /* Add an active class to highlight the current page */ .active { background-color: #4d94ff; color: white; } /* Hide the link that should open and close the topnav on small screens */ .topnav .icon { display: none; } /* Dropdown container - needed to position the dropdown content */ .dropdown { float: left; overflow: hidden; } /* Style the dropdown button to fit inside the topnav */ .dropdown .dropbtn { font-size: 17px; border: none; outline: none; color: white; padding: 14px 16px; background-color: inherit; font-family: inherit; margin: 0; transition-duration: 0.4s; } /* Style the dropdown content (hidden by default) */ .dropdown-content { display: none; position: absolute; background-color: #b3d1ff; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } /* Style the links inside the dropdown */ .dropdown-content a { float: none; color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left; } /* Add a background on topnav links and the dropdown button on hover */ .topnav a:hover, .dropdown:hover .dropbtn { background-color: #99c2ff; color: white; } /* Add a background to dropdown links on hover */ .dropdown-content a:hover { background-color: #cce0ff; color: black; } /* Show the dropdown menu when the user moves the mouse over the dropdown button */ .dropdown:hover .dropdown-content { display: block; } /* */ .content { width: 1000px; margin: 0 auto; } .content h2 { margin: 0; padding: 25px 0; font-size: 20px; border-bottom: 1px solid #e0e0e3; color: #4a536e; } .content .block { box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1); margin: 25px 0; padding: 25px; background-color: #fff; } .content .block p { padding: 5px; margin: 0 0 10px 0; } /* When the screen is less than 1000 pixels wide, hide all links, except for the first one (&#34;Home&#34;). Show the link that contains should open and close the topnav (.icon) */ @media screen and (max-width: 1000px) { .topnav a:not(:first-child), .dropdown .dropbtn { display: none; } .topnav a.icon { float: right; display: block; } } /* The &#34;responsive&#34; class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */ @media screen and (max-width: 1000px) { .topnav.responsive {position: relative;} .topnav.responsive a.icon { position: absolute; right: 0; top: 0; } .topnav.responsive a { float: none; display: block; text-align: left; } .topnav.responsive .dropdown {float: none;} .topnav.responsive .dropdown-content {position: relative;} .topnav.responsive .dropdown .dropbtn { display: block; width: 100%; text-align: left; } @media screen and (max-width: 1000px) { .content { padding: 5px 10px; width: 100%; } } &lt;/style&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset=&#34;utf-8&#34;&gt; &lt;meta name=&#34;viewport&#34; content=&#34;width=device-width,minimum-scale=1&#34;&gt; &lt;title&gt;Home Page&lt;/title&gt; &lt;link rel=&#34;stylesheet&#34; href=&#34;https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css&#34; integrity=&#34;sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A==&#34; crossorigin=&#34;anonymous&#34; referrerpolicy=&#34;no-referrer&#34;&gt; &lt;/head&gt; &lt;body&gt; &lt;div class=&#34;topnav&#34; id=&#34;myTopnav&#34;&gt; &lt;a href=&#34;../&#34; class=&#34;active&#34; title=&#34;Homepage&#34;&gt;&lt;i class=&#34;fas fa-home&#34;&gt;&lt;/i&gt; Home&lt;/a&gt; &lt;a href=&#34;/members/home.php&#34; title=&#34;Member&#39;s Homepage&#34;&gt;&lt;i class=&#34;fa-solid fa-door-open&#34;&gt;&lt;/i&gt; Member&#39;s Homepage&lt;/a&gt; &lt;div class=&#34;dropdown&#34;&gt; &lt;button class=&#34;dropbtn&#34; title=&#34;Sections&#34;&gt;&lt;i class=&#34;fa-solid fa-link&#34;&gt;&lt;/i&gt; Sections &lt;i class=&#34;fa fa-caret-down&#34;&gt;&lt;/i&gt; &lt;/button&gt; &lt;div class=&#34;dropdown-content&#34;&gt; &lt;a href=&#34;/members/music/&#34; title=&#34;Enjoy Our Music Section&#34;&gt;&lt;i class=&#34;fa-solid fa-music&#34;&gt;&lt;/i&gt; Music Section&lt;/a&gt; &lt;a href=&#34;/members/polls/&#34; title=&#34;Vote in A Poll&#34;&gt;&lt;i class=&#34;fa-solid fa-square-poll-horizontal&#34;&gt;&lt;/i&gt; Polls Section&lt;/a&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class=&#34;dropdown&#34;&gt; &lt;button class=&#34;dropbtn&#34; title=&#34;Help&#34;&gt;&lt;i class=&#34;fa-regular fa-circle-question&#34;&gt;&lt;/i&gt; Help &lt;i class=&#34;fa fa-caret-down&#34;&gt;&lt;/i&gt; &lt;/button&gt; &lt;div class=&#34;dropdown-content&#34;&gt; &lt;a href=&#34;/members/tickets/&#34; title=&#34;Create a Ticket For An Issue&#34;&gt;&lt;i class=&#34;fas fa-ticket&#34;&gt;&lt;/i&gt; Ticket System&lt;/a&gt; &lt;a href=&#34;contact/&#34; title=&#34;Send A Message to Site Administration&#34;&gt;&lt;i class=&#34;fas fa-envelope&#34;&gt;&lt;/i&gt; Contact Form&lt;/a&gt; &lt;/div&gt; &lt;/div&gt; &lt;a href=&#34;profile.php&#34; title=&#34;Profile Page&#34;&gt;&lt;i class=&#34;fas fa-user-circle&#34;&gt;&lt;/i&gt; Profile&lt;/a&gt; &lt;a href=&#34;logout.php&#34; title=&#34;Bye Bye&#34;&gt;&lt;i class=&#34;fas fa-sign-out-alt&#34;&gt;&lt;/i&gt; Logout&lt;/a&gt; &lt;a href=&#34;javascript:void(0);&#34; class=&#34;icon&#34; onclick=&#34;myFunction()&#34;&gt;&amp;#9776;&lt;/a&gt; &lt;/div&gt; &lt;script&gt; function myFunction() { var x = document.getElementById(&#34;myTopnav&#34;); if (x.className === &#34;topnav&#34;) { x.className += &#34; responsive&#34;; } else { x.className = &#34;topnav&#34;; } } &lt;/script&gt; &lt;div class=&#34;content&#34;&gt; &lt;h2&gt;Member&#39;s Page&lt;/h2&gt; &lt;h2&gt;WELCOME TO THE MEMBERS ONLY SECTION!&lt;/h2&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> </div> </div> <p></p> <p>但是我不知道如何将导航菜单中的链接与网站内容对齐。导航菜单中的链接始终位于屏幕边缘（左侧）。我希望将左侧的链接与网站内容中文本的左侧对齐（但不要超过网站内容的最右侧部分）。我还想将网站的标题放在导航菜单中，位于链接之前的左侧，但使其与网站的其他内容保持一致。</p> <p>这个样式问题有简单的解决办法吗？</p> <p>感谢任何可以提供帮助的人。</p> </question> <answer tick="false" vote="0"> <p>具有“content”类的 div 的固定宽度为 1000px，只需在 css 中将其删除即可！</p> <pre><code>.content { /*removed the width of 1000px */ margin: 0 auto; /* added padding for making it better */ padding: 10px 20px; } </code></pre> </answer> </body></html>

如何使用 slick 创建响应式网站横幅

我使用 HTML、CSS 和 slick 创建网站横幅。在桌面上它看起来不错，但在移动设备上它看起来很小，当我尝试增加图像的高度时，图像被拉伸并且......

idangero Swiper 响应断点不起作用

嗨，我在我正在做的网站上使用 iDangero Swiper，但由于某种原因，我无法让响应断点工作。下面是我正在使用的js。 var swiper = new Swiper('.s1', { SlidesPerView：...

使可滚动主体适合视口

如何将可滚动主体放入视口中？ 该表中有行的页眉和页脚。它们的高度取决于内部组件。但我希望身体能够适应...

如何居中显示网格

我在处理显示：网格时遇到问题。我为这个网站制作了一个响应式网格，将最大分辨率限制为只有 3 列，但是，当少于 3 列时，元素将...

没有固定宽度的Widget可以约束Text widget吗？

容器（ 孩子：行（ 孩子们：[ Container( //左侧图标 身高：50， 小部件：50， 颜色: 颜色.绿色, 孩子：图标... ), ...