Question

这是我的圆形进度条代码。但是，当我调整窗口大小时，圆圈与您在输出屏幕截图中一样位于底部。我想在窗口大小为640px时固定3个圆的位置。我尝试在CSS中添加一些媒体查询，但失败了。如何确定自己的位置？谁能帮我？我知道有关媒体查询的信息，但是我无法解决此问题。

.col-md-4{
       padding-top: 45px ;
	  
   }
  .cdev {
  position: relative;
  height: 100px;
  width: 100px;
  margin: auto;
}
 
.cdev div {
  position: absolute;
  height: 100px;
  width: 100px;
  border-radius: 50%;
}
 
.cdev div span {
  position: absolute;
  font-family: Arial;
  font-size: 25px;
  line-height: 75px;
  height: 75px;
  width: 75px;
  left: 12.5px;
  top: 12.5px;
  text-align: center;
  border-radius: 50%;
  background-color: white;
}
 
.cdev .background { background-color: #b3cef6; }
 
.cdev .rotate {
  clip: rect(0 50px 100px 0);
  background-color: #4b86db;
}
 
.cdev .left {
  clip: rect(0 50px 100px 0);
  opacity: 1;
  background-color: #b3cef6;
}
 
.cdev .right {
  clip: rect(0 50px 100px 0);
  transform: rotate(180deg);
  opacity: 0;
  background-color: #4b86db;
}
 
@keyframes
toggle {  0% {
 opacity: 0;
}
 100% {
 opacity: 1;
}
}
  @media only screen and (max-width: 992px) {
    
	#skill2 .card {width:500px;height:330px;background:red;}
}
 @media only screen and (max-width: 768px)
 { 
 #skill2 .card .col-md-4
	 {
       padding-top: 65px ;
	   position:relative;
	   margin-left:30px;
	  
   }
	 
 }
  @media only screen and (max-width: 640px)
 {  
 #skill2 .card {width:300px;}

<html>
<body>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous">
 <!--jQuery library--> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<!--Latest compiled and minified JavaScript--> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<div id="skill">
 <h3><center>Skills</center></h3>
<div class="row my-4">
    	<div class="col">
        	<div class="container-fluid">
          		<div class="row">			        
              
             <div class="col-sm d-flex" id="skill2">
			            <div class="card card-body flex-fill">
				            <div class="card-header"><center>Traings & Online Courses</center></div>
					        <div class="card-content">
					  
 
  <div class="row">
  <div class="col-sm-3 col-md-4 ">
   <div class="cdev" data-percent="100" data-duration="1000" data-color="#bdc3c7,#26A69A"></div>
</div>
<div class="col-sm-3 col-md-4">
   <div class="cdev" data-percent="70" data-duration="1000" data-color="#bdc3c7,#7f8c8d"></div>
</div>
<div class="col-sm-3 col-md-4">
   <div class="cdev" data-percent="65" data-duration="1000" data-color="#bdc3c7,#8e44ad"></div>
</div>
</div>
 
							</div>
				        </div>
			        </div>
			    </div>
        	</div>
    	</div>
    </div>
</div>
</body>

    
</html>

预先感谢：）

Answer 1

您只需在页面中</head>标记之前添加这一行。

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

如何通过媒体查询固定循环进度条的位置？

1 个答案: