详解CSS3媒体查询响应式布局bootstrap 框架原理实战(推荐)
发布时间:2020-11-16 11:49:38 作者:陈莺莺呀 我要评论
这篇文章主要介绍了详解CSS3媒体查询响应式布局bootstrap 框架原理实战(推荐),本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
(福利推荐:你还在原价购买阿里云服务器?现在阿里云0.8折限时抢购活动来啦!4核8G企业云服务器仅2998元/3年,立即抢购>>>:9i0i.cn/aliyun)
媒体设备类型使用详解:
<!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/?css/screen.css" media="screen"> <link rel="stylesheet" href="css/?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(?css/common.css); @import url(?css/screen.css) screen; @import url(?css/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(?css/common.css); @import url(?css/navbar.css); @import url(?css/card.css); @import url(?css/title.css); @import url(?css/page.css); @import url(?css/margin.css); @import url(?css/list-group.css); @import url(?css/small-x.css) only screen and (max-width:768px); @import url(?css/small.css) only screen and (min-width:768px); @import url(?css/medium.css) only screen and (min-width:960px); @import url(?css/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 框架内容请搜索程序员之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持程序员之家!
相关文章
css3媒体查询中device-width和width的区别详解
这篇文章主要介绍了css3媒体查询中device-width和width的区别详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小2020-03-27- 这篇文章主要介绍了css3 响应式媒体查询的示例代码,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下2019-09-25
- 这篇文章主要介绍了css3中媒体查询结合rem布局适配手机屏幕,需要的朋友可以参考下2019-06-10
- 这篇文章主要介绍了CSS3 Media Queries中媒体属性的使用,文章中还以一个响应式设计的例子作为补充讲解,需要的朋友可以参考下2016-02-29
- 这篇文章主要介绍了CSS3媒体查询基本学习教程,包括基本的语法和逻辑操作符,以及媒体查询可检测的特性与利用viewport禁止用户缩放等部分的内容,需要的朋友可以参考下2016-02-29
使用CSS媒体查询(Media Queries)和JavaScript判断浏览器设备类型的方法
有无数的理由要求我们在任何时候都应该知道用户是使用的什么设备浏览我们的网站——宽屏,普通屏,平板,手机?知道这些特征,我们web应用的CSS和JavaScript才能同步做相应2014-04-03- 媒体类型:all 所有设备、screen 电脑显示器等等;媒体特性共13种,可以说是一个类似CSS属性的集合,感兴趣的朋友可以了解下本文,希望对大家有所帮助2013-09-12
- 这篇文章主要介绍了CSS3媒体查询实现不同宽度的下不同内容的展示功能,本章节我们将为大家演示一些多媒体查询实例,需要的朋友可以参考下2023-11-27
最新评论