资讯专栏INFORMATION COLUMN

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

My_Oh_My / 1216人阅读

摘要:给加上一个最小宽度,以为单位,这样当页面变小时,当达到你所设置的最小宽度,的宽度不再改变,超出的部分会用横向滚动条显示,其内所有元素的布局也不会受影响。

  1. 给body加上一个min-width最小宽度,以px为单位,这样当页面变小时,当达到你所设置的最小宽度,body的宽度不再改变,超出的部分会用横向滚动条显示,其内所有元素的布局也不会受影响。

  2. 使用百分比设置宽度,所有会在页面变化后布局改变的元素的宽度都设置成百分比宽度,这样在缩放时,页面内的各个元素也会跟着缩放,宽度占比不变,当然前提是设置CSS样式前,先给body和html这两个元素设置宽度为100%,避免后面出错。

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

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/1029.html

相关文章

  • 网页设计中分栏布局的几种实现方案

    摘要:在网页设计中,分栏布局是常用的布局手法,一般有两栏布局,三栏布局。这其中又以部分栏固定,部分栏自适应的方式最为常见。下面我们先以常见的三栏布局开始,描述一下常用的几种实现方案。 在网页设计中,分栏布局是常用的布局手法,一般有两栏布局,三栏布局。这其中又以部分栏固定,部分栏自适应的方式最为常见。下面我们先以常见的三栏布局开始,描述一下常用的几种实现方案。 三栏布局 三栏布局最常见的就是左...

    AlphaGooo 评论0 收藏0
  • 网页设计中分栏布局的几种实现方案

    摘要:在网页设计中,分栏布局是常用的布局手法,一般有两栏布局,三栏布局。这其中又以部分栏固定,部分栏自适应的方式最为常见。下面我们先以常见的三栏布局开始,描述一下常用的几种实现方案。 在网页设计中,分栏布局是常用的布局手法,一般有两栏布局,三栏布局。这其中又以部分栏固定,部分栏自适应的方式最为常见。下面我们先以常见的三栏布局开始,描述一下常用的几种实现方案。 三栏布局 三栏布局最常见的就是左...

    jk_v1 评论0 收藏0
  • CSS 常用布局在小程序中的应用

    摘要:常用布局在小程序中的应用所有布局的根本都是个基本概念定位浮动外边距操纵我们其他的布局实现方式,都是基于正常的文档流来进行的。具体实现,可以使用微信小程序的单位,以及使用定位浮动布局来实现。 CSS 常用布局在小程序中的应用 所有css布局的根本都是3个基本概念:定位、浮动、外边距操纵 我们其他的布局实现方式,都是基于正常的文档流来进行的。所以我们先来看看什么是正常的文档流。 正常文...

    garfileo 评论0 收藏0
  • CSS 常用布局在小程序中的应用

    摘要:常用布局在小程序中的应用所有布局的根本都是个基本概念定位浮动外边距操纵我们其他的布局实现方式,都是基于正常的文档流来进行的。具体实现,可以使用微信小程序的单位,以及使用定位浮动布局来实现。 CSS 常用布局在小程序中的应用 所有css布局的根本都是3个基本概念:定位、浮动、外边距操纵 我们其他的布局实现方式,都是基于正常的文档流来进行的。所以我们先来看看什么是正常的文档流。 正常文...

    CoderDock 评论0 收藏0
  • [聊一聊系列]聊一聊移动web分辨率的那些事儿

    摘要:会各种折行,样式错乱,那么细致如苹果肯定不允许这种事情发生。又一次变迁苹果公司在年,推出了新一代的,他们的屏幕都比要宽要大。 欢迎大家收看聊一聊系列,这一套系列文章,可以帮助前端工程师们了解前端的方方面面(不仅仅是代码): https://segmentfault.com/blog/frontenddriver 不同于PC时代,移动web的样式更加多样,也由于手机分辨率的碎片化,移动w...

    vibiu 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<