无论我如何尝试，响应式设计的 CSS 都不起作用

Question

我正在 WordPress 网站的主页横幅上响应式设计内容，无论我做什么，CSS 样式都不起作用。我正在尝试为视口尺寸为 414 x 896 的 iPhone 11 设计样式。我使用最大宽度方法，即特定宽度下的任何内容都具有特定的样式。但是，每次我刷新手机屏幕时，它仍然没有更新。下面是我的代码。随附的是手机上的屏幕截图。有人可以帮我吗？

代码：

@media (max-width: 415px) {
  /* Gray Letters */
  rs-layer#slider-9-slide-11-layer-1.rs-pxl-2.rs-layer {font-size:20px !important;
                                                    margin-top: 100px !important;} 
  /* Large Pink Letters */
  rs-layer#slider-9-slide-11-layer-2.rs-pxl-3.rs-layer {color:#e600ac !important;
                                                    font-size:28px !important;
                                                    line-height:50px !important;
                                                    margin-top:120px !important;}
  /* Small White letters */
  rs-layer#slider-9-slide-11-layer-3.rs-pxl-3.rs-layer {color:#FFFFFF !important;
                                                     font-size:16px !important;
                                                     line-height:20px !important;
                                                     margin-top:140px !important;}  
  /* Contact Button */ 
  a.rs-layer, a.rs-layer:-webkit-any-link {margin-top:50px !important;}   
}

站点网址：https://angelsofserenity.com

Answer 1

iPhone 11 的视口宽度为 414px，所以尝试@media（最大宽度：415px）

我还认为你的选择器不匹配：

尝试这个简化的选择器：

@media (max-width: 415px) {
  #slider-9-slide-11-layer-1.rs-layer {
    font-size: 20px !important;
    margin-top: 100px !important;
  }
}

还要检查您是否使用了正确的 css 文件