时间戳

首页 > 解决方案 > 使用媒体查询更改站点宽度

html - 使用媒体查询更改站点宽度

问题描述

我急需帮助。我非常接近完成我的期末考试，但我不太了解媒体查询。我必须“包含一个媒体查询以更改页面以适应平板电脑和移动查询。您将缩小页面的宽度以适应。您还将关闭您选择的图像的可见性。”

他没有很好地了解它，我一直在困惑地搜索网站。现在我不确定要使用什么尺寸，或者我是否需要为手机和平板电脑编写一个全新的布局。我只是需要一些指导。

不确定是否需要代码，但我会包括一页和 css 以防万一：

.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}

#nav {
   float: right;
   width: 500px;
   height: 700px;
   background-color: #6C8822;
   color: black;
   padding-left: 10px;
   padding-top: 10px;
   margin-right: 50px;
   margin-bottom: 0px;
   text-align: center;
}

#links {
	margin-top: 20px;
}

a {
	text-decoration: none;
	color: white;
	font-size: 35px;
	margin-top: 70px;

}

a:hover {
	color: #645399;
	
}

#linkborder1 {
	border: 2px dotted white;
	padding: 5px;
	padding-left: 10px;
	padding-right: 10px;
}

#linkborder2 {
	border: 2px dotted white;
	padding: 5px;
	padding-left: 34px;
	padding-right: 34px;
}

#linkborder1:hover {
	border-color: #645399;
}

#linkborder2:hover {
	border-color: #645399;
}

#header {
	text-align: center;
	margin-bottom: 50px;
	background-color: #6C8822;
	color: white;
	font-size: 50px;
	font-family: Comic San MS;
}

body {
	background-image: url("images/bg1.jpg");
	background-repeat: repeat;
	background-size: cover;
	background-attachment: fixed;
	height: 100%;
    overflow: auto;
}

html {
	overflow: hidden;
    height: 100%;
}

img {
	margin-left: 25px;
	margin-top: 25px;
	margin-right: 25px;
}

p {
	font-size: 30px;
	font-family: Comic Sans MS;
	display: inline-block;
	margin: 15px;
	padding: 10px;
	background-color: #CCD994;
}

#textbio {
	width: 100px;
	height: 50px;
	margin: 15px;
	padding: 10px;
}

#imagemap {
	margin-left: 80px;
}

video {
	margin-top: 50px;
	margin-left: 105px;
	margin-bottom: 25px;
	width: 1280px;
	height: 720;
}


#imagemap, #vid {
	display : inline;
	position: relative;
    left:50px;
}

caption {
	font-size: 24px;
}

th {
	background-color: #CCD994;
}

td {
	height: 50px;
	border-bottom: 1.5px dashed;
	width: 300px;
}

tfoot {
	background-color: gray;
}

table {
	table-layout: auto;
	width: 15%;
	float: right;
	margin-bottom: 10px;
	background-color: #6C8822;
	position: relative; 
	margin: -500px;
	margin-top: 480px;
}

div.fixed {
  position: fixed;
  bottom: 0;
  right: 0;
z-index: -1
}

#pics {
	margin-left: 250px;
	padding: 15px;
	margin-bottom: 100px;
}

#table {
	float: right;
	margin-right: 50px;
	width: 600px;
	height: 700px;
	font-size: 20px;
}

#form {
	float: center;
	background-color: #6C8822;
	margin: 15px;
	margin-left: 500px;
	width: 600px;
	font-size: 36px;
	margin-bottom: 100px;
}

input {
	height: 30px;
	font-size: 20px;
}

select {
	font-size: 36px;
}
<!Doctype HTML>
<html>

<head>
	<title>Page 2</title>
	<link rel="stylesheet" href="finalcss.css">
</head>


<div id="header" class="center">
	<h1>Final Project</h1>
</div>

<div id="nav">
	<img src="images/me.png" alt="Me in Animal Crossing" width="350" height="300">
		<div class="textbio">
			<p>Hey I'm Jay, this is my final project! It's not much but I worked hard on it, hope you enjoy!!</p>
		</div>

		<div id="links">
			<a id="linkborder1" href="final.html">Home</a>
			<br>
			<br>
			<a id="linkborder2" href="final2.html">P2</a>
			<br>
			<br>
		</div>
</div>

<div id="body">
	<div id="pics">
		<img src="images/padme.png" alt="" width="450px" height="450px">
		<img src="images/sqs.png" alt="" width="450px" height="450px">
		<br>
		<img src="images/reese.jpg" alt="" width="450px" height="450px">
		<img src="images/lotus.png" alt="" width="450px" height="450px">
	</div>
</div>
	
<div id="table" class="fixed">
<table class="center">
		<Caption><b>Commission</b></Caption>
		
		<thead align="center">
		<th colspan="5"><b>Type</b></th>
		<th><b>Price Range</b></th>
		</thead>
		
		<tbody align="center">
		<tr>
			<td colspan="5">Icon</td>
			<td>$5-$15</td>
		</tr>
		
		<tr>
			<td colspan="5">Half-Body</td>
			<td>3</td>
		</tr>
		
		<tr>
			<td colspan="5">Full-Body</td>
			<td>$5-$25</td>
		</tr>
		
		</tbody>
</table>
</div>
	
<div id="form">
<Caption><b> Contact Form</b></Caption>
<table>
		<thead align="center">
		
		</thead>
		
		<tbody align="center">
				<br>
				<br>
		<fieldset>
			<legend></legend>
				Name: <input type="text" name="name" size="40">
				<br>
				<br>
				Address Line 1: <input type="text" name="addressline1" size="40">
				<br>
				<br>
				Address Line 2: <input type="text" name="addressline2" size="40">
				<br>
				<br>
				City: <input type="text" name="city" size="40">
				<br>
				<br>
				State: <input type="text" name="state" size="40">
				<br>
				<br>
				Zip Code: <input type="text" name="zipcode" size="40">
				<br>
				<br>
				Email: <input type="text" name="email" size="40">
				<br>
				<br>
				Phone Number: <input type="text" name="phonenumber" size="40">
				<br>
				<br>
				<select name="Contact Times">
					<option value="morning">Morning</option>
					<option value="afternoon">Afternoon</option>
					<option value="evening">Evening</option>
				</select>
			
		</fieldset>

			
		</tbody>

	</table>
</div>

</html>

标签： htmlcssmedia-queries

解决方案

我可以看到你只是一个初学者，首先你需要使用视口代码来让页面在所有不同的设备上工作，视口代码如下。

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

在您的 CSS 文件中之后，您将需要使用媒体查询，这是一个断点，您会看到设计/网站/页面在某些浏览器宽度下不可用，此时您需要添加媒体查询，例如：

@media query and (max-width: 400px){ // here you should update the broken css code}

如果您不使用视口，您的查询将不起作用，您还需要添加<body></body>到代码中，现代浏览器不需要它，但您必须这样做，因为旧版浏览器无法理解您的代码和您的代码页面将被破坏且无法使用。

可以在下面找到更多信息：

媒体查询

另一个媒体查询源（CSS Tricks

HTML5 响应式网页 W3C

希望这有帮助

推荐阅读