缩小屏幕宽度有滚动条VS无滚动条

缩小屏幕宽度有滚动条

-固定布局

图片.png
图片.png
图片.png

缩小屏幕宽度无滚动条

弹性布局

这种情况是给父容器设置一个最大宽度,这样屏幕宽度减小到最大宽度 再减小,div的宽度也会跟这减小适应屏幕宽度,所以没有了滚动条
屏幕宽度放大到最大宽度,屏幕再放大,div的宽度依然为最大宽度不变

这种情况下,就要好好规划div里面的内容,当屏幕宽度减小到最大宽度的时候,父容器自适应,要使得里面的内容宽度也要自适应


图片.png
图片.png
图片.png

总结

max-width:0开始,屏变大不变大,屏变小变小
min-width:最大宽开始,屏变小不变小,屏变大变大

特殊例子

图片.png
图片.png
图片.png

图片.png

代码

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,863评论 1 92
  • 原文地址 在移动设备上进行网页的重构或开发,首先得搞明白的就是移动设备上的viewport了,只有明白了viewp...
    matthewm阅读 1,571评论 0 4
  • 我可能是个有浓烈情感的人, 但我觉得自己可能会变得情感克制 或者我想说冷情 这样才是成年人啊。 现在就把那个开关忘...
    qi15阅读 258评论 0 1
  • 我的家乡是北方一个极其普通的小镇,在我上高中之前,出去的机会不是没有,但是也是一个巴掌能数的过来的。 但是每次说起...
    婷婷小妞阅读 250评论 0 3