responsive 相关问题

响应是用于指示通用响应式网站或Web应用程序编程或设计主题的标记。这是一个比'响应式设计'更通用的标签，它适用于你专门编写编程的情况（通常是html / css / js）。 “响应式”这个词本身就是指Web应用程序/网站在各种设备和屏幕尺寸上响应和调整其维度和交互性的能力。

ho制作响应式iframe，还有里面的视频

[当屏幕变宽时][1][全屏][2][这是图片][3]我想制作一个响应式 iframe，它可以工作，但视频的宽度不符合框架，它使有一个滚动条...

html css reactjs iframe responsive

回答 1 投票 0

如何强制 body div 到页面底部

在平板电脑和手机设备中，我正在努力将我身体的页脚强制到页面底部以位于页脚上方。我试过将底部设置为 0 无济于事。这是当前的显示...

javascript css reactjs responsive-design responsive

回答 1 投票 0

如何反转 CSS 网格列的顺序？

我希望能够颠倒列的顺序（两个小的在左边，大的在右边）。我尝试了几种解决方案，但没有找到一种可行的方法。这是代码： ....

html css responsive css-grid

回答 4 投票 0

为什么亚马逊、Zomato、Swiggy 等大品牌不使用 meta name="viewport" 标签？

当我打开开发者工具时，我去了 Amazon、Zomato 和 Swiggy 等网站，我发现他们没有使用当我打开开发者工具时，我去了 Amazon、Zomato 和 Swiggy 等网站，我意识到他们没有使用<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">。如果我在桌面模式下加载他们的网站，然后使用开发工具减小屏幕宽度，布局不会改变（因为未添加视口标签）。我发现他们的布局类型是基于屏幕的初始加载宽度。他们是如何实现这一目标的？建议在 React 中执行此操作的任何正确方法（行业标准），这样做有什么好处？提前致谢。试图自己找到它，但没有一篇关于这个的文章。 Google 在 google.com 中也这样做。他们使用设备的用户代理字符串并为不同的网站提供服务取决于它的价值。您可以使用浏览器开发工具自行测试。首先使用 Ctrl + Shift + I 或 F12, 打开 devtools 然后单击 3 个点 -> 更多工具 -> 网络条件。现在您将看到选项卡Network conditions. 您现在可以使用您的自定义用户代理字符串或选择其中提供的一个。如果您选择移动用户代理然后重新加载，该网站将更改为移动版本。我检查了一下，发现了一些东西。如果它在手机上或屏幕尺寸像手机，就会出现元标记。所以这样做调整页面大小然后刷新页面然后检查元元素。有些网站不使用 meta name="viewport" 标签的原因可能有多种，例如：该网站可能专为桌面用户设计，可能未针对移动设备进行优化。该网站可能是在移动设备和响应式网页设计广泛采用之前开发的。网站可能会使用不同的方法来处理网页在移动设备上的显示，例如自适应设计或单独的移动站点。然而，亚马逊、Zomato 和 Swiggy 等一些大品牌没有在其网站中使用它的事实并不一定意味着它不重要或不应该使用。值得注意的是，缺少 meta name="viewport" 标签可能会导致网页在移动设备上的显示出现问题，例如内容不适合屏幕，文本太小或太大，以及用户放大或缩小阅读内容的需要。（如你所见）

javascript html css reactjs responsive

回答 3 投票 0

全日历标题按钮没有响应？

我在我的项目上配置了 Fullcalendar，但我注意到在移动设备上，标题按钮的布局存在问题，一点也不美观 PC 上的全日历：全日历...

button mobile header fullcalendar responsive

回答 3 投票 0

React 初学者。我的 NavBar 给出错误“Uncaught TypeError: Cannot read properties of null (reading 'addEventListener') i can't seem to tell why.”

我尝试创建和使用动画汉堡菜单图标，而不是为我的 Navbar 组件制作的图标 `const menu = document.querySelector('.menu_button'); const showMenu = 文档。

reactjs react-navigation responsive hamburger-menu

回答 2 投票 0

当我调整窗口大小时或在移动设备上，响应式导航栏不显示菜单

我正在尝试建立我的第一个网站，一个星期以来我一直被这个问题所困扰。当我调整窗口大小时或当我在暴民上使用该网站时，我想创建一个带有汉堡菜单的响应式导航栏...

html css navbar responsive hamburger-menu

回答 1 投票 0

我在手机上的网站看起来一直处于桌面模式

此刻我的网站有一个非常重要的问题，它在 PC 上是完美的，但是当我从手机上看到它时，它的右侧有很多空间，就好像我把它放在里面一样桌面

html wordpress web responsive-design responsive

回答 0 投票 0

滚动网页时如何调整带有logo的导航栏

我在网站上有以下响应式导航栏导航栏我在网站上有以下响应式导航栏导航栏 <header class="header"> <a href="#" class="logo"> <img src="/images/logo.png" alt="Adventure"> </a> <p class="logo"> tour with Adventure </p> <nav class="navbar"> <div id="nav-close" class="fas fa-times"></div> <a href="#home">home</a> <a href="#about">about</a> <a href="#shop">shop</a> <a href="#packages">packages</a> <a href="#reviews">reviews</a> <a href="#contact">contact</a> <a href="#video">video</a> </nav> 我的导航栏和徽标类的 css 如下 @media (max-width: 768px) { .header #menu-btn { display: inline-block; } .header .navbar { position: fixed; top: 0; left: -110%; background: #fff; z-index: 10000; width: 35rem; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-flow: column; flex-flow: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } 现在我需要在向下滚动网页时稍微调整（最小化）导航栏。我怎么能这样做？ // When the user scrolls down 80px from the top of the document, resize the navbar's padding and the logo's font size window.onscroll = function() {scrollFunction()}; function scrollFunction() { if (document.body.scrollTop > 80 || document.documentElement.scrollTop > 80) { document.getElementById("navbar").style.padding = "30px 10px"; document.getElementById("logo").style.fontSize = "25px"; } else { document.getElementById("navbar").style.padding = "40px 10px"; document.getElementById("logo").style.fontSize = "35px"; } } function myFunction() { var x = document.getElementById("navbar-right"); if (x.style.display === "block") { x.style.display = "none"; } else { x.style.display = "block"; } } * {box-sizing: border-box;} body { margin: 0; font-family: Arial, Helvetica, sans-serif; } #navbar { overflow: hidden; background-color: #f1f1f1; padding: 40px 10px; transition: 0.4s; position: fixed; width: 100%; top: 0; z-index: 99; } #navbar a { float: left; color: black; text-align: center; padding: 12px; text-decoration: none; font-size: 18px; line-height: 25px; border-radius: 4px; } #navbar #logo { font-size: 35px; font-weight: bold; transition: 0.4s; } #navbar a:hover { background-color: #ddd; color: black; } #navbar a.active { background-color: dodgerblue; color: white; } #navbar-right { float: right; } .nav-toggle { display: none; } @media screen and (max-width: 580px) { #navbar { padding: 20px 10px !important; } #navbar a { float: none; display: block; text-align: left; } #navbar-right { float: none; } .nav-toggle { display: block; position: absolute; top: 10px; right: 10px; padding: 10px; background-color: #ddd; border: none; border-radius: 4px; cursor: pointer; } .nav-toggle:hover { background-color: #bbb; } #navbar-right { display: none; position: sticky; top: 70px; left: 0; right: 0; background-color: #f1f1f1; padding: 10px; } #navbar-right a { display: block; margin-bottom: 10px; } #navbar.show-nav #navbar-right { display: block; } } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> </head> <body> <div id="navbar"> <a href="#" id="logo"> <img src="/images/logo.png" alt="Adventure"> </a>  <div id="navbar-right"> <a href="#home">home</a> <a href="#about">about</a> <a href="#shop">shop</a> <a href="#packages">packages</a> <a href="#reviews">reviews</a> <a href="#contact">contact</a> <a href="#video">video</a> </div> <a href="javascript:void(0);" class="nav-toggle" onclick="myFunction()"> <i class="fa fa-bars"></i> </a> </div> <div style="margin-top:210px;padding:15px 15px 2500px;font-size:30px"> <p><b>This example demonstrates how to shrink a navigation bar when the user starts to scroll the page.</b></p> <p>Scroll down this frame to see the effect!</p> <p>Scroll to the top to remove the effect.</p> <p><b>Note:</b> We have also made the navbar responsive, resize the browser window to see the effect.</p> <p>Lorem ipsum dolor dummy text to enable scrolling, sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> </body> </html> 这是包含 toggleNav() 函数的代码的更新版本试试这个代码

html css responsive

回答 1 投票 0

如何在容器内有不同项目的父容器中为子容器设置相同的高度？

我正在尝试使父容器中的子容器具有相同的高度，尽管元素不同。目标是能够在没有 js 的情况下拥有一个没有固定

flexbox height responsive children

回答 0 投票 0

在 firefox 响应式设计模式下启用触摸时出现不需要的空格

以下代码片段在我的浏览器中正常工作，直到我在 Firefox 上打开响应式设计模式，它在页面底部放置了一个空白区域：如果我发现，“错误”就会消失...

html css firefox responsive-design responsive

回答 1 投票 0

汉堡图标点击不显示菜单

我正在尝试建立我的第一个网站，我已经被这个问题困扰了两天。我想在调整窗口大小时或在