Re size HTML website for different screen resolution sizes (School assignment)
Question
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. 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:
<!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:
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 answers
solution1
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. You can find more on W3Schools !
You could also use bootstrap for a responsive design and pre-made CSS. It's less work and a great solution.
solution2
0 2016-05-30 07:01:48
既然您在这里提出了硬件问题，我想在一行中回复：使用bootstrap
solution3
0 2016-05-30 07:10:23
As Nitsan, Tawfiq, and Danooned said, you should look into media queries. They allow you to design certain aspects of your page differently for different device specifications. Here's a link to get you started:
** If your teacher/professor allows you to use bootstrap, I would definitely start there, as it does most of the heavy lifting for you.
solution4
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. 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/ .
It's not a perfect css yet, but hopely can be a shortcut to build your responsive website.
solution5
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/
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.