特点：手机，ipad，PC 所有的终端设备上完美展示；
核心点：
//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){
}
当设备符合条件时就会自动调整
响应式设计中相关参数：
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
原文地址：https://www.cnblogs.com/sunqq/p/8319164.html