移动端响应式布局解决方案

2017-05-22 2,071 阅读1分钟

原文链接： github.com

简介

移动端响应式布局解决方案、用 JavaScript 根据屏幕宽度计算 Root 字体大小弥补媒体查询断点断层过大问题，一切元素单位皆使用 REM。

在 Head 引入（CSS前面）

<head>
  <!-- 省略 -->
  <script src="js/GB-respond.js"></script>
  <link rel="stylesheet" href="css/normalize.css">
</head>

以 375 （设计稿 750 * N）屏幕宽度为基础，推算出元素相对应的 REM 值，如设计稿字体为：40px，那么换算下来为：40 / 2 / 100 = .2rem

html {
  font-size: 100px;
}

body {
	font-size: .12rem; /* 在 375 屏幕宽相当于 12px */
}