Question

HY！我想在用户更改大小时调整我的html和css页面大小浏览器的窗口，我想让页面适应不同的分辨率。我在这个网站上尝试了一些答案，但它们对我不起作用。我也尝试使用媒体查询

这是css和html

* {
	margin: 0;
	padding: 0;
}
body{
	font-family: 'Francois One', Arial, Helvetica, sans-serif;
	color: white;
	text-align:center;
	background:black;
	
}
.corpo{
	margin-top: 5px;
	margin-left:  400px;
	margin-right: 250px;
	float:middle;
	
}
header{
	margin: 40px 0;
}
.menu li{
	display: block;
	float: left;
	width: 125px;
	height: 50px;
	line-height: 50px;
	text-align: center;
	color: #2C3E50;
	border-right: 1px solid #2C3E50;
	background: -webkit-linear-gradient(top, #FFFF00 50%, #FFFF00 51%, #f6f6f6 100%);
	background: -moz-linear-gradient(top, #FFFF00 50%, #FFFF00 51%, #f6f6f6 100%);
	background: -o-linear-gradient(top, #FFFF00 50%, #FFFF00 51%, #f6f6f6 100%);
	background: -ms-linear-gradient(top, #FFFF00 50%, #FFFF00 51%, #f6f6f6 100%);
	border-color:black;
	opacity:1;
	position:relative;
}
.menu li:hover{
	cursor: pointer;
	background: -webkit-radial-gradient(center, ellipse cover, #ffffff 0%, #e5e5e5 100%);
	background: -moz-radial-gradient(center, ellipse cover, #ffffff 0%, #e5e5e5 100%);
	background: -o-radial-gradient(center, ellipse cover, #ffffff 0%, #e5e5e5 100%);
	background: -ms-radial-gradient(center, ellipse cover, #ffffff 0%, #e5e5e5 100%);
	color: slateGrey;
	border-color:black;
	position:relative;
}
.primo{
	border-top-left-radius: 10px;
	border-bottom-left-radius: 10px;
}
.ultimo{
	border-top-right-radius: 10px;
	border-bottom-right-radius: 10px;
}
.sub-menu{
	visibility: hidden;
}
.menu li:hover .sub-menu{
	visibility: visible;
}
.sub-menu li{
	border-top: 1px dotted #2C3E50;
}
.sub-menu li:hover{
	width: 145px;
	background: -webkit-radial-gradient(center, ellipse cover, #f7fbfc 10%, #add9e4 100%);
	background: -moz-radial-gradient(center, ellipse cover, #f7fbfc 10%, #add9e4 100%);
	background: -o-radial-gradient(center, ellipse cover, #f7fbfc 10%, #add9e4 100%);
	background: -ms-radial-gradient(center, ellipse cover, #f7fbfc 10%, #add9e4 100%);
	transition: all 0.1s ease 0s;
	-webkit-transition: all 0.1s ease 0s;
	-moz-transition: all 0.1s ease 0s;
	-o-transition: all 0.1s ease 0s;
	-ms-transition: all 0.1s ease 0s;
}
.ultimo-sub{
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
}

.menu li a:link{
color:black;
text-decoration:none;
}

.menu li a:hover{
color:black;
text-decoration:none;
}

.menu li a:active{
color:black;
text-decoration:none;
}

.menu li a:visited{
color:black;
text-decoration:none;
}

p{
	color: #FFFF00;
	margin: 0px 380px 0px 400px;
	font-size:150%;
	text-shadow: 2px 0 0 #000, 0 -1px 0 #000, 0 2px 0 #000, -1px 0 0 #000;               //text-shadow: 2px 0 0 #000, 0 -1px 0 #000, 0 2px 0 #000, -1px 0 0 #000;
	
}

.Paragrafo{
	text-shadow:1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000, -1px 0 0 #000;
	size:25px;
}

.Paragrafo  a:link{
color:yellow;
}

.Paragrafo a:hover{
color:yellow;
}

.Paragrafo  a:active{
color:yellow;
}

.Paragrafo  a:visited{
color:yellow;
}

h1{
	color:blue;
	
}

span{
	color: #FFFF00;
	margin: 0px 380px 0px 400px;
	font-size:150%;
	text-shadow: 2px 0 0 #000, 0 -1px 0 #000, 0 2px 0 #000, -1px 0 0 #000;               //text-shadow: 2px 0 0 #000, 0 -1px 0 #000, 0 2px 0 #000, -1px 0 0 #000;
	
}

.video{
	position: 404 532;
}

<!doctype html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Menù a tendina in HTML e CSS</title>
		<link rel="stylesheet" type="text/css" href="new 1(!).css">
		<style> h1 {color:yellow;
		            float:center;
		           } </style>		   
	</head>			   
	 <body>
	
		
		 <header>
				<h1>La Grande Guerra</h1>
		 </header>
		<div class="corpo">
			<ul class="menu">
				<li class="primo"><a href="SitoHome2(!).html">Home</a></li>
				<li><a href="1914.html">1914</a>
				</li>
				<li><a href="1915.html">1915</a>
					<ul class="sub-menu">
						<li><a href="1915-1.html">Da 01 a 04</a></li>
						<li><a href="1915-2.html">Da 05 a 08</a></li>
						<li class="ultimo-sub"><a href="1915-3.html">Da 09 a 12</a></li>
					</ul>
				</li>
				<li><a href="1916.html">1916</a>
					<ul class="sub-menu">
						<li><a href="1916-1.html">Da 01 a 04</a></li>
						<li><a href="1916-2.html">Da 05 a 08</a></li>
						<li class="ultimo-sub"><a href="1916-3.html">Da 09 a 12</a></li>
					</ul>
				</li>
				<li><a href="1917.html">1917</a>
					<ul class="sub-menu">
						<li><a href="1917-1.html">Da 01 a 04</a></li>
						<li><a href="1917-2.html">Da 05 a 08</a></li>
						<li class="ultimo-sub"><a href="1917-3.html">Da 09 a 12</a></li>
					</ul>
			    </li>
				<li><a href="1918.html">1918</a>
					<ul class="sub-menu">
						<li class="ultimo-sub"><a href="1918-1.html">Eventi</a></li>
				    </ul>
				</li>
				<li><a href="#">Armistizio</a>
					<ul class="sub-menu">
						<li class="ultimo-sub"><a href="#">Conseguenze</a></li>
				    </ul>
				</li>
				<li><a href="Galleria.html">Galleria</a>
					<ul class="sub-menu">
				    </ul>
				</li>
				<li class="ultimo"><a href="Fonti.html">Fonti</A></li>
				
			</ul>
		</div> <BR> <br> <br> <br> <br> <br> <br> 
		<div class=Paragrafi>
		<p>
		
          TEXT
          
		<object class=video width="420" height="315"data="https://www.youtube.com/embed/6FgaL0xIazk?list=PLB2vhKMBjSxOb_127vxjaRRC7yu2TJlJX"
		float=left align=right>
        </object>
		</p>
          
		<p align=left>
          
          TEXT
   
		</p> 
		 

		
  </body>
</html>

Answer 1

您缺少视口元标记。

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

现在它应该使用媒体查询。您可以查看此网址以获取更多详细信息：http://www.w3schools.com/css/css_rwd_mediaqueries.asp

Answer 2

在你的css表中添加它

session[:locale]

Answer 3

您错过了HTML中的viewport tag：

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

我建议使用像Bootstrap或Foundation这样的前端框架来处理这个问题，并为任何设备准备好您的网站。

适应HTML网站

3 个答案: