CSS3之响应式布局

一、响应式布局

使网页在不同的媒介上都能很好的展示。

二、使用

1.媒介类型与媒介查询语法

媒介类型：all(所有媒介)、screen(显示屏，手机、电脑）、print（打印显示）
媒介查询语法 :@media 条件{满足条件才会作用的样式规则）
示例

@media screen{
		h1,p{
				border:dashed;
				}
			}
<h1>别担心</h1>
<p>别担心，只要放任不管，有可能出事的一定会出事，迟早问题</p>

当显示媒介是屏幕时，h1标签和p标签会被作用上这种样式。

2.宽高检测与页面比例

使用媒介查询语法根据页面的宽高或者比例为页面内特定元素赋予不同的样式

@media (max-width:450px){
    .group{
        display:none;
    }
}
//在页面宽度大于450px时，隐藏具有group属性的标签

@media(orientation:landscape){
	body{
			background:#000;
			color:#fff;
			}
	}
//orientation:landscape(页面长大于宽）/portrait（页面宽大于长）

@media(min-width:400px) and (oraentation:portrait){
	body{
		background:#ccc;
		color:#000;
		}
	}
//组合使用 当页面宽度大于等于400px且宽大于长的时候采用这种样式。