响应式布局(包含@media媒体查询）

响应式布局相关，内容来源于菜鸟教程。

viewport

width：控制 viewport 的大小，可以指定的一个值，如 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。

height：和 width 相对应，指定高度。
initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。
maximum-scale：允许用户缩放到的最大比例。
minimum-scale：允许用户缩放到的最小比例。
user-scalable：用户是否可以手动缩放。

响应式网格视图

首先确保所有的 HTML 元素都有 box-sizing 属性且设置为 border-box。确保边距和边框包含在元素的宽度和高度间。添加如下代码：
* {
box-sizing: border-box;
}
响应式网格视图通常是 12 列，宽度为100%，在浏览器窗口大小调整时会自动伸缩。使用网格视图有助于我们设计网页。这让我们向网页添加元素变的更简单。计算每列的百分比: 100% / 12 列 = 8.33%。

@media媒体查询

移动端优先就是默认使用移动端css样式，否则使用pc端等。下面例子就是移动端优先设计：

	
	 
	 
	
	
    
    
	


	

		
menu显隐控制
	

	

		

			

				
山海
				
动物
				
星空
			
		
	
		

			
山海
			
Chania is the capital of the Chania regionrete. The city can be divided in two parts, the old town and the modern city.
		
		

			

				
What?
				
Chania is a city on the island of Crete.
				
Where?
				
Crete is a Greek island in the Mediterranean Sea.
			
		
	

	

		
。。。
	
 	

方向：横屏/竖屏

结合CSS媒体查询,可以创建适应不同设备的方向(横屏landscape、竖屏portrait等)的布局。语法：
orientation：portrait | landscape
portrait：指定输出设备中的页面可见区域高度大于或等于宽度
landscape： 除portrait值情况外，都是landscape

	
	 
	 
	


	
重置浏览器大小，当文档的宽度大于高度时，背景会变为浅蓝色。否则为浅绿色。