1️⃣ 流式布局: 本质上是百分比布局 (百分比是基于父级的大小) (外接 .css文件)
2️⃣ 响应式布局 : 根据浏览器宽度不同使用不同的布局风格(根据缩放浏览器窗口 内容进行变化) (外接 .css文件)
例 :
<!--大于 1000px-->
<link media="screen and (min-width:1000px)" rel="stylesheet" type="text/css" href="css/base03.css"/>
<!--小于 600px-->
<link media="screen and (max-width:600px)" rel="stylesheet" type="text/css" href="css/base01.css"/>
<!--大于 600px 小于 1000px-->
<link media="screen and (min-width: 600px) and (max-width: 1000px)" rel="stylesheet" type="text/css" href="css/base02.css"/>
3️⃣ media媒体查询: 就是来查询浏览器宽度和高度 (外接 .css文件)
例 :
/*大于 1000px*/
@media only screen and (max-width: 1000px) {
. .oneDiv{
background: red;
}
}
/*小于 600px*/
@media only screen and (min-width: 600px) {
.oneDiv{
background: yellow;
}
}
/*大于 600*px 小于100px */
@media only screen and (min-width: 600px) and (max-width: 1000px) {
.oneDiv{
background-color: greenyellow;
}
}