CSS / JS / Jquery – 用于响应屏幕尺寸的Flex项目
我的导航中有一个包含3个项目的站点，我希望保留在一行中。
- 第一个是主菜单，它有主站点链接，应位于导航栏的左侧。
- 第二个是联系信息，应该在导航栏中居中。
- 第三个是auth菜单，它有登录/帐户链接等，应该在导航栏的右侧。
#nav{ height:50px; width:100%; position:relative; display:flex; } ul{ display:inline-block; height:50px; line-height:50px; list-style:none; } li{ display:inline-block; } #main_menu{ flex:3; text-align:left; } #header_numbers{ flex:4; text-align:center; } #auth_menu{ flex:3; text-align:right; }
如果屏幕太小，不同的菜单会掉到另一行，但我想要发生的是隐藏中心的一个带有联系信息，只有左右两个菜单，所以一切都保留在一行上。
我不确定是否有办法用CSS实现这一点，除非我做了像@media only screen and (max-width: 500px)这样的查询，但我宁愿将这些查询保持在移动/桌面的最低限度而不是只为一个特定元素提供不同大小的额外查询。
任何帮助或协助将非常感谢。
如果您不想使用媒体查询，您可以使用Javascript / jQuery，但我认为您最好使用媒体查询。
但是，如果您愿意，这是一个jQuery解决方案：
在窗口load上放置一个事件处理程序，并resize事件，检查窗口是否等于或等于500.如果该条件为真，则隐藏#header_numbers元素，如果它显示为false。
$(window).on('load resize', function(){ if($(window).width() <= 500) { $('#header_numbers').hide(); } else { $('#header_numbers').show(); } /* Alternative notation use what you prefer $(window).width() <= 500 ? $('#header_numbers').hide() : $('#header_numbers').show(); */ });
#nav{ height:50px; width:100%; position:relative; display:flex; } ul{ display:inline-block; height:50px; line-height:50px; list-style:none; } li{ display:inline-block; } #main_menu{ flex:3; text-align:left; } #header_numbers{ flex:4; text-align:center; } #auth_menu{ flex:3; text-align:right; }
您必须将display属性设置为none ，否则，如果没有媒体查询，则无法在不同的屏幕大小上隐藏任何内容（在您的情况下为较小的屏幕大小）。
您可以使用 ： –
@media only screen and (max-width: 540px) { #header_numbers{ display: none; } }
您正在描述CSS Media Queries的function，但是说您不想使用它们:)
您总是可以使用JS，但它的性能低于Media查询
const maxWidth = 500; document.addEventListener("DOMContentLoaded", () => { checkWidth(); }); window.addEventListener('resize', () => { checkWidth(); }); function checkWidth() { if(window.innerWidth < maxWidth) { // ...do somthing with the element } }
据我所知，媒体查询只是在css中根据屏幕大小应用样式的方法…
例如#header_numbers将在浏览器窗口宽度为600px或更#header_numbers隐藏：
@media only screen and (max-width: 600px) { #header_numbers{ display: none; } }