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

时间：2021-05-08

媒体设备类型使用详解：

<!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> @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 框架内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章