经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » HTML/CSS » HTML5 » 查看文章
不定宽度元素排版及子元素固定宽高比问题
来源:cnblogs  作者:泼墨作山水  时间:2020/11/23 12:17:08  对本文有异议

常见的排版自适应问题

什么情况需要做自适应呢?最常见的情况就是父元素的宽度不固定造成子元素排版改变。
我们根据不同的情况,做不同的适应。

固定个数,不固定大小

父级元素宽度改变时,子元素大小也随着改变,子元素的宽高参照同一标准计算的单位,例如vw以可视页面宽度计算,remhtmlfont-size计算等,效果如下

不固定个数,固定大小

父级元素宽度改变,子元素的大小不变,改变一排能够容纳的最大个数。
这时候子元素的宽高值都不需要改变,当然就不需要自适应了。但是因为父元素一排可以容纳最多的子元素并不是一个刚好的值,剩余空位无论如何分布,都是非常不美观的。效果如下:

不固定个数,不固定大小

父级元素宽度改变,子元素的大小,一排能够容纳的最大个数都随着改变。
此时实现子元素的宽度自适应,该元素具有最小宽度和最大宽度,实际宽度根据父元素的宽度和一排至少能放下的个数共同决定。页面效果是不是美观多了呢?

  1. {
  2. display: grid;
  3. height: auto;
  4. grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  5. }


排版问题解决,接下来就需要想办法设置未知宽度元素的高度,达到固定宽高比的效果

未知的元素固定宽高比

参考来源:https://www.jb51.net/css/714251.html

可替换元素(img,video)

可替换元素和其他元素不同,它们本身有像素宽度和高度的概念。我们可以自适应一边的值,另一边通过auto自动计算 。

普通元素

padding-bottom

一直被忽视的一个知识点,垂直方向上的内外边距使用百分比做单位时,是基于包含块的宽度来计算的。

利用这个特性,我们可以创建一个没有实际作用的空盒子,如果我们需要填充内容,那么就需要使用绝对定位在内部再创造一个容器。

  1. .one-box {
  2. width: calc(100% - 0.7vw);
  3. margin: 0 auto;
  4. height: 0;
  5. padding-bottom: 115%;
  6. margin-bottom: 0.7vw;
  7. background: #fffa;
  8. }

aspect-ratio 属性指定元素宽高比

浏览器还未支持

aspect-ratio 的语法格式如下:aspect-ratio: <widtu-ratio>/<height-ratio>

如下,我们可以将 widthheight 设为 auto ,然后指定 aspect-ratio 。另一个值就会按照比例自动变化。

  1. /* 高度随动 */
  2. .box1 {
  3. width: 100%;
  4. height: auto;
  5. aspect-ratio: 16/9;
  6. }
  7. /* 宽度随动 */
  8. .box2 {
  9. height: 100%;
  10. width: auto;
  11. aspect-ratio: 16/9;
  12. }

原文链接:http://www.cnblogs.com/wwwxxxyyy/p/13992930.html

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号