响应式页面 基础知识

1. 设置meta标签

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

§width = device-width：宽度等于当前设备的宽度

§initial-scale：初始的缩放比例（默认设置为1.0）  

§minimum-scale：允许用户缩放到的最小比例（默认设置为1.0）    

§maximum-scale：允许用户缩放到的最大比例（默认设置为1.0，一般为3.0）   

§user-scalable：用户是否可以手动缩放（默认设置为no，因为我们不希望用户放大缩小页面）

2. 媒体查询

根据设备的宽度，让页面使用不同的css
<link rel="stylesheet" type="text/css"media="screen and (min-width: 400px) and (max-device-width: 600px)" href="smallScreen.css" />

3. 百分比布局

• 文字 ： rem
• 图片

1.背景图片----媒体查询

2.图片液态化----弹性图片

img, object { max-width: 100%;}

3.HTML5 <picture> 元素

HTML5 的<picture> 元素可以设置多张图片