CSS3媒体查询响应式布局bootstrap框架的使用
这篇文章主要介绍CSS3媒体查询响应式布局bootstrap框架的使用,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
成都创新互联公司主要从事成都做网站、成都网站设计、网页设计、企业做网站、公司建网站等业务。立足成都服务大安市,十多年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:13518219792
媒体设备类型使用详解:
Document cyy
使用link标签设置媒体类型:
Document cyy
使用@import简化页面多文件引用:
这是推荐的做法:
Document cyy
style.css
@import url(common.css); @import url(screen.css) screen; @import url(print.css) print;
样式表中使用@media局部定义响应查询:
Document cyy
- cyy1
- 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条件判断响应式应用:
Document CYY
逻辑或使用技巧操作:
Document CYY
not关键词使用注意要点:
Document CYY
使用only排除低端浏览器:
Document CYY
实战案例操作之文件结构:
html
Document 最新更新
- 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
社区小帖
引入统一控制的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
h3 { font-size: 1rem; } h4 { font-size: 0.8rem; } h3, h4, h5 { 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框架的使用”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注创新互联行业资讯频道!
新闻标题:CSS3媒体查询响应式布局bootstrap框架的使用
分享链接:http://scyanting.com/article/jdcjsj.html