移动端屏幕适配方案: vertical.scss, 优先使用 CSS3 中的 vw, 如果不支持, 就降级处理使用媒体查询.

vertical.scss

// 使用媒体查询动态设置 html font-size 根字体的大小
// 然后统一使用 rem 设置宽高等
// 使用 iPhone 6 作为参考, 基准字体大小 20px

$baseWidth: 375px;
$baseFont: 20px;
html {
  font-size: $baseFont;
  outline: 0;
  font-family: sans-serif; // 1
  -ms-text-size-adjust: 100%; // 2
  -webkit-text-size-adjust: 100%; // 2
  -moz-text-size-adjust: 100%; // 2
  -o-text-size-adjust: 100%; // 2
}
$bps: 320px, 335px, 345px, 360px, 375px, 400px, 414px, 430px, 454px, 460px, 480px, 500px, 520px, 540px, 560px, 580px, 600px, 620px, 640px, 680px, 700px, 720px, 735px, 750px, 780px,800px, 840px, 900px, 960px;
@each $i in $bps {
	$font: $i  /  $baseWidth  *  $baseFont;// 375px/375px * 20px
	@media only screen and (min-width: $i){
	    html {
	      font-size: $font !important;
	    }
	  }
}
html {
    font-size: calc(2 * 100vw / 37.5) !important;
}

Tips:

使用 rem 方便计算, 可以使用大佬写好的一些 mixin: huanz/mixins

One more thing...

阿里的可伸缩布局方案 amfe/lib-flexible 使用 JavaScript 动态设置 html 根字体大小