文字/盒子大小响应式

 根据媒体查询解决

html {
  font-size: 10px;
}
@media only screen and (min-width: 100px) and (max-width: 1366px) {
  h1 {  // 这里的em是根据根节点html元素的font-size倍数来计算的
    font-size: 2.5em; // 所以最终的是25px
  } 
  div{
    margin-top: 200px;
    width: 500px;
    height: 200px;
  }
}
@media only screen and (min-width: 1366px) and (max-width: 1920px){
  h1 {
    font-size: 3em; 
  } 
  div{
    margin-top: 300px;
    width: 7000px;
    height: 300px;
  }
}

用百分比解决

这里需要运用一个小技巧，padding用百分比做单位时是相对于容器的宽度来算的。

所以你可以把高度设为0，内容自然溢出,设置个padding-bottom

/** 那么这个div的宽高比就是  50% : 30%**/
div {
    width: 50%;
    height: 0;
    padding-bottom: 30%;
    background-color: #ccc;
}

用 js 解决

(function (doc, win) {
  // orientationchange 事件是在用户水平或者垂直翻转设备（即方向发生变化）时触发的事件。
  // resize事件是屏幕缩放时候触发的事件
  let docEl = doc.documentElement
  let resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize'
  let recalc = function () {
    let clientWidth = docEl.clientWidth
    if (!clientWidth) return
    if (clientWidth >= 640) {
      docEl.style.fontSize = '100px'
    } else {
      docEl.style.fontSize = 100 * (clientWidth / 640) + 'px'
    }
  }
  if (!doc.addEventListener) return
  win.addEventListener(resizeEvt, recalc, false)
  doc.addEventListener('DOMContentLoaded', recalc, false)
  /* DOMContentLoaded是firefox下特有的Event, 当所有DOM解析完以后会触发这个事件。
  DOMContentLoaded事件本身不会等待CSS文件、图片、iframe加载完成。
  它的触发时机是：加载完页面，解析完所有标签（不包括执行CSS和JS），
  并如规范中所说的设置interactive和执行每个静态的script标签中的JS，然后触发。
  而JS的执行，需要等待位于它前面的CSS加载（如果是外联的话）、执行完成，
  因为JS可能会依赖位于它前面的CSS计算出来的样式。 */
})(document, window)