<div class="p1">
  宽度为屏幕宽度的50%，字体大小1.2em
  <div class="s1">
    字体大小1.2.em
  </div>
</div>

<div class="p2">
  宽度为屏幕宽度的40%，字体大小默认
  <div class="s2">
    字体大小1.2em
  </div>
</div>
html {
  font-size: 32px; /* 320/10 */
}
body {
  font-size: 16px; /* 修正字体大小 */
  /* 防止页面过宽 */
  margin: auto;
  padding: 0;
  width: 10rem;
  /* 防止页面过宽 */
  outline: 1px dashed green;
}

/* js被禁止的回退方案 */
@media screen and (min-width: 320px) {
  html {
    font-size: 32px;
  }
  body {
    font-size: 16px;
  }
}
@media screen and (min-width: 481px) and (max-width: 640px) {
  html {
    font-size: 48px;
  }
  body {
    font-size: 18px;
  }
}
@media screen and (min-width: 641px) {
  html {
    font-size: 64px;
  }
  body {
    font-size: 20px;
  }
}

noscript {
  display: block;
  border: 1px solid #d6e9c6;
  padding: 3px 5px;
  background: #dff0d8;
  color: #3c763d;
}
/* js被禁止的回退方案 */

.p1,
.p2 {
  border: 1px solid red;
  margin: 10px 0;
}

.p1 {
  width: 5rem;
  height: 5rem;

  font-size: 1.2em; /* 字体使用em */
}

.s1 {
  font-size: 1.2em; /* 字体使用em */
}

.p2 {
  width: 4rem;
  height: 4rem;
}
.s2 {
  font-size: 1.2em; /* 字体使用em */
}

var documentElement = document.documentElement;

function callback() {
  var clientWidth = documentElement.clientWidth;
  // 屏幕宽度大于780，不在放大
  clientWidth = clientWidth < 780 ? clientWidth : 780;
  documentElement.style.fontSize = clientWidth / 10 + "px";
}

document.addEventListener("DOMContentLoaded", callback);
window.addEventListener(
  "orientationchange" in window ? "orientationchange" : "resize",
  callback
);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.