移动上上下下的引导旋转木马箭头垂直移动

Question

我有带标题的引导旋转木马，但没有什么不同的风格，实际上，图像是左(Col 6)，标题是右(Col 6)。请参阅HTML和SCSS代码以获得更好的理解。可视化示例- https://i.stack.imgur.com/bkJaM.png

问题是什么？在移动(用于图像和标题的col-md-12 )上，当我调整浏览器窗口的大小时，箭头向上和向下垂直移动，但无论屏幕大小调整多大(移动版本)，始终应该从顶部移动30%。

顶: 30%不好，顶: xx px也不好，换位:翻译(- 30% )不好，但顶: 0；毛利顶:30%是完美的。我想还有更好的方法吗？

​

#upgr-carousel-generic {
	background-color: #f3f3f3;
	
	.carousel-caption {
		color: #052453;
		text-align: left;
		position: relative;
		left: 0;
		top: 0;
		right: 14%;
		padding: 45px 90px 45px 27px;
		text-shadow: none;
		h3 {
			margin-bottom: 3px;
		}
	}
	.carousel-control {
		background: rgba(0, 0, 0, 0.5);
		text-shadow: none;
	    width: 65px;
	    height: 65px;
	    position: absolute;
	    opacity: 1;
	    top: 44%;
	    &:hover, 
	    &:focus {
	    	background: rgba(0, 0, 0, 0.5);
	    };
	    [class^="icon-"] {
	    	font-size: 65px;
	    }
	}
}

 @media (min-width: $screen-lg-min) {
 	#upgr-carousel-generic .item .image img {
 		width: 100%;
 		min-height: 100%;
 	}
 }

 @media (max-width: $screen-md-max) {
 	#upgr-carousel-generic {
 		.carousel-caption {
 			padding: 28px 8.6px;
 		}
 		.carousel-control {
 		width: 34px;
 		height: 34px;
 		top: 0;
 		margin-top: 30%;
 		[class^="icon-"] {
 			font-size: 34px;
 		}
 	  }
 	}
 }

<div class="slider">
  <div class="container">
    <div class="row gridsystem">
      <div class="col-lg-12 col-md-12 col-sm-12">
        <div id="upgr-carousel-generic" class="carousel slide" data-ride="carousel" data-interval="false">
          <!-- Wrapper for slides -->
          <div class="carousel-inner" role="listbox">
            <div class="item active">
              <div class="row">
                <div class="col-lg-6 col-md-12 col-sm-12 col-xs-12 image">
                  <img src="../src/assets/images/_dev/carousel_image_1.jpg" class="img-responsive" alt="Carousel Image 1">
                </div>
                <div class="col-lg-6 col-md-12 col-sm-12 col-xs-12 text-left">
                  <div class="carousel-caption">
                    <h3 class="title">King gegen King</h3>
                    <p class="description">Auf ihrer Nordamerika-Reise 1939 treffen König Gorge VI. und seine Gemahlin, Queen Elizabeth, auf den kanadischen Premierminister William Lyon Mackenzie King. Das dabei entstandene Foto wurde später auf einem Wahlplakat des Premierministers verwender, König Gorg VI. jedoch daraus wegretuschiert. Ziel der Nordamerika-Reise war die Stärkung der Monarchie im Dominion Kanada, was der Intention Mackenzie Kings offenbar zuwiderlief.</p>
                  </div>
                </div>  
              </div> 
            </div>
            <div class="item">
              <div class="row">
                <div class="col-lg-6 col-md-12 col-sm-12 col-xs-12 image">
                  <img src="../src/assets/images/_dev/carousel_image_2.jpg" class="img-responsive" alt="Carousel Image 2">
                </div>
                <div class="col-lg-6 col-md-12 col-sm-12 col-xs-12 text-left">
                  <div class="carousel-caption">
                    <h3 class="title">King gegen King</h3>
                    <p class="description">Auf ihrer Nordamerika-Reise 1939 treffen König Gorge VI. und seine Gemahlin, Queen Elizabeth, auf den kanadischen Premierminister William Lyon Mackenzie King. Das dabei entstandene Foto wurde später auf einem Wahlplakat des Premierministers verwender, König Gorg VI. jedoch daraus wegretuschiert. Ziel der Nordamerika-Reise war die Stärkung der Monarchie im Dominion Kanada, was der Intention Mackenzie Kings offenbar zuwiderlief.</p>
                  </div>
                </div>  
              </div> 
            </div>
          </div>
          <!-- Controls -->
          <a class="left carousel-control" title="Previous" href="#upgr-carousel-generic" role="button" data-slide="prev">
            <span class="icon-ic-arrow-left"></span>
            <span class="sr-only">Previous</span>
          </a>
          <a class="right carousel-control" title="Next" href="#upgr-carousel-generic" role="button" data-slide="next">
            <span class="icon-ic-arrow-right"></span>
            <span class="sr-only">Next</span>
          </a>
        </div>
      </div>  
    </div>  
  </div>  
</div>  

​

Answer 1

首先，您需要将它添加到您的<head>中

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

然后您可以使用vw或vh：

Unit    Description
em      Relative to the font-size of the element (2em means 2 times the size of the current font) Try it
ex      Relative to the x-height of the current font (rarely used) Try it
ch      Relative to width of the "0" (zero)
rem     Relative to font-size of the root element
vw      Relative to 1% of the width of the viewport* Try it
vh      Relative to 1% of the height of the viewport* Try it
vmin    Relative to 1% of viewports* smaller dimension Try it
vmax    Relative to 1% of viewports* larger dimension Try it
%

有关单元的更多信息，请查看以下链接：units.asp

什么是视口？

视图是用户在网页上的可见区域。

视口随设备而异，手机上的视口会比电脑屏幕上的小。

在平板电脑和手机之前，网页只是为电脑屏幕设计的，网页的静态设计和固定大小是很常见的。

有关更多信息，您可以在这里阅读：viewport.asp