我正在尝试制作自适应的嵌入式youtube视频，但我不了解@media查询的工作原理，对我来说，它们不起作用。
首先，我尝试将其缩小到平板电脑上，但是它没有任何效果:/
我使用的代码:
@media only screen and (min-width:321px) and (max-width:768px) {
.video {width: 40% !important; }
.vid {position: absolute; top: 20%;}
}
我希望视频变小以适合标题的左侧和“最新更新:”下的内容
图片:
(它不起作用)
http://m.imgur.com/3ydAlCv
http://m.imgur.com/AdOmoEv
同样在手机上，我想使youtube视频位于标题下方，并使标题和视频居中，但是那有些困难。.我什至无法制作这个小东西。
因此，我只想在平板电脑上调整视频大小，以使其适合“最新更新:”和标题“全局角色扮演”左侧的内容。
我的HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--<meta name="viewport" content="width=device-width, initial-scale=1">-->
<meta name="viewport" content="width=device-width, user-scalable=yes">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title>Homepage | Overworld RP Devs</title>
<!-- Bootstrap core CSS -->
<link href="/css/bootstrap.min.css" rel="stylesheet">
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<link href="/css/ie10-viewport-bug-workaround.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/maintemplate.css" rel="stylesheet">
<!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
<!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<script src="../../assets/js/ie-emulation-modes-warning.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/index.html">Overworld Roleplay</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="front container">
<h1 class="text-primary" id="title" >Overworld Roleplay</h1>
<h4>Development Website</h4>
</div><!-- /.container -->
<!-- <div class="videoWrapperOuter">
<div class="videoWrapperInner">
<iframe src="//www.youtube.com/embed/C6-TWRn0k4I"
frameborder="0" allowfullscreen></iframe>
</div> -->
<div class="video container">
<div class="col-md-8">
<div class="vid">
<iframe src="//www.youtube.com/embed/ac7KhViaVqc" frameborder="0" allowfullscreen></iframe>
</div><!--./vid -->
<h2 class="text-info" id="last" >Last Update:</h2>
</div><!--.col -->
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
<script src="../../dist/js/bootstrap.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
<script src="/js/collapse.js"></script>
<script src="/js/transition.js"></script>
<script src="/js/tooltip.js"></script>
<script src="/js/tab.js"></script>
<script src="/js/scrollspy.js"></script>
<script src="/js/popover.js"></script>
<script src="/js/npm.js"></script>
<script src="/js/modal.js"></script>
<script src="/js/dropdown.js"></script>
<script src="/js/carrousel.js"></script>
<script src="/js/button.js"></script>
<script src="/js/alert.js"></script>
<script src="/js/affix.js"></script>
</body>
</html>
body {
padding-top: 50px;
}
.starter-template {
padding: 40px 15px;
text-align: center;
}
html, body {
background-color: black;
background: url(/images/bg.jpg);
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-repeat: no-repeat;
/*background-position: center;*/
height: 100%;
margin: 0;
}
.front {
position: absolute;
left: 54%;
top: 30%;
width: 46%;
}
#title {
font-size: 60px;
word-wrap: normal;
}
.vid {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px; height: 0; overflow: hidden;
}
.vid iframe,
.vid object,
.vid embed {
position: absolute;
top: 27%;
left: 3%;
width: 77%;
height: 68%;
border: 0;
}
.navbar {
background-color: rgba(0, 0, 0, 0.6);
background: rgba(0, 0, 0, 0.6);
border-color: rgba(0, 0, 0, 0.4);
}
.nav.navbar-nav.navbar-right li a {
color: white;
}
.navbar-default .navbar-brand {
color: white;
}
.navbar-nav>.active>a, .navbar-nav>.active>a:hover, .navbar-nav>.active>a:focus {
color:black;
}
#last {
position: absolute;
left: 5%;
top: 15%;
}
.video {
position: absolute;
left: 3%;
}
@media only screen and (min-width:321px) and (max-width:768px) {
.video {width: 40% !important; }
.vid {position: absolute; top: 20%;}
}
最佳答案
假设您的.video是<iframe>，<embed>等，请尝试
.video {
max-width: 100%;
height: auto;
}
并将其放入具有以下样式的容器(div或section)中:
@media (max-width: 767px) {
.video_container {
width: 40%;
}
}
因此，例如在宽度小于767像素的视口中，容器将相对于其父容器获得40％的宽度，并且您的视频将在其中进行调整。我希望您正在采用这种方法。标题中的问题确实有些广泛。也正如其他人指出的那样，附加代码永远不会伤害:)
关于android - @media查询如何工作？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/42909082/