怎么解决浏览器缩放打乱布局的问题

2021-04-02 09:56发布

21条回答
桥豆麻袋
2楼 · 2021-04-02 10:38

利用响应式布局啊,理论上,响应式界面能够适应不同的设备。描述响应式界面最著名的一句话就是“Content is like water”,翻译成中文便是“如果将屏幕看作容器,那么内容就像水一样”。

响应式界面的基本规则

1、可伸缩的内容区块:内容区块的在一定程度上能够自动调整,以确保填满整个页面

2、可自由排布的内容区块:当页面尺寸变动较大时,能够减少/增加排布的列数

3、适应页面尺寸的边距:到页面尺寸发生更大变化时,区块的边距也应该变化

4、能够适应比例变化的图片:对于常见的宽度调整,图片在隐去两侧部分时,依旧保持美观可用

5、能够自动隐藏/部分显示的内容:如在电脑上显示的的大段描述文本,在手机上就只能少量显示或全部隐藏

6、能自动折叠的导航和菜单:展开还是收起,应该根据页面尺寸来判断

7、放弃使用像素作为尺寸单位:用dp尺寸等方法来确保页面在分辨率相差很大的设备上,看起来也能保持一致。同时也要求提供的图片应该比预想的更大,才能适应高分辨率的屏幕。


一个Ai
3楼 · 2021-04-02 10:43

原因通常就是你的元素浮动了,最好设置个最小宽度min-width:具体宽度值 px;,如果你需要自适应,用media查询

 

有些地方不写死的话可以用min-width和max-width来限制一下。不然你父容器用百分比设置宽度,而子元素用固定的px设置宽度,当你父容器缩小到一定程度的时候肯定容不下固定宽度的子元素。如果想百分比和固定宽度混用的话最好设置一下min-width和max-width


yjh
4楼 · 2021-04-02 11:04

有些地方不写死的话可以用min-width和max-width来限制一下。不然你父容器用百分比设置宽度,而子元素用固定的px设置宽度,当你父容器缩小到一定程度的时候肯定容不下固定宽度的子元素。如果想百分比和固定宽度混用的话最好设置一下min-width和max-width  

是开心果呀 - 热爱生活
5楼 · 2021-04-02 12:42

原因:
body下一级的元素css中都有float浮动;而body的大小是随浏览器窗口大小改变的,当浏览器窗口缩小时,元素就会往下掉,这就是原因所在
下面举个例子:

zoom_CSS参考手册_web前端开发参考手册系列 " /> style div{ float: left; width: 500px; border: 1px solid red; height: 100px; }

是你的小甜心呀
6楼 · 2021-04-02 13:41

有些地方不写死的话可以用min-width和max-width来限制一下。不然你父容器用百分比设置宽度,而子元素用固定的px设置宽度,当你父容器缩小到一定程度的时候肯定容不下固定宽度的子元素。如果想百分比和固定宽度混用的话最好设置一下min-width和max-width  

希希
7楼 · 2021-04-02 13:50

有些地方不写死的话可以用min-width和max-width来限制一下。不然你父容器用百分比设置宽度,而子元素用固定的px设置宽度,当你父容器缩小到一定程度的时候肯定容不下固定宽度的子元素。如果想百分比和固定宽度混用的话最好设置一下min-width和max-width  

梦到内河_
8楼 · 2021-04-02 14:04

原因:
body下一级的元素css中都有float浮动;而body的大小是随浏览器窗口大小改变的,当浏览器窗口缩小时,元素就会往下掉,这就是原因所在
下面举个例子:

" /> style div{ float: left; width: 500px; border: 1px solid red; height: 100px; }

yuixan
9楼 · 2021-04-02 14:11
只需在浮动的父级元素中添加下面的一个固定的元素包含着就可以:     zoom_CSS参考手册_web前端开发参考手册系列   style .top{ width: 1190px; } .top div{ float: left; width: 500px; border: 1px solid red; height: 100px; }