页面响应式设计

<meta name="viewport" content="width=device-width, initial-scale=1, maximum
-scale=1, user-scalable=no”>

• vw vh
• 媒体查询
• 百分比
• rem

@media媒体查询与响应式

@media screen and (min-width: 600px){
	.charts{
	  width:400px;
	  padding:0 calc(50% - 200px);
	}
}

@media screen and (min-width: 1000px){
	.charts{
	  width:800px;
	  padding:0 calc(50% - 400px);
	}
}

@media screen and (min-width: 1400px){
.charts{
  width:1200px;
  padding:0 calc(50% - 600px);
	}
}

@media (height > 600px) {
    body { line-height: 1.4; }
}

@media (400px <= width <= 700px) {
    body { line-height: 1.4; }
}