Responsive Web Design
通过媒体查询@media为不同大小的设备加载不同层叠样式表
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" type="text/css" href="pc.css" media="screen" />
<link rel="stylesheet" type="text/css" href="tab.css" media="screen and (min-600px) and (max-979px)" />
<link rel="stylesheet" type="text/css" href="phone.css" media="screen and (min-599px)" />
元素宽度属性为占父元素的占比而不是固定数值
图片自适应 设宽度为100% 高度自动 给父元素设定固定比例
可以通过设置 html{ font-size:300%; } 而页面中需要具体宽度则用 rem 代替
媒体查询时则可以通过更改不同设备的 html{ font-size:200%; } 来实现，不必加载三个样式表。