不需要 Npm 的单页应用框架：
不需要 Npm 的单页应用框架：
前言
自适应，是指网页能够根据屏幕尺寸自动调整内容的展现方式，包括但不限于：字体大小、元素大小 和 元素位置 等，使得在不同分辨率下都能给用户带来接近一致，或者友好的操作体验的特性。
实现自适应的方式有很多，使用『媒介查询』或『rem字体单位』就是常见的解决办法。本文并不打算深度介绍这两种技术，只讨论 “如何使用rem字体单位结合View.js完成网页的自适应布局” 这一问题。对上述两种技术感兴趣的同学，请利用搜索引擎自行补习。
字体单位 REM 特性回顾
引用 MDN 的描述：
这个单位代表根元素的 font-size 大小（例如 <html> 元素的font-size）。当用在根元素的font-size上面时 ，它代表了它的初始值
这句话展开来讲，就是：
- 开发者可以在 <html> 标签上定义 font-size，数值大小可自由定义，称之为“根字体尺寸”
- 开发者可以在任意子元素中使用 rem 这一相对单位定义尺寸，尺寸的最终大小等同于单位数值乘以根字体尺寸
换句话来讲，与 “px单位定义的尺寸代表的是固定尺寸” 这一特性不同，用rem单位定义的尺寸是相对单位，尺寸大小可随根字体尺寸的变更而等比放大或缩小。例如：
html{
/* 定义根字体尺寸为 10px */
font-size: 10px;
}
div{
/* 字体大小将为：1.4 * 10px = 14px */
font-size: 1.4rem;
/* 宽度将为：10 * 10px = 100px */
width: 10rem;
}
或者
html{
/* 定义根字体尺寸为 100px */
font-size: 100px;
}
div{
/* 字体大小将为：0.14 * 100px = 14px */
font-size: 0.14rem;
/* 宽度将为：1 * 100px = 100px */
width: 1rem;
}
当然，开发者也可以为 html 设定 font-size 为 8、12、50 等数字，但这样不便于在编写静态样式时快速得出尺寸大小，因而建议大家通常将其定义为10的整数倍，如100等。
动态更改根字体尺寸
根据上文表述，只要变更了根字体的大小，页面元素使用rem单位定义，我们就能通过动态调整根字体的大小轻松实现自适应布局。例如：
document.documentElement.style.fontSize = "100px";
但根字体的大小应该是多少呢？大家可以套用如下“公式”得出：
放缩比例 = 当前布局宽度 / 高保真效果图宽度
根字体大小 = 放缩比例 * 根字体初始大小
这个公式假定了 “应根据宽度决定缩放比例” 这一前提。如果应用上需要以高度为基准进行计算，大家只需将上述公式中的宽度变更为高度即可同样实现等比放缩。
布局尺寸的获取及变化监听
开发者可以调用 View.js 的API：View.layout.getLayoutWidth() 获取当前的布局尺寸，通过调用API：View.layout.addLayoutChangeListener 添加布局变动监听（有关视图布局的更多介绍，请参阅 视图布局）
下面是一个完整的例子：
/* 根据屏幕宽度调整字体大小，以实现自适应的效果 */
var layout = function(){
var layoutWidth = View.layout.getLayoutWidth(),/* 视图可横向布局的安全尺寸 */
layoutHeight = View.layout.getLayoutHeight(),/* 视图可纵向布局的安全尺寸 */
browserWidth = View.layout.getBrowserWidth(),/* 窗口的当前横向尺寸 */
browserHeight = View.layout.getBrowserHeight();/* 窗口的当前纵向尺寸 */
/**
* 使用当前环境的宽度除以效果图宽度得出当前应当缩小的比例
*/
var ratio = layoutWidth / 4500;
var fontSize = Math.round(100 * ratio);
document.documentElement.style.fontSize = fontSize + "px";
};
View.layout.addLayoutChangeListener(layout);/* 尺寸变化时重新布局 */
layout();/* 立即执行一次布局 */
最终效果，如下图所示：
上述效果对应的代码，大家可以去 这里 查阅
7900
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
