响应式布局---基础入门
一. 媒体查询(@media)
媒体查询的含义:
根据不同设备屏幕大小来决定页面的样式(不限于布局、样式)
需求:
有一个div,要求在同一个页面根据不同的屏幕大小,来展示不同的样式效果。
基本结构:
<body>
<!-- 概念:为不同屏幕尺寸设定不同的css的样式 -->
<div id="dv"></div>
</body>
style样式:
<style>
#dv {
width: 100px;
height: 200px;
}
/* 屏幕大小一 */
@media screen and (min-device-width:200px) and (max-device-width:500px) {
#dv{
background-color: yellow;
}
}
/* 屏幕大小二 */
@media screen and (min-device-width:501px) and (max-device-width:1200px) {
#dv{
background-color: red;
}
}
</style>
调试说明:
F12打开控制台,切换到移动端,改变屏幕大小来调试。
需求:
根据屏幕设备屏幕的宽度来分布盒子的个数,分辨率大于400px时,一行显示三个,300到399px的一行显示两个,200到299px时一行显示一个。
基本结构
<!-- width height 浏览器可视宽高 -->
<!-- device-width device-heigth 设备屏幕的宽高 -->
<div class="dv">
<div></div>
<div></div>
<div></div>
</div>
style样式代码
<style>
.dv {
width: 100%;
height: 500px;
}
.dv div {
float: left;
height: 200px;
}
/* 一行三个div */
@media screen and (min-device-width:400px) {
.dv div {
width: 33.3%;
}
.dv div:nth-child(1){
background-color: green;
}
.dv div:nth-child(2){
background-color: red;
}
.dv div:nth-child(3){
background-color: black;
}
}
/* 两行三个div */
@media screen and (min-device-width:300px) and (max-device-width:399px) {
.dv div {
width: 50%;
}
.dv div:nth-child(1){
background-color: green;
}
.dv div:nth-child(2){
background-color: red;
}
.dv div:nth-child(3){
background-color: black;
}
}
/* 3行三个div */
@media screen and (min-device-width:200px) and (max-device-width:299px) {
.dv div {
width: 100%;
}
.dv div:nth-child(1){
background-color: green;
}
.dv div:nth-child(2){
background-color: red;
}
.dv div:nth-child(3){
background-color: black;
}
}
</style>
效果展示:
(分辨率大于400px)
(分辨率在300px到399px)
二. 媒体查询引入的几种方式
双style标签引入:
在一対style标签中引入,可以把公共代码放到另一对style
<style>
//公共代码
.dv {
width: 100%;
height: 500px;
}
.dv div {
float: left;
height: 200px;
}
.dv div:nth-child(1){
background-color: green;
}
.dv div:nth-child(2){
background-color: red;
}
.dv div:nth-child(3){
background-color: black;
}
</style>
<style media="(min-device-width:200px) and (max-device-width:299px)">
.dv div{
width: 50%;
}
</style>
<style media="(min-device-width:300px) and (max-device-width:500px)">
.dv div{
width: 33.3%;
}
</style>
采用link方式引入,标签内部meta判断分辨率
<link rel="stylesheet" href="./css/css-1.css">
<link rel="stylesheet" href="./css/css-2.css" media="(min-device-width:200px) and (max-device-width:299px)">
<link rel="stylesheet" href="./css/css-3.css" media="(min-device-width:800px)">
释疑:
当屏幕分辨率在200px到299px时,采用css-2.css文件,大于800px时,选择css-3.css文件。
源码索取QQ群:822951132(备注来意)