当前位置：移动技术网 > IT编程>网页制作>CSS > [笔记]解决页面缩小时页面布局会乱的问题

[笔记]解决页面缩小时页面布局会乱的问题

2019年04月02日 | 移动技术网IT编程 | 我要评论

给body加上一个min-width最小宽度，以px为单位，这样当页面变小时，当达到你所设置的最小宽度，body的宽度不再改变，超出的部分会用横向滚动条显示，其内所有元素的布局也不会受影响。
使用百分比设置宽度，所有会在页面变化后布局改变的元素的宽度都设置成百分比宽度，这样在缩放时，页面内的各个元素也会跟着缩放，宽度占比不变，当然前提是设置css样式前，先给body和html这两个元素设置宽度为100%，避免后面出错。

至于高度，建议使用确定的值，不要用百分比，因为页面的大小对高度基本没影响，让元素自己去撑盒子得高度。

您可能感兴趣的文章:

css深入剖析transform的translate和perspective

这里写目录标题一、translate二、perspective1.perspective-origin2.tra... [阅读全文]
css深入剖析transform的skew

skew一、skew1.skew(x,y)2.斜切目标3.实例运用一、skew1.skew(x,y)指定对象sk... [阅读全文]
2个属性用CSS实现图片自适应浏览器

1.创建设置图片的div<div class="img-wrapper"></div>2... [阅读全文]
收藏！40 个 CSS 布局技巧

简介：CSS是Web开发中不可或缺的一部分，随着Web技术的不断革新，CSS也变得更加强大。CSS的众多属性你知... [阅读全文]
文本超过2行显示省略号失效-postcss没有向下兼容

文本超出2行部分显示省略号，代码如下：overflow: hidden;text-overflow: ellip... [阅读全文]
css背景色渐变之线性渐变和径向渐变的具体用法

渐变？：背景色在多个颜色之间平稳过渡线性渐变:从一个方向到另一个方向到另一个方向的颜色的变化线性渐变如图所示：标... [阅读全文]
HCIE第四天总结（典型组网之一：CSS+Eth-Trunk+iStack）

**典型组网之一：CSS+Eth-Trunk+iStack**核心层汇聚层用CSS，接入层不用那么多性能所以用i... [阅读全文]
kafka和flume区别

Flume更趋向于消息采集系统，Kafka更趋向于消息缓存系统。kafka:目前项目中主要是用来做消息推送中间件... [阅读全文]
了解下Apache Elasticsearch 和 Kibana

Kibana 界面Kibana 是为 Elasticsearch设计的开源分析和可视化平台。你可以使用 Kiba... [阅读全文]
HCIE总结第四天

HCIE第四天总结CSS技术：为了解决单一VLAN负载均衡所以出现了新的技术：CSS（堆叠技术）堆叠技术原理：... [阅读全文]

网友评论


验证码：

[笔记]解决页面缩小时页面布局会乱的问题

2019年04月02日 | 移动技术网IT编程 | 我要评论

您可能感兴趣的文章:

相关文章:

网友评论