Html 导航栏宽度'；好像不行

我一直在尝试为移动设备设置导航栏，但导航栏似乎没有根据所提供的@media查询进行相应的操作

以

为中心的内容{
显示器：flex；
证明内容：中心；
对齐项目：居中；
柔性包装：包装；
}
/*结束*/
* {
框大小：边框框；
利润率：0%；
填充：0%；
/*背景色：#1d1b1b*/
}
身体{
背景色：#161A1A；
颜色：白色；
背景重复：空间；
-webkit背景尺寸：封面；
-moz背景尺寸：封面；
-o-背景尺寸：封面；
背景尺寸：封面；
字体系列：-苹果系统，BlinkMacSystemFont，'Segoe UI'，Roboto，Oxygen，Ubuntu，Cantarell，'Open Sans'，'Helvetica Neue'，Sans serif；
}
导航{
宽度：100%；
位置：静态；
显示器：flex；
身高：4rem；
/*边界半径：0px 0px 0px 0px*/
/*盒影：100px 100px 200px rgb（248213 11）*/
滚动填充：1rem0；
}
.导航标志{
字体大小：粗体；
对齐项目：居中；
/*证明内容：中心*/
左：1rem；
显示器：flex；
宽度：50%；
身高：100%；
字体系列：“岩盐”，草书；
/*背景颜色：黄色*/
}
.导航链接{
显示：内联flex；
宽度：50%；
/*背景色：青色*/
/*证明内容：中心*/
身高：100%；
左：3rem；
}
.导航链接{
证明内容：中心；
对齐项目：居中；
显示：内联flex；
列表样式：无；
身高：100%；
宽度：80%；
/*背景颜色：棕褐色*/
}
.nav链接ul li{
宽度：10%；
位置：相对位置；
溢出：隐藏；
显示器：flexbox；
弯曲方向：行；
字体大小：粗体；
身高：100%；
宽度：100%；
/*背景颜色：耐火砖*/
}
.导航链接ul li a{
位置：相对位置；
显示器：flexbox；
弯曲方向：立柱；
/*对正内容：空间均匀*/
对齐项目：居中；
文字装饰：无；
保证金：0.5em4em0；
/*背景色：暗灰色*/
颜色：白色；
}
.导航链接ul li a：：之前{
内容：''；
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
高度：1.2px；
变换：scaleX（0）；
变换原点：左；
转换：转换0.2s缓进输出；
转换延迟：0s；
}
.nav链接ul li a:悬停：：之前{
变换：scaleX（1）；
变换原点：右；
转换：转换0.2s缓进输出；
过渡延迟：0.3s；
}
.导航链接ul li a：悬停{
颜色：#f2aa4cf；
}
.导航链接ul li a跨度{
/*盒影：6vw 2vw三文鱼*/
显示器：flex；
宽度：100%；
身高：100%；
位置：相对位置；
过渡：0.5s；
证明内容：中心；
文本最后对齐：居中；
过渡：0.5s；
弯曲方向：立柱；
}
.nav链接ul li a：悬停跨度：第n个子项（1）{
转换：translateY（-100%）；
}
.nav链接ul li a：悬停跨度：第n个子项（2）{
转换：translateY（-100%）；
动画：辉光.87s缓进缓出无限交替；
}
@-webkit关键帧发光{
从{
文本阴影：0 0 30px#fff，0 0 30px#fff，0 0 30px#e60073，0 0 30px#eb632e，0 0 0 30px#6ff16f，0 0 0 20px#bce600，0 0 0 20px#300ef1；
}
到{
文本阴影：0 0 30px rgb（0，0，0），0 0 30px CA1C，0 0 30px f80505，0 0 30px ff9a02，0 0 30px eafa0f，0 0 0 2 0px eb117e，0 0 0 20px 04ff9f；
}
}
.介绍容器{
显示器：flexbox；
填充：.2%.3%03%；
}
.介绍容器p{
宽度：50%；
字母间距：.5px；
}
/*以下是我的回复CSS：*/
@全部和全部介质（最大宽度：500px）{
导航{
位置：固定；
显示器：flex；
身高：4rem；
背景色：红色；
字体大小：.6rem；
}
.导航标志{
字体大小：粗体；
对齐项目：居中；
/*证明内容：中心*/
左：1rem；
显示器：flex；
宽度：30%；
身高：100%；
字体系列：“岩盐”，草书；
背景颜色：黄色；
左：1rem；
}
.导航链接{
显示：内联flex；
宽度：70%；
背景色：青色；
/*证明内容：中心*/
身高：100%；
左：3rem；
}
}

对开本
编辑










函数
{
var Greeting=“你好！！”

var name=“修订版”

var name_alias=“修订版”

var Profession=“修订版”

}

与

弹性箱一起定义宽度并不是一种很好的做法。问题在于它与flex box管理空间的能力相抗衡

相反，您应该使用
flex-basis
或
flex
（flex-grow、flex-shorn、flex-basis）速记来定义大小

所以在你的情况下使用

.nav-logo {
  font-weight: bold;
  align-items: center;
  padding-left: 1rem;
  display: flex;
  flex-basis: 50%;
  /* height: 100%; don't add a height flex containers already fill height */
  font-family: 'Rock Salt', cursive;
}

.nav-links {
  /* display: inline-flex; -- this has no function as its a flex element */
  width: 50%;
  padding-left: 3rem;
}

/* try to only specify changes in media queries instead of replicating values */
@media all and (max-width:500px) {
  nav {
    position: fixed;
    /* display: flex; -- already defined */
    /* height: 4rem;  -- already defined */
    background-color: red;
    font-size: .6rem;
  }
  .nav-logo {
    /* font-weight: bold;  -- already defined */
    /* align-items: center;  -- already defined */
    /* padding-left: 1rem;  -- already defined */
    /* display: flex;  -- already defined */
    flex-basis: 30%;
    /* font-family: 'Rock Salt', cursive; */
    background-color: yellow;
    /* padding-left: 1rem;  -- already defined in this block and above */
  }
  .nav-links {
    flex-basis: 70%;
    background-color: teal;
  }
}

如果您需要有关flexbox大小调整的更多帮助。
请尝试使用flex basis，而不是使用宽度，分别使用flex basis:30%和flex basis:70%。代码适用于我。我无法用提供的代码重现您描述的错误。