重新调整HTML网站的大小以适合不同的屏幕分辨率大小（学校分配）
[英]Re size HTML website for different screen resolution sizes (School assignment)
问题描述
this is my first post on this site so I'll try doing things right but sorry if I format things wrong or do anything stupid. 
这是我在该网站上的第一篇文章，所以我会尝试做正确的事，但是如果我格式化错误或做任何愚蠢的事，对不起。
I'm doing an assignment for school due on Thursday June 2nd so I'm really looking for a quick answer as kind of desperate. 我正在为6月2日（星期四）到期的学校做作业，所以我真的在急切地寻找一个快速的答案。 I need my website to be able to re size for different screen resolutions, I've looked at other answers on this site but most are in reference to making mobile websites. 我需要我的网站能够调整大小以适合不同的屏幕分辨率，我已经查看了该网站上的其他答案，但是大多数答案都与制作移动网站有关。 I've read about the media queries rule but everything I read about it is just about making mobile websites, but that looks like a good solution. 我已经阅读了有关媒体查询规则的信息，但是我所读到的所有内容仅与制作移动网站有关，但这看起来是一个不错的解决方案。 Really appreciate any help I can get :), here's my code for anyone to look at: 非常感谢我能得到的任何帮助:)，这是我的代码供任何人查看：
HTML: HTML：
<!DOCTYPE html>
<html>
<link href='https://fonts.googleapis.com/css?family=Raleway:300' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Roboto:300' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.1.3/material.indigo-pink.min.css">
<head>
<meta charset="utf-8">
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ann Mockett</title>
<script src="code.js" type="text/javascript" charset="utf-8"></script>
<link href="style.css" rel="stylesheet" type="text/css">
<!__NEEDS DESCRIPTION__>
<meta name="description" content="Description of Site">
<!__NEEDS KEYWORDS__>
<meta name="keywords" content="Selection of Search Terms">
</head>
<body>
<nav>
<ul>
<li><div id="Ann-Nav"><a class="active" href="index.html">Ann Mockett</a></div></li>
<li class="dropdown">
<a href="work.html" class="dropbtn">Work</a>
<div class="dropdown-content">
<a href="#">TV</a>
<a href="#">Film</a>
<a href="#">Other</a>
</div></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</nav>
<div class="bodyimg">
<img src="images/placeholder.png">
</div>
<div class="box"><h3>TV Shows</h3><img src="images/placeholder.png"></div>
<div class="box"><h3>Movies</h3><img src="images/placeholder.png"></div>
<div class="box"><h3>Other Projects</h3><img src="images/placeholder.png"></div>
</body>
CSS: CSS：
html{
background-color: #fafafa;
}
h3 {
margin: 0;
font-size: 25px;
font-family: font-family: 'Roboto', sans-serif;
}
body{
width: auto;
margin: auto;
text-align: center;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #009688;
box-shadow: 0px 3px 9px 0px rgba(0,0,0,0.67);
}
li {
float: left;
}
li a, .dropbtn {
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: #004D40;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: black;
background-color: #80CBC4;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #4DB6AC;
}
.dropdown:hover .dropdown-content {
display: block;
}
#Ann-Nav {
font-family: 'Raleway', sans-serif;
font-size: 30px;
}
.bodyimg img{
height: 390px;
width: 100%;
display: block;
margin-bottom: 16px;
}
.box {
background-color: #A7FFEB;
height: 230px;
width: 32%;
float: left;
margin-left: 15px;
margin-bottom: 12px;
display: block;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.box img{
height: 175px;
width: 95%;
display: block;
margin: auto;
position: relative;
top: 50%;
transform: translateY(-63%);
}
Thanks for any help. 谢谢你的帮助。
5 个解决方案
解决方案1
1 2016-05-30 07:10:12
You might want to use media queries. 您可能要使用媒体查询。
@media screen and (max-width: 480px) {
body {
background-color: lightgreen;
}
}
As for this example, when the screen width gets smaller than 480px, the background-color changes to lightgreen. 对于此示例，当屏幕宽度小于480px时，背景颜色变为浅绿色。 You can find more on W3Schools ! 您可以在W3Schools上找到更多信息！
You could also use bootstrap for a responsive design and pre-made CSS. 您还可以使用引导程序进行响应式设计和预制CSS。 It's less work and a great solution. 减少了工作量，却是一个很好的解决方案。
解决方案2
0 2016-05-30 07:01:48
既然您在这里提出了硬件问题，我想在一行中回复：使用bootstrap
解决方案3
0 2016-05-30 07:10:23
As Nitsan, Tawfiq, and Danooned said, you should look into media queries. 正如Nitsan，Tawfiq和Danooned所说，您应该调查媒体查询。 They allow you to design certain aspects of your page differently for different device specifications. 它们使您可以针对不同的设备规格不同地设计页面的某些方面。 Here's a link to get you started: 这是让您入门的链接：
https://developers.google.com/web/fundamentals/design-and-ui/responsive/fundamentals/use-media-queries?hl=en https://developers.google.com/web/fundamentals/design-and-ui/sensitive/fundamentals/use-media-queries?hl=zh-CN
** If your teacher/professor allows you to use bootstrap, I would definitely start there, as it does most of the heavy lifting for you. **如果您的老师/教授允许您使用引导程序，那么我肯定会从这里开始，因为它为您完成了许多繁重的工作。
解决方案4
0 2016-05-30 08:05:21
I hope this can be an answer for what you need. 我希望这可以满足您的需求。 I use it to create html template on just 20 minutes from zero to about 5 responsive pages. 我用它在从零到大约5个响应页面的短短20分钟内创建html模板。 http://tools.qixstudio.com/reycss.css http://tools.qixstudio.com/reycss.css
example of web : http://www.supersukses.net/ , http://microsite.detik.com/display/kabar-dpd/ , http://microsite.detik.com/display/preview-telkom/ . 网络示例： http : //www.supersukses.net/，http : //microsite.detik.com/display/kabar-dpd/，http : //microsite.detik.com/display/preview-telkom/ 。
It's not a perfect css yet, but hopely can be a shortcut to build your responsive website. 它不是一个完美的CSS，但希望可以成为构建响应式网站的捷径。
解决方案5
0 2016-05-30 09:36:09
Below are the media queries for all devices. 以下是所有设备的媒体查询 。 You can use them to make your website responsive. 您可以使用它们使您的网站具有响应能力。
/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* STYLES GO HERE */
}
/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* STYLES GO HERE */
}
/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* STYLES GO HERE */
}
/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* STYLES GO HERE */
}
/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* STYLES GO HERE */
}
/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* STYLES GO HERE */
}
/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
/* STYLES GO HERE */
}
/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
/* STYLES GO HERE */
}
/* iPhone 5 (portrait & landscape)----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px) {
/* STYLES GO HERE */
}
/* iPhone 5 (landscape)----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : landscape) {
/* STYLES GO HERE */
}
/* iPhone 5 (portrait)----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : portrait) {
/* STYLES GO HERE */
}
Also You can visit https://css-tricks.com/css-media-queries/ 您也可以访问https://css-tricks.com/css-media-queries/
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.