响应式设计思维

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-width:600px) and (max-width:979px)" />

<link rel="stylesheet" type="text/css" href="phone.css" media="screen and (min-width:599px)" />

元素宽度属性为占父元素的占比而不是固定数值

图片自适应 设宽度为100%  高度自动 给父元素设定固定比例

可以通过设置 html{ font-size:300%; } 而页面中需要具体宽度则用 rem 代替

媒体查询时则可以通过更改不同设备的 html{ font-size:200%; } 来实现，不必加载三个样式表。