一、开发原则
1、移动优先，在设计初期，就要考虑页面如何在多终端显示
2、渐进增强，充分发挥硬件设备的最大功能
二、如何实现相应布局方法
1、css3-Media Query，最简单
2、借助原生javascript，成本高
3、开源框架，可以更好的支持多终端
三、CSS3-media Query
常见属性：
device-width,devic-height，根据屏幕宽高来做不同的展示
width,height，渲染窗口宽高
orientation，设备方向
resolution，设备分辨率
四、实际案例
css.css文件中写入
body{background-color:red;} 在head中引用css
<link rel="stylesheet" type="text/css" href="css.css" media="only screen and (max-width:480px)" />
media="only screen and (max-width:480px)"表示，当浏览器显示窗口宽度小于480px的时候，就引用css.css文件
直接在head，style中编写
@media screen and (min-width:480px){ body{background-color:#ff00ff}}来源：https://www.cnblogs.com/Zjingwen/p/4455657.html