html - 移动设备上的 Bootstrap 旋转木马箭头垂直上下移动

Question

我有带标题的 Bootstrap 轮播，但风格几乎没有什么不同，实际上，图像在左边(col-lg-6)，标题在右边(col-lg-6)......为了更好地理解，请参阅 HTML 和 SCSS 代码。视觉示例 - /image/bkJaM.png

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

top: 30% 不好，top: xx px 也不好，transofm: translatey(-30%) 不好，但是 top: 0; margin-top: 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
%

有关单位的更多信息，请查看此链接:https://www.w3schools.com/cssref/css_units.asp

什么是视口(viewport)？

视口(viewport)是网页的用户可见区域。

视口(viewport)因设备而异，在手机上会比在电脑屏幕上小。

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

有关更多信息，您可以在此处阅读:https://www.w3schools.com/css/css_rwd_viewport.asp