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>
元素可以设置多张图片