css中的容器
css中的容器分为固定容器和流体容器。
流体容器:
图片宽度width一直为width:100%,容器的宽度随着margin, padding, border的出现,其可用宽度自动跟着减小,形成了自适应效果。就像放在容器中的水流一样,内容区域会随着margin, padding, border的出现自动填满剩余空间。
固定容器:
阈值 width
大于等于1200(大屏pc) 1170px + 槽宽(槽宽可变)
大于等于992小于1200(中屏pc) 970 + 槽宽(槽宽可变)
大于等于768小于992(平板) 750 + 槽宽(槽宽可变)
小于768(移动手机) auto
实例:
利用媒体查询制作响应式布局
@media screen and (max-width: 768px) { //宽度小于768px的时候被应用 移动端
.class { background: #ccc; } }
@media screen and (min-width: 768px) and (max-width: 992px) { //宽度在 768px 和 992px 之间的时候被应用
.class { background: #333; } }
@media screen and (min-width: 992px) {//宽度大于 992px 的时候被应用 pc端
.class {background: #666;} }
注意:这三个媒体查询这样子排序有利于代码结构清晰。
CSS媒体查询的简介:
https://www.cnblogs.com/xiaohaodeboke/p/12536829.html
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步