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

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

2023-10-17 320人已围观

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

媒体设备类型使用详解：

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
登录注册
最新更新
<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

 .
                
                

                

                                            
上一篇：CSS3 实现穿梭星空动画css3实现平移效果(transfrom：translate)的示例CSS3新拟态图标悬停动画特效代码CSS3全屏图文幻灯片自动轮播特效代码CSS3 文字动画效果css3弹性盒子flex实现三栏布局的实现CSS3 按钮边框动画的实现纯css3巫师法术加载特效代码css3复选框选中灰色变彩色图片特效CSS3 实现发光边框特效CSS3 实现图形下落动画效果

                                                                
下一篇：CSS清楚浮动clear:both的实例代码css解决浮动导致父元素高度坍塌的几种方法详解CSS布局中浮动问题的四种解决方案关于CSS浮动与取消浮动的问题

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网