如何使用 rem 单位创建 Bootstrap 3 响应式文本答案

【问题标题】：How to create Bootstrap 3 responsive text using rem units如何使用 rem 单位创建 Bootstrap 3 响应式文本
【发布时间】：2015-03-15 20:40:09
【问题描述】：

我正在尝试使用 Twitter-Bootstrap 3 创建一个基于 rem 的网站。特别是我的文本没有响应。它只是换行而不改变字体大小或行高。我向@media 语句添加了颜色更改，以直观地跟踪断点。我也没有看到任何颜色变化，因此自定义 @media 代码也不起作用。根据我的研究，它应该可以工作。显然，我错过了一些东西。请查看https://jsfiddle.net/dlearman/995w62e0/4/ 并引导我朝着正确的方向前进。

html {
  font-family: 'NimbusSanNov-Reg', "HelveticaNeueLight", "HelveticaNeue-Light", "Helvetica Neue Light", "HelveticaNeue", "Helvetica Neue", sans-serif;
  font-size: 15px;
  /* set default 1rem = 15px  */
  color: #302C25;
  line-height: 1.618;
  -webkit-text-size-adjust: 100%;
  /* why is this needed? */
  -ms-text-size-adjust: 100%;
}
body {
  background-color: #FFF;
}
#page {
  position: relative;
  top: 5.33rem;
  left: 7.4rem;
  padding-bottom: 7.667rem;
}
.container-full-width {
  position: relative;
  padding-left: 0;
  padding-right: 0;
  margin-left: 0;
  margin-right: 0;
}
.row-centered {
  text-align: center;
}
#testBox {
  position: relative;
  display: inline-block;
  margin-top: 0;
  margin-left: 60rem;
  width: 10rem;
  height: auto;
}
.bigText {
  font-family: 'NimbusSanNov-Reg''HelveticaNeueLight', 'HelveticaNeue-Light', 'Helvetica Neue Light', 'HelveticaNeue', sans-serif;
  font-size: 1rem;
  margin: 0 0 1.667rem 0;
  letter-spacing: .0667rem;
}
.bigTextItalic {
  font-family: 'NimbusSanNov-RegIta', 'HelveticaNeueLightItalic', 'HelveticaNeue-LightItalic', 'Helvetica Neue LightItalic', 'HelveticaNeueItalic', sans-serif;
  font-size: 1rem;
  letter-spacing: .0667rem;
  margin: 0 0 1.667rem 0;
}

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" />
<div id="page" class="container-fluid container-fluid-full-width">
  <div id="homeBrandCopy" class="container-fluid container-full-width">
    <div class="container">
      <div class="row row-centered">
        <div class="col-md-2">
        </div>
        <div class="col-md-8">
          <div class="testBox center-block">
            <p class="text-center bigText">Every writer is cursed or blessed with a unique creative metabolism: the distinctive speed and efficiency with which he or she converts the raw fuel of life into the mystical,<span class='bigTextItalic'> dancing blue smoke of art. </span>
            </p>
          </div>
        </div>
        <div class="col-md-2">
        </div>
      </div>
    </div>
  </div>
</div>

【问题讨论】：

标签： css twitter-bootstrap

【解决方案1】：

请确保 @ 和 media 之间没有空格，因为 CSS 将 @media 视为媒体查询。

CSS：

@media only screen and (max-width 1200px) {
  html {
     font-size: 1.333rem;
    line-height:2.157;
    color:#000FFF;
  }
}

@media only screen and (max-width 992px) {
  html {
    font-size: 1rem;
    line-height:1.618;
    color:#FF0000
  }
}

@media only screen and (max-width 768px) {
  html {
    font-size: .933;
    line-height:1.510;
    color:#00FF00;
  }
}

@media only screen and (max-width 480px) {
  html {
    font-size: 1.067;
    line-height:1.726;
    color:0000FF;
  }
}

@media only screen and (max-width 320px) {
  html {
  font-size: 1.333;
    line-height:2.157;
    color:#FF00FF;
  }
}

参考：http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

【讨论】：