您现在的位置是：网站首页> 编程资料编程资料

详解CSS3媒体查询响应式布局bootstrap 框架原理实战(推荐)详解使用CSS3的@media来编写响应式的页面 css3 media 响应式布局的简单实例css3media响应式布局实例css3的@media属性实现页面响应式布局示例代码

2021-09-03 935人已围观

简介这篇文章主要介绍了详解CSS3媒体查询响应式布局bootstrap 框架原理实战(推荐),本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下

媒体设备类型使用详解：

Documentcyy

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

Documentcyy

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

这是推荐的做法：

Documentcyy

style.css

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

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

Documentcyycyy1
cyy2
cyy3

相关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条件判断响应式应用：

DocumentCYY

逻辑或使用技巧操作：

DocumentCYY

not关键词使用注意要点：

DocumentCYY

使用only排除低端浏览器：

DocumentCYY

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

html

DocumentCYY系统学习
实战课程
话题讨论
签到打卡
登录注册
最新更新
cyy开始学习响应式布局2020-11-13
cyy开始学习响应式布局2020-11-13
cyy开始学习响应式布局2020-11-13
cyy开始学习响应式布局2020-11-13
cyy开始学习响应式布局2020-11-13
cyy开始学习响应式布局2020-11-13
cyy开始学习响应式布局2020-11-13
cyy开始学习响应式布局2020-11-13
<12345>
社区小帖

引入统一控制的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; }

效果图