这篇文章主要讲解了“如何使用CSS保持页面内容宽高比”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习”如何使用CSS保持页面内容宽高比”吧!
需求描述:移动端实现横跨页面半圆。(类似问题,实现4 x4的正方形网格)
简化问题,我们可以理解为实现一个高度和宽度比为1:2的块。
需要解决问题:
1,高度和宽度按照一定比例。
2,外容器高度和宽度不确定。
3,尽量不使用图片和脚本替代。
4,兼容移动端。
编写html
,,=,,,
<强>思考一,使用高度:100%,
身体{,,
<李>,,,,: 0;,,
<李>,,,,,, 100%;,,
<李>,,,,,, lightblue;,,
<李>},,
<李>,,,
<李>.semicircle {,,
<李>,,,,,, 100%;,,
<李>,,,,,, 100%;,,
<李>,,,,,,,,,
<李>,,,,半径:,100%;,,
<李>},,
存在问题,高度的百分比是根据父容器计算的,不是当前容器,根本满足不了我们的需求。效果如下:
父容器体的高度百分比为其子容器所填充的高度关联,即便设置的身体高度100%,由于子容器即半圆所填充的实际高度为边界的5,无法将父容器”全部撑开”,因此无法通过设定父容器的高度为百分比指定宽高按照一定比例的容器。
<强>思考二,设定padding-top或padding-bottom为
100%比例计算对生成的盒子的宽度# 39;s包含块[…)(来源:w3.org,强调我的)
百分比宽度的计算与所生成盒子的包含块宽度有关.padding-top, padding-bottom的百分比是根据父容器的宽度(宽度)计算的,而不是高度(高度)。其他比例实现对照表
方面ratiopadding-bottom value16:956.25 % 4:375 % 3:266.66 % 8:562.5%
,
<李>身体{,,
<李>,,,,: 0;,,
<李>,,,,,, 100%;,,
<李>,,,,,, lightblue;,,
<李>},,
<李>,,
<李>.semicircle {,,
<李>,,,,,, 100%;,,
<李>,,,,,, 0;,,
<李>,,
<李>,,,,,, 100%;,,
<李>,,,,,,,,,
<李>,,,,半径:,100%;,,
<李>},,
<强>思考三,使大众用单元
使用大众单元设定元素高度和宽度,vm的大小是通过视窗的宽度设定的,因此可以通过该方法保持容器按照一定比例显示。一单位的大众等于百分之一的视口宽度,即100年大众等于100%视窗宽度。
身体{,,
<李>,,,,: 0;,,
<李>,,,,,, 100%;,,
<李>,,,,,, lightblue;,,
<李>},,
<李>,,
<李>.semicircle {,,
<李>,,,,,,, 100大众;,,
<李>,,,,,,: 100大众;,,
<李>,,,,,,,,,
<李>,,,,半径:,100%;,,
<李>},,
对照表
<强>思考四,使用伪元素和inline-block布局
body {,,
<李>,,,,,, 100%;,,
<李>,,,,,, 0;,,
<李>,,,,,,,,,
<李>,,,,,, lightblue;,,
<李>},,
<李>.semicircle {,,
<李>,,,,,,,,,,
<李>,,,,半径:,100%;,,
<李>},,
<李>,,
<李>.semicircle: before {,,
<李>,,,,:;,,
<李>,,,,,,,,,,
<李>,,,,,, 100%;null
