时间戳

首页 > 解决方案 > 为什么我的响应式 CSS 在此代码中不起作用？

html - 为什么我的响应式 CSS 在此代码中不起作用？

问题描述

我有以下 HTML 代码：

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>

    <body style="background-image:url('images/background-website-web-blue.jpg');background-size: 100% 100%;background-attachment:fixed;">
    <div class="content1" style="background-color: rgb(52,129,162,0.8); box-shadow: 10px 10px 10px rgba(0,0,0,0.8);" >
        <div class="container" style="text-align:center;">
            <div class="jumbotron" style="background-color: transparent;"></div>
                <p style="color: white ; font-family: 'Roboto Slab',Helvetica, sans-serif; font-size: 40px; font-weight: 700;" >dockdockdock</p>
                <p style="color: white ; font-family: 'Roboto Slab',Helvetica, sans-serif; font-size: 25px; font-weight: 400; font-style: italic;">dockdcokdock</p> 
                <p style="color: white ; font-family: 'Roboto Slab',Helvetica, sans-serif; font-size: 40px; font-weight: 400; line-height: 52px;" >DUck duck duck duck <i style="color: red; font-weight: 700;">60 Hari</i> Bergabung Di Ecourse Ini</p>
                <br><br><br>
            </div>
        </div>
    </div>
  </body>
</html>

和 CSS：

@media only screen and (max-width: 600px) {
  p{
    font-size:5px;
  }
}

但是为什么<p>当媒体为 600px 或更小时标签不会变成 5px 的大小呢？

如果我把<p>标签放在上面，<div>它就可以工作

标签： htmlcssresponsive-design

解决方案

因为内联样式的特殊性比CSS 高很多

如果您希望您的 css for mobile 可以使用给定的 HTML，您需要添加!important类似

@media only screen and (max-width: 600px) {
  p {
    font-size: 5px !important;
  }
}

然后它将起作用。

但老实说，我们永远不应该使用!important. 在这种情况下，这很容易实现，只需将所有内联样式从 HTML 移动到 CSS 文件的顶部

https://jsfiddle.net/nvzupxb0/的工作示例!important

仅使用 CSS 的工作示例https://jsfiddle.net/nvzupxb0/2/

仅 CSS 解决方案的注意事项

  1. 必须在标签上添加一些类，<p>因为您的标记不允许我使用:nth-child()伪选择器
  2. 从最后一个（.third）p 标签中删除了<br>标签，因为可以使用 CSS padding-bottom 实现线刹车。提供通过 CSS 为移动设备更改填充高度的优势！

推荐阅读