CSS：501-541

Mr JackZhang

于 2021-06-17 17:49:24 发布

阅读量80

点赞数

分类专栏：前端

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/weixin_45656377/article/details/117982977

版权

前端专栏收录该内容

27 篇文章 0 订阅

订阅专栏

在这里插入图片描述

响应式里面没办法控制每一个子元素大小样式变化，我们来一个布局容器，通过布局容器改变子元素大小和样式变化，正常情况下宽度是定死的，我们可以划分不同的档位设置不同的宽度

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

是响应式布局

移动端：fluid是百分之百屏幕

在这里插入图片描述
栅格系统是将页面元素划分成若干等份的列，rem是将屏幕划分成若干等份的列。而栅格系统是将页面内容花费城若干等份的列

实际是把布局容器container划分成12等份页面变大，内容所占份数根据容器大小变化进行分配，container宽度不同。内容占比会发生变化，页面内容相应会有相应的响应式布局效果
在这里插入图片描述

在这里插入图片描述

containner也有，不过加行后会自动去掉

在这里插入图片描述
本来就是33.33%加了margin值一行装不开就会掉下来

通过盒子嵌套盒子实现边距效果

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

只在1280的时候修改container的宽度，其他时候伸缩浏览器container容器的大小还是bootstrap自己的大小

因为图片是透明的必须加上蓝色背景才能看到
在这里插入图片描述

由于每一列都有左右一个padding值，header列也有左右的padding值，padding导致盒子顶不到最左侧的边，所以需要把左侧padding值去掉，右侧本身需要有距离先空着就行

问题是图片不会等比例缩放

在这里插入图片描述

做响应式不太关心高度，因为一旦尺寸发生变化，布局模式也会变化，会自动缩放相应高度

要想给每列添加空白缝隙是不能用margin的，因为每行占满了00%，加margin会让多出来的掉到第二行，所以给每个小列指定padding-right值在这里插入图片描述

但是在小屏幕下出现了问题

小屏幕下的效果

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

pc端别用，适合移动端布局
网页美工给的相片是750像素的设计稿，但是真正开发是375，所以要缩小一倍，换成2x就会显示到375的设计像素

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS：501-541

响应式里面没办法控制每一个子元素大小样式变化，我们来一个布局容器，通过布局容器改变子元素大小和样式变化，正常情况下宽度是定死的，我们可以划分不同的档位设置不同的宽度是响应式布局移动端：fluid是百分之百屏幕栅格系统是将页面元素划分成若干等份的列，rem是将屏幕划分成若干等份的列。而栅格系统是将页面内容花费城若干等份的列实际是把布局容器container划分成12等份页面变大，内容所...
复制链接

扫一扫

专栏目录

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。