レスポンシブな単位

  <div class="box content">
    <div class="inner">
      <h1>各端末で改行位置を揃える</h1>
      <h2>スマホ時に文字サイズを「px」指定</h2>
      <div class="test1">
        <p>わたしたちは、氷砂糖をほしいくらゐもたないでも、きれいにすきとほつた風をたべ、桃いろのうつくしい朝の日光をのむことができます。
          またわたくしは、はたけや森の中で、ひどいぼろぼろのきものが、いちばんすばらしいびろうどや羅紗らしやや、宝石いりのきものに、かはつてゐるのをたびたび見ました。
          わたくしは、さういふきれいなたべものやきものをすきです。</p>
      </div>
      <h2>スマホ時に文字サイズを「vw」指定</h2>
      <p>左右余白等もvwで指定しないと微妙に改行位置が変わるので注意</p>
      <div class="test2">
        <p>わたしたちは、氷砂糖をほしいくらゐもたないでも、きれいにすきとほつた風をたべ、桃いろのうつくしい朝の日光をのむことができます。
          またわたくしは、はたけや森の中で、ひどいぼろぼろのきものが、いちばんすばらしいびろうどや羅紗らしやや、宝石いりのきものに、かはつてゐるのをたびたび見ました。
          わたくしは、さういふきれいなたべものやきものをすきです。</p>
      </div>
    </div>
  </div>

/**
 スマホ用デザイン
*/
@media screen and (max-width: 480px) {
  /* コンテンツ */
  .content .test1 {
    font-size: 16px;
  }

  .content .test2 {
    font-size: 5vw;
  }
}

  <div class="box hero">
    <div class="inner">
      <div class="mainTitle">ヒーロー画像</div>
      <div class="subTitle">ファーストビューを覆うようなデザイン</div>
    </div>
  </div>

/* ヒーロー */
.hero {
  /* 背景画像 */
  background-image: url(../img/hero.jpg);
  background-size: cover;
  background-attachment: fixed;
  /* 幅と高さ */
  width: 100vw;
  height: 100vh;
}

.hero .mainTitle {
  /* 文字 */
  color: #fff;
  font-weight: 700;
  font-size: 30px;
  /* 位置調整 */
  text-align: center;
  padding-top: 40vh;
}

.hero .subTitle {
  /* 文字 */
  color: #fff;
  font-weight: 700;
  font-size: 20px;
  /* 位置調整 */
  text-align: center;
}

/**
 スマホ用デザイン
*/
@media screen and (max-width: 480px) {
  /* ヒーロー */
  .hero .mainTitle {
    /* 文字 */
    font-size: 8vw;
  }

  .hero .subTitle {
    /* 文字 */
    font-size: 5vw;
  }
}

@media screen and (max-width: 480px) {
  /* ヒーロー */
  .hero {
    background-attachment: scroll;
  }
}