响应式设计+ rem
特点：手机，ipad，PC 所有的终端设备上完美展示；
核心点： 媒体查询
行业内默认分类：
1）大屏 1200-1920
2）中屏 992-1200
3）小屏 768-992
4） 超小屏 768以下
第一种写法：
//PC端样式调整
@media screen and (max-width: 1024px){
}
//平板的宽度
@media screen and (max-width: 980px){
}
@media screen and (max-width:720px){
}
@media screen and (max-width:640px){
}
//手机端
@media screen and (max-width:320px){
}
当设备符合条件时就会自动调整
第二种写法：
<link rel="stylesheet" href = "media.css" media ="screen and (max-width:992px)">
关于移动web开发与响应式web开发不同点：
| 移动web开发 | 响应式web开发 | |
| 应用场景 | 一般已经有PC端的网站，开发移动端的时候，只需单独开发移动端 | 新建的一些网站，要求适配移动端，所以一套页面兼容各个终端，灵活。 |
| 开发效率 | 针对性强，开发效率高 | 兼容各种终端，效率低 |
| 适配范围 | 只适配移动端设备，pad上体验相对较差 | 可以适配各种终端 |
| 执行效率 | 代码简介，加载快 | 代码相对复杂，加载慢 |
相同点：
① 都是现在主流的开发模式
② 使用的都是流式布局，来适配不同的设备
③ 由于终端设备的多样性，新建的站点会优先试用响应式开发
响应式开发使用 bootstrap UI框架，
-2.x.x 停止维护
-3.x.x 目前使用最多，稳定，但是放弃了IE6-7。对IE8支持但是界面效果不好。偏向于响应式开发，移动设备优先的web项目。
-4.x.x 测试阶段
响应式设计中相关参数：
1）媒体类型
① screen ---屏幕
② print ----打印机
③ handheld --- 手持设备
④ all ---通用
2）媒体查询参数
① width---视口宽度
② height---视口高度
③device-width--- 设备宽度
④ device-height --- 设备高度
⑤ orientation----检查设备处于横向（landscape）还是 竖屏 （portrait）
设计点1： 百分比布局
设计点2 ： 弹性图片
img { width：100% ；height： auto }
设计点3： 重新布局，显示与隐藏
当页面达到手机屏幕宽度时候，就要放弃一些传统页面设计。比如： 同比例缩减元素尺寸，调整页面结构布局，隐藏冗余的元素。
注意： 经常需要切换位置元素使用‘绝对定位’，减少重绘提高渲染性能；
响应式设计问题： 当一个移动设备访问一个响应式页面时就会将所有样式下载，但是这些都是冗余的。
但是相对有优缺点，优点： 减少重复开发，缺点： 性能不是最优
关于移动设备上CSS样式处理
1）高清图片：（retina屏幕）
在移动web页面上渲染图片，为了避免图片产生模糊，图片的宽高应该用物理像素单位渲染，即是100*100的图片，应该使用100dp*100dp;
width:(w_value/dpr)px; height:(h_value/dpr)px;
2）1px 边框
解决方案：
① border： 0.5px （仅仅 ios 8 支持）
② 利用scaleY(0.5)
li { position: relative }
//每个li的下面都加一条1px 边框
li+ li:before {
position: absolute;
left: 0; top:-1px;
content: '';
width: 100%;height: 1px;
border-bottom: 1px solid #eee;
-webkit-tranform: scaleY(.5);
}
3）
3.1）单行文本溢出（标题类使用居多）
overflow: hidden; //内容超出隐藏
white-space: nowrap; //文本不换行
text-overflow: ellipsis; //文本超出时显示省略号
3.2）多行文本溢出（详情介绍使用居多）
display: -webkit-box !important; //伸缩布局
overflow: hidden;
text-overflow: ellipsis;
word-break: break-all;
-webkit-box-orient: vertical;
-webkit-line-clamp:2; //从第几行截断
重点来了！！！！！
相对单位REM
为了使用各大屏幕的手机，px相对于死板，不能根据尺寸的大小而改变，使用相对单元更能体验页面的兼容性。
em 是根据父节点 的font-size 为相对单位；（em在多层嵌套下难以使用）
rem 是根据 HTML 的font-size 为相对单位； （更能作为全局统一设置的度量单位） .
在使用rem时，基值如何设置？
方案1. screen.width/10
//默认320px
html { font-size: 32px }
//iphone 6
@media screen and (min-width:375px){
html{ font-size: 37.5px }
}
//iphone 6 plus
@media screen and (min-width:414px){
html{ font-size: 41.4px }
}
方案2：
rem = screen.width/20 (这里考虑到dpr)
不适用rem 的情况： font-size
设置步骤：
1、设置视口
2、引入flexible.js，作用： 根据设计稿以及屏幕的宽度动态给根元素设置字体大小
3、看一下，设计稿的宽度是多少
4、目标像素值/设计稿宽度的十分之一
