Html “媒体查询”功能部分不显示全宽

我正在尝试创建此媒体查询，以便当您在移动设备上打开它时，它的3.功能框一个在另一个的顶部处于全宽，但是它不起作用，它们只是保持全宽？你知道怎么解决这个问题吗？代码如下

HTML

媒体查询

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {

  /* Features */
  .feature-box {
    width: 100%;
    display: block; } }

媒体查询中的选择器就是问题所在。 它应该至少具有相同的特异性，因此您需要“部分”

section .feature-box{ width: 33% }

比以下内容更具体：

.feature-box{ width: 100% }

并覆盖它。

来源：

首先，与让所有网站响应并坚持媒体查询一样，viewport meta标记必须放在网页的部分中。基本标准版本如下所示

---

在html的部分中是否有类似的内容？你在实际的移动设备上测试这个？哦，可能使用最大宽度而不是最大设备宽度？是的，在实际移动设备@conordarcy上进行了测试，是的，我在头标签@RobMoll中有这个，请参阅其他注释，因此我将其更改为部分。功能框，但它仍然没有更改。有一个代码笔，我必须更改最大媒体查询值，但您可以将其更改回来。您还应该查看您的图像宽度。如果你想要它，也许它应该是一个相对值，比如百分比。

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {

  /* Features */
  section .feature-box {
    width: 100%;
    display: block; } }

section .feature-box{ width: 33% }

.feature-box{ width: 100% }

<meta name="viewport" content="width=device-width,initial-scale=1">
Once we have this snippet of code in our webpage, if we view the page with different devices, the different media queries will be able to have the correct effect.