Question

我的行内有一个h1标题，其左侧和右侧有令人敬畏的标记引号。我希望在屏幕低于768px时调整大小。所以我有：

＆＃13;

@media screen and (max-width: 768px) {
  h1 {
    font-size: 10pt;
    }
  }

.header,
h1 {
  font-weight: 400;
  text-align: center;
  font-size: 20pt;
  }
.fa-quote-left {
  position: relative;
  left: -20px;
  top: 15px;
  }
fa-quote-right {
  position: relative;
  left: -90px;
  top: 15px;
  }

＆＃13;

 <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>

    <header class="container">
      <div class="row">
        <h1> <span class="fa fa-quote-left fa-flip-vertical"></span> This is an h1 and i want it to be resized, but it won't.agagagkeifjiejfiefjeifjeifjeifje <span class="fa fa-quote-right> <h1>
          </div>
          </header>

＆＃13;

但是在我的浏览器中，即使在媒体查询后它也不会调整大小。

Answer 1

您必须在默认选项后定义媒体查询。无论屏幕大小如何，现在你的方式都会被媒体查询覆盖。

Answer 2

请尝试使用em。

，而不是将pt用于font-size

在Bootstrap中将h1调整为768px以下

2 个答案: