不喜勿喷，本人目前还对media掌握的不是很扎实，就说说我的看法吧：
web端响应式开发:
1,css源生代码响应式布局 -- @media --css源生代码直接写定宽高
2,bootstrap--移动端优先
移动端响应式布局：
App:不同的屏幕尺寸：
一、css源生代码响应式布局
采用@media媒体查询，利用分界点阈值进行排版布局 -- 写在css
@media screen and (min-960px){html{font-size:30px}}
--根据手机屏幕尺寸 宽高通过百分比来 实在不行，高度可以用rem/em，决不能出现px
margin、padding也建议百分比，不行就rem/em
@media font-size
引入viewport元数据标签
<meta name="viewport" content="width=device-width",initial-scale="1.0">
二、 JS文件达到自适应 可以直接写px，
1，尽量用雪碧图
2，尽量自适应
em/rem换算：国外-1em=16px,相对于body,要继承
国内-1rem=16px,相对于根元素，不会继承。 -- 针对App字体的大小
建议1rem=20px -- 自定义
物理像素：@media里使用
逻辑像素（设备独立像素）：谷歌模拟器
例：iphone5，宽320.ui出图640，这个640就是物理像素。
渐进加强：针对低版本浏览器构建页面，先保证解最基本的功能，再对高级增加效果，交互和追加功能，最后达到更好的用户体验
意味着朝前看，同时保证其根基处于安全地带
优雅降级：一开始就构建完整的功能，在针对低版本浏览器进行兼容。
意味着往回看