css3响应式布局

标签：

css3的新特性响应式布局，通过@media screen and (min-width: ) and (max-width: ) {}；来实现页面的响应式设计，来适应不同的终端。需在头部添加：<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no,maximum-scale=1.0">。

1.适应手机端：

　　例如：　@media screen and (max-width:414px ) {调整CSS的样式}；适应iPhone 6 Plus的手机尺寸，想要适应其他手机屏幕需要调(max-width:)与(min-width: )的值。

2.适应平板：

　　例如：   @media screen and (max-width: 768px){调整CSS的样式}；适应竖屏的ipad。

3.手机或ipad的横屏或竖屏：

　　　1.　@media screen and (max-width:或min-width: )and(orientation:portrait){调整CSS的样式}；　适应竖屏。　　　

　　　　　 2.   @media screen and (max-width:或min-width:)and(orientation:landscape){调整CSS的样式}；　适应横屏。

　　只是整理了一点====求大神指点！！！！

css3响应式布局

标签：

原文地址：http://www.cnblogs.com/jiadong/p/5655138.html