一、CSS模块化设计
1、设计原则
a、可复用、能集成、要完整
b、周期性迭代
2、设计方法
a、先整体、后部分、再颗粒化
布局——页面——功能——业务
b、先抽象、再具体
二、JS组件设计
1、设计原则
a、高内聚、低耦合
b、周期性迭代
2、设计方法
a、先整体、后部分、再颗粒化
b、尽可能抽象
三、自适应
1、基本概念
CSS像素：样式表里使用的单位px
设备像素：设备的物理像素，单位pt
逻辑像素：设备独立像素，等同于CSS像素
设备像素比：DPR = 设备像素/CSS像素，在移动开发中1个CSS像素占用多少设备像素
b、viewport
<meta name="viewport" content="width=device-width, initial-scale=1.0">
分类：layout viewport visual viewport ideal viewport
width=device-width的作用是使得layout viewport == visual viewport
c、rem
rem是相对于HTML根元素字体尺寸进行计算
em是相对于父元素字体尺寸进行计算
2、工作原理
a、利用viewport和设备像素比调整HTML基准像素
b、利用px2rem自动转换css单位
四、SPA设计
1、设计意义
a、前后端分离
b、减轻服务器压力
c、增强用户体验
d、Prerender预渲染优化SEO
2、工作原理
a、History API
要能执行打开的动作
要有历史记录操作单
通过“前进”、“后退”、“控制”操作能回到任何一个步骤
pushState创建一个历史记录
onpopstate响应浏览器的前进、后退、控制事件
b、Hash
当改变某一个地址的时候（location.hash），监听hashchange事件，在事件里执行动作
