css - 如何拥有完美的响应式CSS圈子？

Question

在学习 Flexbox 的过程中，对拥有响应式的完美 CSS 圆圈感到困惑。我怎么做？就目前情况而言，我当前的代码有圆1、圆2 和圆3，宽度和高度均为100。我不想对它们的高度进行硬编码，而是使其具有响应能力。有没有办法以 % 形式得到一个完美的圆？那么每次调整浏览器大小时它都会缩放？

或者媒体查询是解决这个问题的唯一选择吗？

感谢您的帮助。

			* {
				box-sizing: border-box;
			}

			html, body {
				height: 100%; 
				font-family: sans-serif;
				font-weight: 100;
			}

			body {
				display: flex;
				margin: 0;
				flex-direction: column;
			}

			main {
				display: flex;
				flex: 1 0 100%;

				/*for content and sidebar */
				flex-direction: row; 
			}

			/* main */
			#content {
				flex: 1 0 80%;

				/* for header/logo and description */
				display: flex;
				flex-direction: column;
			}

			#description img {
				display: block;
			}

			#header {
				flex: 1 0 5%;
				padding: 10px;
				/* for test */
				display: flex;
				justify-content: center;
			}

			#test {
				display: flex;
				flex-direction: row;
			}

			#header h1 {
				text-align: center;
				font-size: 5em;
				padding: 0;
				margin: 0;
			    font-family: 'Satisfy', cursive;
			}

			h1 {
				     font-family: 'Satisfy', cursive;
			}

			#description {
				flex: 1 0 10%;
				padding: 30px;
				display: flex;
			}

			#description p {
				padding-left: 20px;
				font-size: 20px;
			}

			#description img {
				 width: 250px;
				 height: 250px;

				 border-radius: 50%;
				  border: 6px solid #db6525;
				  border: 6px solid #00B2AC;
			}

			#name {
				font-size: 35px;
				color: #db6525;
				    font-family: 'Satisfy', cursive;
			}

			 #test img {
				 display: inline;
				 vertical-align: text-top;
				 width: 100px;
				 height: 100px;
				 /* for the following image and description */
				 display: flex;
				 flex-direction: row;
				 align-content: center;
				 align-items: center;
			}

		

			#sidebar {
				flex: 1 0 20%;
				/* background-color: green; */
				text-align: center;
				line-height: 90%;

				/* for sidebar contents */
				display: flex;
				flex-direction: column;
			}


			#js {
				flex: 1 0 33.33333%;
				/* background-color: red; */
				background-color: #db6525;
				border: 20px solid #00B2AC;
				padding: 10px;
			}

			#js h1 {
				font-size: 50px;
			}

			#forms {
			  flex: 1 0 33.33333%;
				/* background-color: gray; */
				background-color: #db6525;
				border: 20px solid #00B2AC;
				padding: 10px;
			}

			#forms h1 {
				font-size: 50px;
			}

			#sites {
			  flex: 1 0 33.33333%;
				/* background-color: Chartreuse; */
				background-color: #db6525;
			  border: 20px solid #00B2AC;
			  padding: 10px;
			}

			#sites h1 {
				font-size: 50px;
			}

			.circles {
				flex: 0 0 5%;

				/* for circles within */
			  display: flex;
			  justify-content: center;
			  align-items: center;   
			  width: 100%;
			}

			.circle1 {
				flex: 0 1 33.33333%;
				display: flex;
				justify-content: center;

			}


			.circle1 h1{
		    font-size: 12px;
		    color: #fff !important;
		    background-color: #db6525;
        border: 4px solid #00B2AC;
				border-radius:50%;
				height: 100px;
        width: 100px;
				text-align: center;
				vertical-align: middle;
			}

			.circle2 {
				flex: 0 1 33.33333%;
				display: flex;
				justify-content: center;
			}

			.circle2 h1 {
    		font-size: 12px;
    		color: #fff !important;
    		background-color: #db6525;
        border: 4px solid #00B2AC;
				border-radius:50%;
				height: 100px;
        width: 100px;
    		text-align: center;
				vertical-align: middle;
			}

			.circle3 {
				flex: 0 1 33.33333%;
				display: flex;
				justify-content: center;
			}

			.circle3 h1 {
    		font-size: 12px;
    		color: #fff !important;
    	  background-color: #db6525;
        border: 4px solid #00B2AC;
				border-radius:50%;
				height: 100px;
        width: 100px;
        text-align: center;
				vertical-align: middle;
			}

		<main>

			<section id="content">
				<article id="header">

					<section id="test">
						<h1>My Website</h1>
					</section>

				</article>

				<article id="description">

					<img src='images/profilePic.png' />
					
					<p></p>


				</article>

					<article class="circles">
						<div class="circle1">
							<h1>Twitter</h1>
						</div>
						<div class="circle2">
								<h1>Blog</h1>
						</div>
						<div class="circle3">
								<h1>Contact</h1>
						</div>
				</article>

			</section>

			<section id="sidebar">
				<article id="js">
					<h1>Javascript</h1>
					<p>Mini JS Projects</p>
					<p class="subtitle">Work in progress
				</article>
				<article id="forms">
					<h1>Free Forms</h1>
					<p>Feel free to download the forms</p>
				</article>
				<article id="sites">
					<h1>Portfolio</h1>
					<p>Combination of previous work and additional sites</p>
				</article>
			</section>

		</main>

Answer 1

现在的问题是如何拥有一个完美的响应式CSS 正方形？因为当你有一个正方形时，你很容易就会有一个带有 border-radius: 50% 的圆形。 。现在你可以在SO中找到这么多的解决方案。这是nice solution与 flex 盒元素。

 

.flex-container {
    padding: 0;
    margin: 0;
    display: flex;
  
}
.flex-item {
    background: tomato;
    margin: 5px;
    color: white;
    flex: 1 0 auto;
    border-radius: 50%;    
}
.flex-item:before {
    content:'';
    float:left;
    padding-top:100%;
}

<div class="flex-container">
  <div class="flex-item ">
  </div>
  <div class="flex-item ">
  </div>
  <div class="flex-item ">
  </div>
</div>