响应式布局中媒体查询设置article宽度未生效问题求助

你当前写法的问题出在媒体查询的判定条件不符合需求：

• @media (orientation: portrait) 匹配的是视口高度大于宽度的竖屏状态，不是「移动端设备」的通用判定规则：
  1. 桌面端缩小窗口让高度超过宽度时也会触发该规则，横屏状态的手机/平板反而不会触发
  2. 你遇到的宽度不生效问题，大概率是测试场景没有触发竖屏判定，所以一直走默认的75vw规则
• 额外排查点：如果HTML头部没有加移动端视口适配的meta标签，也会导致移动端视口宽度识别错误，媒体查询不生效。

第一步：添加移动端适配基础配置 #

在HTML文件的<head>标签中加入视口声明，确保浏览器正确识别设备宽度：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

第二步：调整CSS规则 #

建议用屏幕宽度断点替代横竖屏判定（常用移动端分界断点为768px，可根据需求调整），同时可以简化重复属性：

/* 桌面端默认样式，优先生效 */
article{
    background:pink;
    display:flex;
    flex-flow:column wrap;
    padding-bottom: 10%;
    margin: 0 auto;
    align-items: center;
    width: 75vw;  
}

/* 屏幕宽度≤768px时生效，仅覆盖需要修改的属性即可 */
@media (max-width: 768px){
    article{
        background:orange;
        width:100vw;
    }
}

如果确实需要保留横竖屏判定逻辑，只要确认测试场景满足「视口高度>宽度」的条件，原有规则也可以正常生效。

内容的提问来源于stack exchange，提问作者Someone