响应式布局(Responsive design),意在实现不同屏幕分辨率的终端上浏览网页的不同展示方式。简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。
1.设置meta标签
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
device-width 表示设备宽度
注:在移动开发或响应式网站时,必须要设置viewport
2.流式布局
按照各部分占据屏幕的比例来进行设计
3.媒体查询(media queries)——响应式布局的核心
媒体查询的使用方式
1)直接在css代码中使用
@media 媒体类型(常选all或screen) and(条件1)and(条件2){
css选择器{
css属性:属性值
}
}
2)使用link标签连接css,使用media属性进行媒体查询
示例:<link rel="stylesheet" href="CSS/01-Pad.css" media="all and (max-800px)"/>
3)使用import导入使用import导入css,可以直接用空格分隔,进行媒体查询
示例:@import url("css/01-pad.css") all and(max-800px)
html代码:
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" href="CSS/01-PC.css" /> <link rel="stylesheet" href="CSS/01-Pad.css" media="all and (max-800px)" /> <link rel="stylesheet" href="CSS/01-Mobile.css" media="all and (max-400px)" />
css代码
PC端:
body { background-color: #0000ff; }
Pad端:
body { background-color: #000000; }
Mobile端:
body { background-color: #ffffff; }
当缩放浏览器的大小时,PC端背景色为蓝色,当宽度缩放到800px时,背景颜色变成黑色,当宽度达到400px时,背景颜色会变成白色
注:不同的宽度之间进行缩放时,水平方向的进度条不能存在(各部分站的比例必须为百分比)