Django定价页@media的min-width、max-width规则不生效适配问题求助

问题描述 #

我正在Django应用中开发定价页面，该页面包含3列定价方案卡片，需求为：屏幕宽度大于768px时3列并排展示，小于768px时切换为单列布局，不同定价方案纵向堆叠。

但目前页面的@media规则未被正常触发，无论屏幕尺寸如何始终显示3列，移动端本应显示单列布局，实际仍为多列挤压显示。
当前页面移动端显示效果：

JS Fiddle测试示例： 相同代码在JSFiddle环境下可正常响应@media screen and (max-width)规则，仅在本地Django页面失效。

问题代码 #

<html>
<head>
<style>
@import url(https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css);
@import url(https://fonts.googleapis.com/css?family=Raleway:400,500,800);
@import url(https://fonts.googleapis.com/css?family=Montserrat:800);

/* 移动端自定义样式 */
@media screen and (max-width: 767px) {
  .snip1214 .plan {
    width: 90%;
    margin: 0 auto;
    background-color: blue;
  }
}

@media screen and (min-width: 768px) {
  .snip1214 .plan {
    margin: 0;
    width: 25%;
    position: relative;
    float: left;
    background-color: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.1);
  }
}

html {
  height: 100%;
}

body {
  background-color: #212121;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: wrap;
  margin: 0;
  height: 100%;
}
.snip1214 {
  font-family: 'Raleway', Arial, sans-serif;
  color: #000000;
  text-align: center;
  font-size: 16px;
  width: 100%;
  max-width: 1000px;
  margin: 40px 10px;
}

.snip1214 * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.snip1214 header {
  position: relative;
}

.snip1214 .plan-title {
  position: relative;
  top: 0;
  font-weight: 800;
  padding: 5px 15px;
  margin: 0 auto;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  margin: 0;
  display: inline-block;
  background-color: #222f3d;
  color: #ffffff;
  text-transform: uppercase;
}
.snip1214 .plan-cost {
  padding: 0px 10px 20px;
}
.snip1214 .plan-price {
  font-family: 'Montserrat', Arial, sans-serif;
  font-weight: 800;
  font-size: 2.4em;
  color: #34495e;
}
.snip1214 .plan-type {
  opacity: 0.6;
}
.snip1214 .plan-features {
  padding: 0;
  margin: 0;
  text-align: center;
  list-style: outside none none;
  font-size: 0.8em;
}
.snip1214 .plan-features li {
  border-top: 1px solid #d2d7e2;
  padding: 10px 5%;
}
.snip1214 .plan-features li:nth-child(even) {
  background: rgba(0, 0, 0, 0.08);
}
.snip1214 .plan-features i {
  margin-right: 8px;
  opacity: 0.4;
}
.snip1214 .plan-select {
  border-top: 1px solid #d2d7e2;
  padding: 10px 10px 0;
}
.snip1214 .plan-select a {
  background-color: #222f3d;
  color: #ffffff;
  text-decoration: none;
  padding: 0.5em 1em;
  -webkit-transform: translateY(50%);
  transform: translateY(50%);
  font-weight: 800;
  text-transform: uppercase;
  display: inline-block;
}
.snip1214 .plan-select a:hover {
  background-color: #46627f;
}
.snip1214 .featured {
  margin-top: -10px;
  background-color: #34495e;
  color: #ffffff;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
  z-index: 1;
}
.snip1214 .featured .plan-title,
.snip1214 .featured .plan-price {
  color: #ffffff;
}
.snip1214 .featured .plan-cost {
  padding: 10px 10px 20px;
}
.snip1214 .featured .plan-features li {
  border-top: 1px solid rgba(255, 255, 255, 0.4);
}
.snip1214 .featured .plan-select {
  padding: 20px 10px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.4);
}

</style>

</head>


<body>
<div class="snip1214">


  <div class="plan">
    <h3 class="plan-title">
      免费版
    </h3>
    <div class="plan-cost"><span class="plan-price">$0</span></div>
    <ul class="plan-features">
      <li><i class="ion-checkmark"> </i>5GB Linux网页空间</li>
      <li><i class="ion-checkmark"> </i>5个MySQL数据库</li>
      <li><i class="ion-checkmark"> </i>不限邮箱数量</li>
      <li><i class="ion-checkmark"> </i>每月250GB流量</li>
      <li><i class="ion-checkmark"> </i>24/7技术支持</li>
      <li><i class="ion-checkmark"> </i>每日备份</li>
    </ul>
    <div class="plan-select"><a href="">选择方案</a></div>
  </div>


  <div class="plan featured">
    <h3 class="plan-title">
      标准版
    </h3>
    <div class="plan-cost"><span class="plan-price">$3.99</span><span class="plan-type">/ 月</span></div>
    <ul class="plan-features">
      <li><i class="ion-checkmark"> </i>25GB Linux网页空间</li>
      <li><i class="ion-checkmark"> </i>25个MySQL数据库</li>
      <li><i class="ion-checkmark"> </i>不限邮箱数量</li>
      <li><i class="ion-checkmark"> </i>每月2000GB流量</li>
      <li><i class="ion-checkmark"> </i>24/7技术支持</li>
      <li><i class="ion-checkmark"> </i>每日备份</li>
    </ul>
    <div class="plan-select"><a href="">选择方案</a></div>
  </div>


  <div class="plan">
    <h3 class="plan-title">
      高级版
    </h3>
    <div class="plan-cost"><span class="plan-price">$6.99</span><span class="plan-type">/ 月</span></div>
    <ul class="plan-features">
      <li><i class="ion-checkmark"> </i>100GB Linux网页空间</li>
      <li><i class="ion-checkmark"> </i>不限MySQL数据库</li>
      <li><i class="ion-checkmark"> </i>不限邮箱数量</li>
      <li><i class="ion-checkmark"> </i>每月10000GB流量</li>
      <li><i class="ion-checkmark"> </i>24/7技术支持</li>
      <li><i class="ion-checkmark"> </i>每日备份</li>
    </ul>
    <div class="plan-select"><a href="">选择方案</a></div>
  </div>


</div>

</body>
</html>

修复方案 #

失效原因 #

1. 缺少移动端响应式必备的viewport元标签：移动端浏览器默认会按虚拟视口宽度（通常为980px）渲染页面，导致max-width: 767px的媒体查询永远无法触发，而JSFiddle默认会自动注入该标签，所以才会出现两边表现不一致的问题。
2. 移动端样式没有覆盖桌面端的浮动规则：桌面端给.plan设置了float: left，移动端未清除该属性，可能引发额外布局异常。

修复步骤 #

1. 在HTML的<head>标签内添加viewport元标签，如果你用了Django模板继承，直接加到基础母模板的head区域即可全局生效：

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

2. 调整移动端媒体查询的样式，补充清除浮动、增加底部间距的规则：

@media screen and (max-width: 767px) {
  .snip1214 .plan {
    width: 90%;
    margin: 0 auto 40px auto; /* 底部加间距避免卡片堆叠时挨在一起 */
    background-color: #ffffff; /* 可删除之前的测试蓝色 */
    float: none; /* 清除桌面端设置的浮动 */
    border: 1px solid rgba(0, 0, 0, 0.1); /* 继承桌面端的边框样式 */
  }
}

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