您的位置:首页 > Web前端 > BootStrap

详解CSS3媒体查询响应式布局bootstrap 框架原理实战(推荐)

2020-11-23 04:07 851 查看

媒体设备类型使用详解:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdn.staticfile.org/jquery/1.10.0/jquery.js"></script>

<!-- 屏幕设备 -->
<style media="screen">
h1{
color:red;
}
</style>

<!-- 打印机设备 -->
<style media="print">
h1{
color:green;
}
</style>

<!-- 屏幕设备和打印机设备 -->
<style media="screen,print">
h1{
font-weight:normal;
}
</style>
</head>
<body>
<h1>cyy</h1>
</body>
</html>

使用link标签设置媒体类型:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdn.staticfile.org/jquery/1.10.0/jquery.js"></script>

<!-- 默认media为all,所有设备 -->
<link rel="stylesheet" href="css/commob.css" media="all">
<link rel="stylesheet" href="css/screen.css" media="screen">
<link rel="stylesheet" href="css/print.css" media="print">
</head>
<body>
<h1>cyy</h1>
</body>
</html>

使用@import简化页面多文件引用:

这是推荐的做法:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdn.staticfile.org/jquery/1.10.0/jquery.js"></script>

<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>cyy</h1>
</body>
</html>

style.css

@import url(common.css);
@import url(screen.css) screen;
@import url(print.css) print;

样式表中使用@media局部定义响应查询:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdn.staticfile.org/jquery/1.10.0/jquery.js"></script>

<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="navbar">
<a href="">cyy</a>
<ul>
<li>cyy1</li>
<li>cyy2</li>
<li>cyy3</li>
</ul>
</div>
</body>
</html>

相关less

.navbar{
height:60px;
width:900px;
display:flex;
align-items:center;
background:#f3f3f3;
margin:0 auto;

ul{
list-style:none;
display:flex;
}
}

@media screen and (max-width:600px){
.navbar{
ul{
display:none;
}
}
}

and条件判断响应式应用:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdn.staticfile.org/jquery/1.10.0/jquery.js"></script>

<style media="screen and (min-width:768px) and (max-width:1000px)">
h1{
color:red;
}
</style>

<style media="screen and (max-width:768px)">
h1{
color:blue;
}
</style>
</head>
<body>
<h1>CYY</h1>
</body>
</html>

逻辑或使用技巧操作:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdn.staticfile.org/jquery/1.10.0/jquery.js"></script>

<!-- 当设备为横屏展示,或者设备宽度大于768px不论横竖屏时 -->
<style media="screen and (orientation:landscape),screen and (min-width:768px)">
h1{
color:red;
}
</style>

</head>
<body>
<h1>CYY</h1>
</body>
</html>

not关键词使用注意要点:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdn.staticfile.org/jquery/1.10.0/jquery.js"></script>

<style>
/* 如果满足条件,则不应用该样式 */
@media not screen and (min-width:500px) and (max-width:768px){
h1{
color:red;
}
}
</style>

</head>
<body>
<h1>CYY</h1>
</body>
</html>

使用only排除低端浏览器:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdn.staticfile.org/jquery/1.10.0/jquery.js"></script>

<style>
/* 加上only之后,低端浏览器会忽略该句语法 */
@media only screen and (min-width:500px){
h1{
color:red;
}
}
</style>

</head>
<body>
<h1>CYY</h1>
</body>
</html>

实战案例操作之文件结构:

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdn.staticfile.org/jquery/1.10.0/jquery.js"></script>

<link rel="stylesheet" href="css/style.css">

</head>
<body>
<header class="mb-2">
<div class="container">
<div class="navbar">
<a href="" class="logo">CYY</a>
<label for="toggle-nav"><i class="fa fa-tasks" aria-hidden="true"></i></label>
<input type="checkbox" name="" id="toggle-nav">
<div class="collapse">
<ul class="links">
<li><a href="">系统学习</a></li>
<li><a href="">实战课程</a></li>
<li><a href="">话题讨论</a></li>
<li><a href="">签到打卡</a></li>
</ul>
<div class="form">
<a href="">登录</a>
<a href="" class="form-bg">注册</a>
</div>
</div>
</div>
</div>
</header>

<div class="container">
<div class="row">
<div class="col-6 col-lg-9 col-xs-12">
<div class="card">
<div class="card-header">
<h2>最新更新</h2>
</div>
<div class="card-body">
<ul class="list-group">
<li>
<a href="">cyy开始学习响应式布局</a>
<span>2020-11-13</span>
</li>
<li>
<a href="">cyy开始学习响应式布局</a>
<span>2020-11-13</span>
</li>
<li>
<a href="">cyy开始学习响应式布局</a>
<span>2020-11-13</span>
</li>
<li>
<a href="">cyy开始学习响应式布局</a>
<span>2020-11-13</span>
</li>
<li>
<a href="">cyy开始学习响应式布局</a>
<span>2020-11-13</span>
</li>
<li>
<a href="">cyy开始学习响应式布局</a>
<span>2020-11-13</span>
</li>
<li>
<a href="">cyy开始学习响应式布局</a>
<span>2020-11-13</span>
</li>
<li>
<a href="">cyy开始学习响应式布局</a>
<span>2020-11-13</span>
</li>
</ul>
</div>
<div class="card-footer">
<div class="page">
<a href=""><</a>
<a href="">1</a>
<a href="">2</a>
<a href="" class="current">3</a>
<a href="">4</a>
<a href="">5</a>
<a href="">></a>
</div>
</div>
</div>
</div>
<div class="col-6 col-lg-3 col-xs-12">
<div class="card">
<div class="card-header">
<h3>社区小帖</h3>
</div>
<div class="card-body"></div>
<div class="card-footer"></div>
</div>
</div>
</div>
</div>
</body>
</html>

引入统一控制的style.css

@import url(common.css);
@import url(navbar.css);
@import url(card.css);
@import url(title.css);
@import url(page.css);
@import url(margin.css);
@import url(list-group.css);
@import url(small-x.css) only screen and (max-width:768px);
@import url(small.css) only screen and (min-width:768px);
@import url(medium.css) only screen and (min-width:960px);
@import url(big.css) only screen and (min-width:1200px);

导航组件navbar.less

header{
border-bottom:5px solid #009688;
box-shadow:0 5px 5px rgba(0,0,0,.2);

.navbar{
display:flex;
padding:1rem 0;
align-items:center;

.logo{
color:#009688;
margin-right:20px;
font-weight:bold;
font-size:1.3rem;

&+label{
display:none;

&+input{
display:none;
}

}
}

.collapse{
display:flex;
flex-grow:1;

.links{
display:flex;
// 占满剩余空间
margin-right:auto;

li{
margin:0 10px;

a{
color:#777;

&:hover{
color:#333;
font-weight:bold;
}
}
}

}

.form{
a{
border:1px solid #009688;
color:#009688;
padding:.3rem 1rem;
border-radius:.3rem;

&.form-bg{
background:#009688;
color:white;
}
}
}
}
}
}

@media screen and (max-width:960px){
header{
.navbar{
// flex-flow 属性是 flex-direction 和 flex-wrap 属性的复合属性。
flex-flow:row wrap;

.logo{
margin-right:auto;

&+label{
display:block;
border:1px solid #ddd;
padding:.5rem 1rem;
color:#555;
cursor:pointer;

&+input{
display:none;
}

&+input:checked{
&+.collapse{
display:block;
}
}
}
}
.collapse{
display:none;
flex-flow:column;
width:100%;

.links{
flex-direction:column;
margin-bottom:1.5rem;

li{
margin:.5rem 0;
}
}
}
}
}
}

卡片组件card.less

.card{
border:1px solid #ddd;
box-shadow:0 0 5px rgba(0,0,0,.1);
border-radius:.2rem;

.card-header{
padding:.5rem 1rem;
border-bottom:1px solid #ddd;
}
.card-body{
padding:1rem;
}
.card-footer{
padding:.5rem 1rem;
border-top:1px solid #ddd;
}
}

文本组件title.less

h2 {
font-size: 1rem;
}
h3 {
font-size: 0.8rem;
}
h2,
h3,
h4 {
color: #555;
}

分页组件page.less

.page{
display:flex;

a{
display:block;
padding:.3rem .8rem;
border:1px solid #ddd;
// 让重叠的两个边框线叠加在一起
margin-left:-1px;
color:#555;

&:first-child{
border-top-left-radius:.3rem;
border-bottom-left-radius:.3rem;
}

&:last-child{
border-top-right-radius:.3rem;
border-bottom-right-radius:.3rem;
}

&.current{
background:#009688;
color:white;
border:1px solid #009688;
}
}
}

边距组件margin.less

.mb-1 {
margin-bottom: 1rem;
}
.mb-2 {
margin-bottom: 2rem;
}
.mb-3 {
margin-bottom: 3rem;
}

列表组件list-group.less

.list-group{
li{
display:flex;
justify-content:space-between;
padding:.8rem 0;
border-bottom:1px solid #ddd;
font-size:.9rem;

&:last-child{
border-bottom:none;
}

a{
color:#777;
}

span{
color:#888;
font-size:.6rem;
}
}
}

超小屏适配 small-x.less

body {
background: white;
}
.container {
width: 95%;
margin: 0 auto;
}
.col-xs-12 {
grid-column: span 12;
}
.col-xs-11 {
grid-column: span 11;
}
.col-xs-10 {
grid-column: span 10;
}
.col-xs-9 {
grid-column: span 9;
}
.col-xs-8 {
grid-column: span 8;
}
.col-xs-7 {
grid-column: span 7;
}
.col-xs-6 {
grid-column: span 6;
}
.col-xs-5 {
grid-column: span 5;
}
.col-xs-4 {
grid-column: span 4;
}
.col-xs-3 {
grid-column: span 3;
}
.col-xs-2 {
grid-column: span 2;
}
.col-xs-1 {
grid-column: span 1;
}

小屏适配small.less

body{
background:white;
}
.container{
width:750px;
margin:0 auto;

}
.col-sm-12{
grid-column:span 12;
}
.col-sm-11{
grid-column:span 11;
}
.col-sm-10{
grid-column:span 10;
}
.col-sm-9{
grid-column:span 9;
}
.col-sm-8{
grid-column:span 8;
}
.col-sm-7{
grid-column:span 7;
}

.col-sm-6{
grid-column:span 6;
}
.col-sm-5{
grid-column:span 5;
}
.col-sm-4{
grid-column:span 4;
}
.col-sm-3{
grid-column:span 3;
}
.col-sm-2{
grid-column:span 2;
}
.col-sm-1{
grid-column:span 1;
}

中屏适配medium.less

body{
background:white;
}
.container{
width:950px;
margin:0 auto;

}
.col-md-12{
grid-column:span 12;
}
.col-md-11{
grid-column:span 11;
}
.col-md-10{
grid-column:span 10;
}
.col-md-9{
grid-column:span 9;
}
.col-md-8{
grid-column:span 8;
}
.col-md-7{
grid-column:span 7;
}

.col-md-6{
grid-column:span 6;
}
.col-md-5{
grid-column:span 5;
}
.col-md-4{
grid-column:span 4;
}
.col-md-3{
grid-column:span 3;
}
.col-md-2{
grid-column:span 2;
}
.col-md-1{
grid-column:span 1;
}

大屏适配big.less

body{
background:transparent;
}
.container{
width:1180px;
margin:0 auto;

}
.col-lg-12{
grid-column:span 12;
}
.col-lg-11{
grid-column:span 11;
}
.col-lg-10{
grid-column:span 10;
}
.col-lg-9{
grid-column:span 9;
}
.col-lg-8{
grid-column:span 8;
}
.col-lg-7{
grid-column:span 7;
}

.col-lg-6{
grid-column:span 6;
}
.col-lg-5{
grid-column:span 5;
}
.col-lg-4{
grid-column:span 4;
}
.col-lg-3{
grid-column:span 3;
}
.col-lg-2{
grid-column:span 2;
}
.col-lg-1{
grid-column:span 1;
}

效果图

使用rem单位操作尺寸响应处理

推荐使用自动化构建工具插件。

到此这篇关于详解CSS3媒体查询响应式布局bootstrap 框架原理实战的文章就介绍到这了,更多相关CSS 响应式布局bootstrap 框架内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息