css3的新特性响应式布局，通过@media screen and (min- ) and (max- ) {}；来实现页面的响应式设计，来适应不同的终端。需在头部添加：<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no,maximum-scale=1.0">。
1.适应手机端：
例如： @media screen and (max-414px ) {调整CSS的样式}；适应iPhone 6 Plus的手机尺寸，想要适应其他手机屏幕需要调(max-)与(min- )的值。
2.适应平板：
例如： @media screen and (max- 768px){调整CSS的样式}；适应竖屏的ipad。
3.手机或ipad的横屏或竖屏：
1. @media screen and (max-或min- )and(orientation:portrait){调整CSS的样式}； 适应竖屏。
2. @media screen and (max-或min-)and(orientation:landscape){调整CSS的样式}； 适应横屏。
只是整理了一点====求大神指点！！！！