响应式设计思惟

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%; } 来实现，没必要加载三个样式表。