使网站响应所有屏幕尺寸
Making a website responsive for all screen sizes
我试图在没有 Bootstrap 的情况下让我的网站响应，但是当我使用 @Media 查询标签时它不起作用 - 没有任何变化。
................................................ .....................
这是我的代码：
body {
font-family: "Oswald",Helvetica,Arial,sans-serif;
/* font-family: 'Roboto', sans-serif; */
/* overflow-y: hidden; */
/* background-image: url("https://preview.redd.it/qmfjuz883g7z.png?width=1024&s=c5e92c9c5e20b147ef13daf77eab47dae203496f"); */
background-color: #e5e5e5;
/* background-color: #222831; */
margin: 0px;
}
html {
scroll-behavior: smooth;
}
h1 {
margin: 0;
}
.Terms:hover {
font-weight: bold;
text-decoration: underline;
}
.Terms {
text-decoration: none;
color: white;
}
.SmallGamesLogoWhite:hover {
transform: scale(1.1);
}
.SocialMedia {
margin-top: 85px !important;
height: 60px !important;
}
.Company_Text_Info {
color: #fafafa;
width: 500px;
margin-top: 30px;
margin-left: 20px;
}
.EmailIcon_Link:hover {
text-decoration: underline;
font-weight: bold;
}
.EmailIcon_Link {
margin-left: 20px;
color: #fafafa;
text-decoration: none;
}
.EmailIcon_Image {
margin-top: 10px;
margin-left: 20px;
height: 20px;
}
.SmallGamesLogoWhite {
margin-top: 30px;
margin-left: 20px;
/* margin-right: 150px; */
height: 35px;
}
#footer {
background-color: #393e46;
height: 400px;
}
#logo {
padding: 20px 20px;
top:0;
left:0;
}
.SmallGameStudio_footer {
margin-top: 350px;
}
#video-content {
margin-top: 100px;
margin-bottom: 100px;
}
.video_h1 {
margin-top: 100px;
}
.video_p {
font-size: 15px;
width: 450px;
text-transform: uppercase;
}
.CenteredText{
margin-top: 35px;
color: white;
}
/* .CenteredText_Span{
color: white;
font-weight: bold;
} */
.NavbarLinks_Video{
margin-right: 450px;
position: absolute;
top: 0;
right: 0;
padding: 25px 25px;
text-decoration: none;
word-spacing: 30px;
font-size: 25px;
color: black !important;
}
::-moz-selection { /* Code for Firefox */
color: white;
background: #ffe4e4;
}
::selection {
color: white;
background: #ffe4e4;
}
.NavbarLinks_Games{
margin-right: 635px;
position: absolute;
top: 0;
right: 0;
padding: 25px 25px;
text-decoration: none;
word-spacing: 30px;
font-size: 25px;
color: black !important;
}
#LearnMore {
margin-top: 150px;
margin-bottom: 300px;
color: white;
}
.games_image:hover {
cursor: pointer;
transform: scale(1.1);
}
#games {
background-color: #393b44;
margin: 0;
}
.games_content_fig_desc {
color: white !important;
width: 250px;
margin-top: 15px;
}
.games_content {
display: flex;
flex-wrap:wrap;
}
.games_content_fig {
margin-left: 55px;
color: black;
color: #ffec00;
}
.download_button:hover {
transform: scale(1.1);
}
.download_button {
background-color: #ff7171; /* Default Website Color Scheme */
margin: 25px 55px;
border: none;
color: white;
padding: 15px 32px;
cursor: pointer;
text-align: center;
text-decoration: none;
border-radius: 5px;
font-size: 16px;
}
.games_image {
height: 200px;
margin: 25px 25px;
margin-bottom: 25px;
border-radius: 50px;
}
@media (max-width: 980px) {
.games_image {
height: 200px;
margin: 25px 25px;
margin-bottom: 25px;
border-radius: 50px;
}
}
#background_grass {
background-image: url("https://preview.redd.it/qmfjuz883g7z.png?width=1024&s=c5e92c9c5e20b147ef13daf77eab47dae203496f");
/* margin-top: 45px;
padding: 5px; */
height: 750px;
}
#LearnMore:hover{
color: white;
}
.Copyright_Text {
margin-bottom: 5px;
color: white;
}
.LearnButton:hover {
color: white;
background-color: #d9adad;
}
.LearnButton {
width: 150px;
}
.FooterLinks:hover {
font-weight: bold;
text-decoration: underline;
}
#FooterLinks {
word-spacing: 30px;
font-size: 35px;
padding-top: 50px;
}
.FooterLinks {
color: white;
text-decoration: none;
}
.NavbarLinks_Home{
margin-right: 800px;
position: absolute;
top: 0;
right: 0;
padding: 25px 25px;
text-decoration: none;
word-spacing: 30px;
font-size: 25px;
color: black !important;
}
.NavbarLinks_Contact {
margin-right: 300px;
position: absolute;
top: 0;
right: 0;
padding: 25px 25px;
text-decoration: none;
word-spacing: 30px;
font-size: 25px;
color: black !important;
}
.LearnMore_Social {
margin-right: 600px;
position: absolute;
top: 0;
right: 0;
padding: 25px 25px;
text-decoration: none;
word-spacing: 30px;
font-size: 25px;
color: black !important;
}
.ArrowUpIcon {
height: 45px;
}
.LearnMore_P {
font-size: 20px;
width: 500px;
}
.LearnMore_Desc:hover {
background-color: #d9adad; /* Default Website Hover Color Scheme*/
}
.LearnMore_H1 {
font-size: 35px;
}
.LearnMore_Desc {
background-color: #ff7171; /* Default Website Color Scheme */
margin-top: 25px;
margin-right: 50px;
border: none;
color: white;
padding: 10px 20px; /* Default Padding was 15px 32px;*/
cursor: pointer;
text-align: center;
text-decoration: none;
display: inline-block;
border-radius: 5px;
font-size: 16px;
}
.NavbarLinks_Home:hover{
color: white !important;
height: 53px;
background-color: black;
font-weight: bold;
text-decoration: underline;
}
.NavbarLinks_Contact:hover{
color: white !important;
height: 53px;
background-color: black;
font-weight: bold;
text-decoration: underline;
}
.NavbarLinks_Games:hover{
color: white !important;
height: 53px;
background-color: black;
font-weight: bold;
text-decoration: underline;
}
.NavbarLinks_Video:hover{
color: white !important;
height: 53px;
background-color: black;
font-weight: bold;
text-decoration: underline;
}
.GooglePlay_Icon {
/* margin-right: 600px; */
position: absolute;
top: 0;
right: 0;
padding: 25px 25px;
word-spacing: 30px;
font-size: 45px;
height: 45px;
}
.itch_image:hover {
cursor: pointer;
transform: scale(1.1);
}
.itch_image {
height: 50px;
border-radius:35px;
margin-top: 10px;
margin-left: 20px;
}
.googleplay_image:hover {
cursor: pointer;
transform: scale(1.1);
}
.QuickLinks_Links:hover {
transform: scale(1.1);
}
.QuickLinks_Links {
color: #fafafa;
font-size: 25px;
position: absolute;
top: 0;
right: 0;
text-decoration: none;
}
.QuickLinks {
margin-top: 85px;
margin-right: 550px;
}
.subscribe {
margin-top: 85px;
position: absolute;
top: 0;
right: 0;
}
input[type=text], select {
width: 75%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
.subscribe_h1 {
margin-bottom: 20px;
color: #fafafa;
}
.subscribe_button:hover {
transform: scale(1.1);
}
.subscribe_button {
margin-right: 65;
background-color: #ff7171;
border: none;
color: white;
padding: 15px 20px;
cursor: pointer;
text-align: center;
text-decoration: none;
display: inline-block !important;
border-radius: 5px;
font-size: 16px;
}
.QuickLinks_Contant {
margin-top: 130px;
margin-right: 535px;
}
.QuickLinks_Games {
margin-top: 175px;
margin-right: 542px;
}
.QuickLinks_Videos {
margin-top: 220px;
margin-right: 542px;
}
.QuickLinks_Terms {
margin-top: 265px;
margin-right: 430px;
}
.copyright_message {
padding-top: 3px;
color: #fafafa;
}
.Privacy:hover {
text-decoration: underline;
font-weight: bold;
}
.Privacy {
color: #fafafa;
text-decoration: none;
}
.message_development {
position: absolute;
top: 0;
right: 0;
margin-top: 200px;
margin-right: 100px;
width: 500px;
color: white;
}
.subscribe {
margin-right: 150px;
margin-top: 300px;
position: absolute;
top: 0;
right: 0;
}
#copyright {
height: 65px;
background-color: #455d7a;
}
.QuickLinks_h1 {
margin-bottom: 100px;
/* position: absolute;
bottom: 0;
right: 0; */
color: white;
}
.Logo_Header {
margin-top: 200px;
}
.googleplay_image {
height: 50px;
margin-top: 10px;
margin-left: 30px;
}
/* .Itch_Footer_Icon {
margin-right: 600px; */
/* margin-bottom: 20px;
margin-top: 150px;
border-radius: 75px;
padding: 25px 25px;
font-size: 45px;
height: 45px;
} */
.GooglePlay_Footer_Icon:hover {
transform: scale(1.1);
}
.GooglePlay_Footer_Icon {
/* margin-right: 600px; */
/* margin-bottom: 20px; */
margin-top: 50px;
padding: 25px 15px;
font-size: 45px;
height: 45px;
}
/* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
.SmallGamesLogo:hover {
transform: scale(1.1);
}
.GooglePlay_Icon:hover {
transform: scale(1.5);
}
.Itch_io_Icon:hover {
transform: scale(1.5);
}
.Itch_io_Icon {
margin-right: 150px;
/* margin-right: 600px; */
position: absolute;
top: 0;
right: 0;
padding: 25px 25px;
font-size: 45px;
border-radius: 75px;
height: 45px;
}
#container {
width: 100%;
max-width: 1100%;
}
#Navbar {
/* position: fixed;
top: 0;
left: 0; */
width: 100%;
background-color: white !important;
}
.LearnButton {
background-color: #ff7171; /* Default Website Color Scheme */
margin-top: 25px;
border: none;
color: white;
padding: 15px 32px;
cursor: pointer;
text-align: center;
text-decoration: none;
display: inline-block;
border-radius: 5px;
font-size: 16px;
}
#myBtn {
display: none;
position: fixed;
bottom: 20px;
right: 30px;
z-index: 99;
font-size: 18px;
border: none;
outline: none;
background-color: white;
color: #ff5757;
cursor: pointer;
padding: 15px;
border-radius: 4px;
}
#myBtn:hover {
color: white !important;
background-color: #ff5757;
}
./* Use a media query to add a break point at 800px: */
@media screen and (max-width:800px) {
#background_grass, #Navbar, #logo, #NavLinks {
width:100%; /* The width is 100%, when the viewport is 800px or smaller */
}
}
/* Footer Wavy CSS */
<!DOCTYPE html>
<html>
<head>
<!-- Font Awesome -->
<script src="https://kit.fontawesome.com/a779d142a2.js" crossorigin="anonymous"></script>
<!-- StyleSheet -->
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="css/games.css">
<link rel="shortcut icon" type="image/png" href="img/favicon_platformergame.png"/>
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Oswald:wght@300&display=swap" rel="stylesheet">
<!-- <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap" rel="stylesheet"> -->
<!-- <meta name="viewport" content ="width=device-width,initial-scale=1,user-scalable=yes" /> -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SmallGamesStudios</title>
</head>
<body>
<div id="container">
<div id="Navbar">
<div id="logo">
<!-- Make image (Logo) black -->
<a href="index.html"><img class="SmallGamesLogo" src="img/SmallGamesLogo.png" alt="SmallGamesStudios"/></a>
</div>
<div id="NavLinks">
<div class="Navbar_Links">
<a class="NavbarLinks_Contact" href="contact.html">Contact</a>
<a class="NavbarLinks_Games" href="games.html">Games</a>
<a class="NavbarLinks_Video" href="videos.html">Video</a>
<a class="NavbarLinks_Home" href="index.html">Home</a>
</div>
<div class="Navbar_Social">
<a href="#"><img class="GooglePlay_Icon" src="img/GooglePlay.png" alt="Google Play Icon"/></a>
<a href="https://smallgamesstudios.itch.io/platformergame" target="_blank"><img class="Itch_io_Icon" src="img/itch.io.png" alt="Itch.io Icon"/></a>
<!-- <a href="#"><img class="Youtube_Icon" src="img/YoutubeLogo.png" alt="Youtube_Icon"/></a> -->
<!-- <a class="NavSocial_Itch" href="#"><i class="fab fa-itch-io"></i></a>
<a class="NavSocial_GooglePlay" href="#"><i class="fab fa-google-play"></i></a> -->
</div>
</div>
<div id="games">
<div class="games_content">
<div class="PlatformerGame">
<figure>
<a href="https://smallgamesstudios.itch.io/platformergame" target="_blank"><img class="games_image" src="img/PlatformerGame.png" alt="dream_blast_icon"></a>
<figcaption class="games_content_fig">Platformer Game</figcaption></a>
<figcaption class="games_content_fig games_content_fig_desc">We just launched our first, new game! Try avoid dieing from enemies and falling! Collect coins to win, keep your score and try and win! This game is Only for Computers and PCs. Make sure to extract the file and run the exe file!</figcaption>
<a href="games/PlatformerGame.zip"><button class="download_button" type="button" name="button">Download</button></a>
</figure>
</div>
<div class="message">
<h2 class="message_development">We are currently in development making new games! Make sure you subscribe to our Newsletter to get a notification!</h2>
<div class="subscribe">
<form action="https://formspree.io/maypgwbg" method="post">
<input class="subscribe-input" placeholder="Your Email" type="text" name="_replyto"/>
<button class="subscribe_button" type="submit">Send</button>
</form>
</div>
</div>
<!-- <div class="angry_birds">
<figure>
<a href="#"><img class="games_image" src="https://d21tktytfo9riy.cloudfront.net/wp-content/uploads/2019/01/23140919/dream_blast_icon.jpg" alt="dream_blast_icon"></a>
<figcaption class="games_content_fig">ANGRY BIRDS DREAM BL...</figcaption>
<figcaption class="games_content_fig games_content_fig_desc">Life is a bubble-popping dream in a new puzzle game with a gameplay style never-before-seen in an Angry Birds game.</figcaption>
<a href="#"><button class="download_button" type="button" name="button">Download</button></a>
</figure>
</div>
<div class="angrybirds_match">
<figure>
<a href="#"><img class="games_image" src="https://d21tktytfo9riy.cloudfront.net/wp-content/uploads/2019/01/23140919/dream_blast_icon.jpg" alt="dream_blast_icon"></a>
<figcaption class="games_content_fig">ANGRY BIRDS DREAM BL...</figcaption>
<figcaption class="games_content_fig games_content_fig_desc">Life is a bubble-popping dream in a new puzzle game with a gameplay style never-before-seen in an Angry Birds game.</figcaption>
<a href="#"><button class="download_button" type="button" name="button">Download</button></a>
</figure>
</div>
<div class="angrybirds-friends">
<figure>
<a href="#"><img class="games_image" src="https://d21tktytfo9riy.cloudfront.net/wp-content/uploads/2019/01/23140919/dream_blast_icon.jpg" alt="dream_blast_icon"></a>
<figcaption class="games_content_fig">ANGRY BIRDS DREAM BL...</figcaption>
<figcaption class="games_content_fig games_content_fig_desc">Life is a bubble-popping dream in a new puzzle game with a gameplay style never-before-seen in an Angry Birds game.</figcaption>
<a href="#"><button class="download_button" type="button" name="button">Download</button></a>
</figure>
</div>
<div class="angrybirds_evolution">
<figure>
<a href="#"><img class="games_image" src="https://d21tktytfo9riy.cloudfront.net/wp-content/uploads/2019/01/23140919/dream_blast_icon.jpg" alt="dream_blast_icon"></a>
<figcaption class="games_content_fig">ANGRY BIRDS DREAM BL...</figcaption>
<figcaption class="games_content_fig games_content_fig_desc">Life is a bubble-popping dream in a new puzzle game with a gameplay style never-before-seen in an Angry Birds game.</figcaption>
<a href="#"><button class="download_button" type="button" name="button">Download</button></a>
</figure>
</div>
<div class="angrybirds_blast">
<figure>
<a href="#"><img class="games_image" src="https://d21tktytfo9riy.cloudfront.net/wp-content/uploads/2019/01/23140919/dream_blast_icon.jpg" alt="dream_blast_icon"></a>
<figcaption class="games_content_fig">ANGRY BIRDS DREAM BL...</figcaption>
<figcaption class="games_content_fig games_content_fig_desc">Life is a bubble-popping dream in a new puzzle game with a gameplay style never-before-seen in an Angry Birds game.</figcaption>
<a href="#"><button class="download_button" type="button" name="button">Download</button></a>
</figure>
</div> -->
</div>
</div>
<button onclick="topFunction()" id="myBtn" title="Go to top"><img class="ArrowUpIcon" src="img/ArrowUpIcon.png" alt=""></button>
<div id="footer">
<!-- <div class="SocialMedia_Footer"> -->
<div id="SmallGamesLogoWhite Company_Info SocialFooter_Links">
<a href="index.html"><img class="SmallGamesLogoWhite" src="img/SmallGamesLogoWhite.png" alt="SmallGamesStudiosFooter"/></a>
<p class="Company_Text_Info">
SmallGameStudios is a small mobile and PC/Laptop gaming company. Founded in 2020, SmallGameStudios has released some games. Several fun games. We are here to do the best work to entertain people worldwide and make games that we want to show to our friends. Join us on this new journey and lets connect the world through amazing games made with pride and passion.
</p>
<p class="Email"><img class="EmailIcon_Image" src="img/Email_Icon.png" alt="Email_Icon"><a class="EmailIcon_Link" href="contact.html">abdulfareed454@gmail.com</a></p>
<a href="https://smallgamesstudios.itch.io/platformergame" target="_blank"><img class="itch_image" src="img/itch.io.png" alt="itch.io-logo"></a>
<a href="#"><img class="googleplay_image" src="img/GooglePlay.png" alt="GooglePlay-icon"></a>
</div>
<!-- <div id="QuickLinks">
<center>
<h1 class="QuickLinks_h1">Quick Links</h1>
<a class="QuickLinks QuickLinks_Links" href="#">Home</a>
<a class="QuickLinks_Contant QuickLinks_Links" href="contact.html">Contact</a>
<a class="QuickLinks_Games QuickLinks_Links" href="games.html">Games</a>
<a class="QuickLinks_Videos QuickLinks_Links" href="videos.html">Videos</a>
<a class="QuickLinks_Terms QuickLinks_Links" href="terms.html">Terms & Conditions</a>
</center>
</div> -->
<center>
<div id="copyright">
<div class="copyright_message">
<p class="copyright_message_text">© 2009 - 2020 SmallGameStudios. All rights Reserved. <a class="Privacy" href="#">Privacy policy</a>.</p>
</div>
</div>
</center>
<!-- <div>
<h1 class="Newsletter_h1">Join Our Newsletter</h1>
<form action="https://formspree.io/maypgwbg" method="POST">
<input class="" placeholder="Your Email" type="text" name="_replyto">
<button class="" type="submit">Send</button>
</form>
</div> -->
</div>
</div>
</body>
<!-- Script Section -->
<script>
//Get the button
var mybutton = document.getElementById("myBtn");
// When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
mybutton.style.display = "block";
} else {
mybutton.style.display = "none";
}
}
// When the user clicks on the button, scroll to the top of the document
function topFunction() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}
</script>
</body>
</html>
................................................ .....................................
这是我为@media 添加的代码：
@media screen and (max-width:800px) {#background_grass, #Navbar, #logo, #NavLinks { width: 100%; } }
我做错了什么？我写的@Media 查询有误？
快速查看您的代码后，我建议您尝试这样的操作：
.games_image {
height: 200px;
margin: 25px 25px;
margin-bottom: 25px;
border-radius: 50px;
}
@media (max-width: 980px) {
.games_image {
height: 200px;
margin: 25px 25px;
margin-bottom: 25px;
border-radius: 50px;
}
}
另外我可能会包括这个：
* {
width: 100%;
padding: 0;
margin: 0;
}
没有快速的方法来使用媒体查询并使其响应，但在下面包装媒体查询并对各个部分进行调整可以非常有效，并让您获得想要的效果。
从头开始构建时，您必须规划和构建 HTML 以使页面响应。您可以使用 Media Queries 使网页响应。然而，有大量屏幕和设备具有不同的高度和宽度，因此很难为每个设备创建一个准确的断点。对于初学者，您可以这样做：
*{
margin: 0;
padding: 0;
}
/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (max-width: 600px) {
/* Define CSS rules for mobile device here */
.col-2,
.col-3{
width: 100% !important;
}
}
/* CSS rules for rest of the screen size */
.col{
min-height: 10vh;
float: left;
text-align: center;
}
.col-1{
width: 100%;
background: lime;
}
.col-2{
width: 50%;
background: pink;
}
.col-3{
width: 33.3%;
background: cyan;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive</title>
<link rel="stylesheet" href="./assets/css/custom.css">
</head>
<body>
<div class="col col-1">col-1</div>
<div class="col col-2">col-2</div>
<div class="col col-2">col-2</div>
<div class="col col-3">col-3</div>
<div class="col col-3">col-3</div>
<div class="col col-3">col-3</div>
</body>
</html>
始终为移动设备设计First.Mobile首先意味着在为桌面或任何其他设备设计之前为移动设备设计（这将使页面在较小的设备上显示速度更快）。
您可以在 Media Query 移动设备中为移动设备定义 CSS 规则。
然后为移动设备 Media Query 块之外的相同元素修改 属性 以使其在其他屏幕上看起来不错。
您还可以为多个屏幕定义 CSS 媒体查询。例如如下：
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {...}
/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {...}
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {...}
/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {...}
/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {...}
您可以调整它并根据您的需要进行调整。实验。
部分截图：
On Desktop
On Mobile
我试图在没有 Bootstrap 的情况下让我的网站响应，但是当我使用 @Media 查询标签时它不起作用 - 没有任何变化。
................................................ .....................
这是我的代码：
body {
font-family: "Oswald",Helvetica,Arial,sans-serif;
/* font-family: 'Roboto', sans-serif; */
/* overflow-y: hidden; */
/* background-image: url("https://preview.redd.it/qmfjuz883g7z.png?width=1024&s=c5e92c9c5e20b147ef13daf77eab47dae203496f"); */
background-color: #e5e5e5;
/* background-color: #222831; */
margin: 0px;
}
html {
scroll-behavior: smooth;
}
h1 {
margin: 0;
}
.Terms:hover {
font-weight: bold;
text-decoration: underline;
}
.Terms {
text-decoration: none;
color: white;
}
.SmallGamesLogoWhite:hover {
transform: scale(1.1);
}
.SocialMedia {
margin-top: 85px !important;
height: 60px !important;
}
.Company_Text_Info {
color: #fafafa;
width: 500px;
margin-top: 30px;
margin-left: 20px;
}
.EmailIcon_Link:hover {
text-decoration: underline;
font-weight: bold;
}
.EmailIcon_Link {
margin-left: 20px;
color: #fafafa;
text-decoration: none;
}
.EmailIcon_Image {
margin-top: 10px;
margin-left: 20px;
height: 20px;
}
.SmallGamesLogoWhite {
margin-top: 30px;
margin-left: 20px;
/* margin-right: 150px; */
height: 35px;
}
#footer {
background-color: #393e46;
height: 400px;
}
#logo {
padding: 20px 20px;
top:0;
left:0;
}
.SmallGameStudio_footer {
margin-top: 350px;
}
#video-content {
margin-top: 100px;
margin-bottom: 100px;
}
.video_h1 {
margin-top: 100px;
}
.video_p {
font-size: 15px;
width: 450px;
text-transform: uppercase;
}
.CenteredText{
margin-top: 35px;
color: white;
}
/* .CenteredText_Span{
color: white;
font-weight: bold;
} */
.NavbarLinks_Video{
margin-right: 450px;
position: absolute;
top: 0;
right: 0;
padding: 25px 25px;
text-decoration: none;
word-spacing: 30px;
font-size: 25px;
color: black !important;
}
::-moz-selection { /* Code for Firefox */
color: white;
background: #ffe4e4;
}
::selection {
color: white;
background: #ffe4e4;
}
.NavbarLinks_Games{
margin-right: 635px;
position: absolute;
top: 0;
right: 0;
padding: 25px 25px;
text-decoration: none;
word-spacing: 30px;
font-size: 25px;
color: black !important;
}
#LearnMore {
margin-top: 150px;
margin-bottom: 300px;
color: white;
}
.games_image:hover {
cursor: pointer;
transform: scale(1.1);
}
#games {
background-color: #393b44;
margin: 0;
}
.games_content_fig_desc {
color: white !important;
width: 250px;
margin-top: 15px;
}
.games_content {
display: flex;
flex-wrap:wrap;
}
.games_content_fig {
margin-left: 55px;
color: black;
color: #ffec00;
}
.download_button:hover {
transform: scale(1.1);
}
.download_button {
background-color: #ff7171; /* Default Website Color Scheme */
margin: 25px 55px;
border: none;
color: white;
padding: 15px 32px;
cursor: pointer;
text-align: center;
text-decoration: none;
border-radius: 5px;
font-size: 16px;
}
.games_image {
height: 200px;
margin: 25px 25px;
margin-bottom: 25px;
border-radius: 50px;
}
@media (max-width: 980px) {
.games_image {
height: 200px;
margin: 25px 25px;
margin-bottom: 25px;
border-radius: 50px;
}
}
#background_grass {
background-image: url("https://preview.redd.it/qmfjuz883g7z.png?width=1024&s=c5e92c9c5e20b147ef13daf77eab47dae203496f");
/* margin-top: 45px;
padding: 5px; */
height: 750px;
}
#LearnMore:hover{
color: white;
}
.Copyright_Text {
margin-bottom: 5px;
color: white;
}
.LearnButton:hover {
color: white;
background-color: #d9adad;
}
.LearnButton {
width: 150px;
}
.FooterLinks:hover {
font-weight: bold;
text-decoration: underline;
}
#FooterLinks {
word-spacing: 30px;
font-size: 35px;
padding-top: 50px;
}
.FooterLinks {
color: white;
text-decoration: none;
}
.NavbarLinks_Home{
margin-right: 800px;
position: absolute;
top: 0;
right: 0;
padding: 25px 25px;
text-decoration: none;
word-spacing: 30px;
font-size: 25px;
color: black !important;
}
.NavbarLinks_Contact {
margin-right: 300px;
position: absolute;
top: 0;
right: 0;
padding: 25px 25px;
text-decoration: none;
word-spacing: 30px;
font-size: 25px;
color: black !important;
}
.LearnMore_Social {
margin-right: 600px;
position: absolute;
top: 0;
right: 0;
padding: 25px 25px;
text-decoration: none;
word-spacing: 30px;
font-size: 25px;
color: black !important;
}
.ArrowUpIcon {
height: 45px;
}
.LearnMore_P {
font-size: 20px;
width: 500px;
}
.LearnMore_Desc:hover {
background-color: #d9adad; /* Default Website Hover Color Scheme*/
}
.LearnMore_H1 {
font-size: 35px;
}
.LearnMore_Desc {
background-color: #ff7171; /* Default Website Color Scheme */
margin-top: 25px;
margin-right: 50px;
border: none;
color: white;
padding: 10px 20px; /* Default Padding was 15px 32px;*/
cursor: pointer;
text-align: center;
text-decoration: none;
display: inline-block;
border-radius: 5px;
font-size: 16px;
}
.NavbarLinks_Home:hover{
color: white !important;
height: 53px;
background-color: black;
font-weight: bold;
text-decoration: underline;
}
.NavbarLinks_Contact:hover{
color: white !important;
height: 53px;
background-color: black;
font-weight: bold;
text-decoration: underline;
}
.NavbarLinks_Games:hover{
color: white !important;
height: 53px;
background-color: black;
font-weight: bold;
text-decoration: underline;
}
.NavbarLinks_Video:hover{
color: white !important;
height: 53px;
background-color: black;
font-weight: bold;
text-decoration: underline;
}
.GooglePlay_Icon {
/* margin-right: 600px; */
position: absolute;
top: 0;
right: 0;
padding: 25px 25px;
word-spacing: 30px;
font-size: 45px;
height: 45px;
}
.itch_image:hover {
cursor: pointer;
transform: scale(1.1);
}
.itch_image {
height: 50px;
border-radius:35px;
margin-top: 10px;
margin-left: 20px;
}
.googleplay_image:hover {
cursor: pointer;
transform: scale(1.1);
}
.QuickLinks_Links:hover {
transform: scale(1.1);
}
.QuickLinks_Links {
color: #fafafa;
font-size: 25px;
position: absolute;
top: 0;
right: 0;
text-decoration: none;
}
.QuickLinks {
margin-top: 85px;
margin-right: 550px;
}
.subscribe {
margin-top: 85px;
position: absolute;
top: 0;
right: 0;
}
input[type=text], select {
width: 75%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
.subscribe_h1 {
margin-bottom: 20px;
color: #fafafa;
}
.subscribe_button:hover {
transform: scale(1.1);
}
.subscribe_button {
margin-right: 65;
background-color: #ff7171;
border: none;
color: white;
padding: 15px 20px;
cursor: pointer;
text-align: center;
text-decoration: none;
display: inline-block !important;
border-radius: 5px;
font-size: 16px;
}
.QuickLinks_Contant {
margin-top: 130px;
margin-right: 535px;
}
.QuickLinks_Games {
margin-top: 175px;
margin-right: 542px;
}
.QuickLinks_Videos {
margin-top: 220px;
margin-right: 542px;
}
.QuickLinks_Terms {
margin-top: 265px;
margin-right: 430px;
}
.copyright_message {
padding-top: 3px;
color: #fafafa;
}
.Privacy:hover {
text-decoration: underline;
font-weight: bold;
}
.Privacy {
color: #fafafa;
text-decoration: none;
}
.message_development {
position: absolute;
top: 0;
right: 0;
margin-top: 200px;
margin-right: 100px;
width: 500px;
color: white;
}
.subscribe {
margin-right: 150px;
margin-top: 300px;
position: absolute;
top: 0;
right: 0;
}
#copyright {
height: 65px;
background-color: #455d7a;
}
.QuickLinks_h1 {
margin-bottom: 100px;
/* position: absolute;
bottom: 0;
right: 0; */
color: white;
}
.Logo_Header {
margin-top: 200px;
}
.googleplay_image {
height: 50px;
margin-top: 10px;
margin-left: 30px;
}
/* .Itch_Footer_Icon {
margin-right: 600px; */
/* margin-bottom: 20px;
margin-top: 150px;
border-radius: 75px;
padding: 25px 25px;
font-size: 45px;
height: 45px;
} */
.GooglePlay_Footer_Icon:hover {
transform: scale(1.1);
}
.GooglePlay_Footer_Icon {
/* margin-right: 600px; */
/* margin-bottom: 20px; */
margin-top: 50px;
padding: 25px 15px;
font-size: 45px;
height: 45px;
}
/* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
.SmallGamesLogo:hover {
transform: scale(1.1);
}
.GooglePlay_Icon:hover {
transform: scale(1.5);
}
.Itch_io_Icon:hover {
transform: scale(1.5);
}
.Itch_io_Icon {
margin-right: 150px;
/* margin-right: 600px; */
position: absolute;
top: 0;
right: 0;
padding: 25px 25px;
font-size: 45px;
border-radius: 75px;
height: 45px;
}
#container {
width: 100%;
max-width: 1100%;
}
#Navbar {
/* position: fixed;
top: 0;
left: 0; */
width: 100%;
background-color: white !important;
}
.LearnButton {
background-color: #ff7171; /* Default Website Color Scheme */
margin-top: 25px;
border: none;
color: white;
padding: 15px 32px;
cursor: pointer;
text-align: center;
text-decoration: none;
display: inline-block;
border-radius: 5px;
font-size: 16px;
}
#myBtn {
display: none;
position: fixed;
bottom: 20px;
right: 30px;
z-index: 99;
font-size: 18px;
border: none;
outline: none;
background-color: white;
color: #ff5757;
cursor: pointer;
padding: 15px;
border-radius: 4px;
}
#myBtn:hover {
color: white !important;
background-color: #ff5757;
}
./* Use a media query to add a break point at 800px: */
@media screen and (max-width:800px) {
#background_grass, #Navbar, #logo, #NavLinks {
width:100%; /* The width is 100%, when the viewport is 800px or smaller */
}
}
/* Footer Wavy CSS */
<!DOCTYPE html>
<html>
<head>
<!-- Font Awesome -->
<script src="https://kit.fontawesome.com/a779d142a2.js" crossorigin="anonymous"></script>
<!-- StyleSheet -->
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="css/games.css">
<link rel="shortcut icon" type="image/png" href="img/favicon_platformergame.png"/>
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Oswald:wght@300&display=swap" rel="stylesheet">
<!-- <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap" rel="stylesheet"> -->
<!-- <meta name="viewport" content ="width=device-width,initial-scale=1,user-scalable=yes" /> -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SmallGamesStudios</title>
</head>
<body>
<div id="container">
<div id="Navbar">
<div id="logo">
<!-- Make image (Logo) black -->
<a href="index.html"><img class="SmallGamesLogo" src="img/SmallGamesLogo.png" alt="SmallGamesStudios"/></a>
</div>
<div id="NavLinks">
<div class="Navbar_Links">
<a class="NavbarLinks_Contact" href="contact.html">Contact</a>
<a class="NavbarLinks_Games" href="games.html">Games</a>
<a class="NavbarLinks_Video" href="videos.html">Video</a>
<a class="NavbarLinks_Home" href="index.html">Home</a>
</div>
<div class="Navbar_Social">
<a href="#"><img class="GooglePlay_Icon" src="img/GooglePlay.png" alt="Google Play Icon"/></a>
<a href="https://smallgamesstudios.itch.io/platformergame" target="_blank"><img class="Itch_io_Icon" src="img/itch.io.png" alt="Itch.io Icon"/></a>
<!-- <a href="#"><img class="Youtube_Icon" src="img/YoutubeLogo.png" alt="Youtube_Icon"/></a> -->
<!-- <a class="NavSocial_Itch" href="#"><i class="fab fa-itch-io"></i></a>
<a class="NavSocial_GooglePlay" href="#"><i class="fab fa-google-play"></i></a> -->
</div>
</div>
<div id="games">
<div class="games_content">
<div class="PlatformerGame">
<figure>
<a href="https://smallgamesstudios.itch.io/platformergame" target="_blank"><img class="games_image" src="img/PlatformerGame.png" alt="dream_blast_icon"></a>
<figcaption class="games_content_fig">Platformer Game</figcaption></a>
<figcaption class="games_content_fig games_content_fig_desc">We just launched our first, new game! Try avoid dieing from enemies and falling! Collect coins to win, keep your score and try and win! This game is Only for Computers and PCs. Make sure to extract the file and run the exe file!</figcaption>
<a href="games/PlatformerGame.zip"><button class="download_button" type="button" name="button">Download</button></a>
</figure>
</div>
<div class="message">
<h2 class="message_development">We are currently in development making new games! Make sure you subscribe to our Newsletter to get a notification!</h2>
<div class="subscribe">
<form action="https://formspree.io/maypgwbg" method="post">
<input class="subscribe-input" placeholder="Your Email" type="text" name="_replyto"/>
<button class="subscribe_button" type="submit">Send</button>
</form>
</div>
</div>
<!-- <div class="angry_birds">
<figure>
<a href="#"><img class="games_image" src="https://d21tktytfo9riy.cloudfront.net/wp-content/uploads/2019/01/23140919/dream_blast_icon.jpg" alt="dream_blast_icon"></a>
<figcaption class="games_content_fig">ANGRY BIRDS DREAM BL...</figcaption>
<figcaption class="games_content_fig games_content_fig_desc">Life is a bubble-popping dream in a new puzzle game with a gameplay style never-before-seen in an Angry Birds game.</figcaption>
<a href="#"><button class="download_button" type="button" name="button">Download</button></a>
</figure>
</div>
<div class="angrybirds_match">
<figure>
<a href="#"><img class="games_image" src="https://d21tktytfo9riy.cloudfront.net/wp-content/uploads/2019/01/23140919/dream_blast_icon.jpg" alt="dream_blast_icon"></a>
<figcaption class="games_content_fig">ANGRY BIRDS DREAM BL...</figcaption>
<figcaption class="games_content_fig games_content_fig_desc">Life is a bubble-popping dream in a new puzzle game with a gameplay style never-before-seen in an Angry Birds game.</figcaption>
<a href="#"><button class="download_button" type="button" name="button">Download</button></a>
</figure>
</div>
<div class="angrybirds-friends">
<figure>
<a href="#"><img class="games_image" src="https://d21tktytfo9riy.cloudfront.net/wp-content/uploads/2019/01/23140919/dream_blast_icon.jpg" alt="dream_blast_icon"></a>
<figcaption class="games_content_fig">ANGRY BIRDS DREAM BL...</figcaption>
<figcaption class="games_content_fig games_content_fig_desc">Life is a bubble-popping dream in a new puzzle game with a gameplay style never-before-seen in an Angry Birds game.</figcaption>
<a href="#"><button class="download_button" type="button" name="button">Download</button></a>
</figure>
</div>
<div class="angrybirds_evolution">
<figure>
<a href="#"><img class="games_image" src="https://d21tktytfo9riy.cloudfront.net/wp-content/uploads/2019/01/23140919/dream_blast_icon.jpg" alt="dream_blast_icon"></a>
<figcaption class="games_content_fig">ANGRY BIRDS DREAM BL...</figcaption>
<figcaption class="games_content_fig games_content_fig_desc">Life is a bubble-popping dream in a new puzzle game with a gameplay style never-before-seen in an Angry Birds game.</figcaption>
<a href="#"><button class="download_button" type="button" name="button">Download</button></a>
</figure>
</div>
<div class="angrybirds_blast">
<figure>
<a href="#"><img class="games_image" src="https://d21tktytfo9riy.cloudfront.net/wp-content/uploads/2019/01/23140919/dream_blast_icon.jpg" alt="dream_blast_icon"></a>
<figcaption class="games_content_fig">ANGRY BIRDS DREAM BL...</figcaption>
<figcaption class="games_content_fig games_content_fig_desc">Life is a bubble-popping dream in a new puzzle game with a gameplay style never-before-seen in an Angry Birds game.</figcaption>
<a href="#"><button class="download_button" type="button" name="button">Download</button></a>
</figure>
</div> -->
</div>
</div>
<button onclick="topFunction()" id="myBtn" title="Go to top"><img class="ArrowUpIcon" src="img/ArrowUpIcon.png" alt=""></button>
<div id="footer">
<!-- <div class="SocialMedia_Footer"> -->
<div id="SmallGamesLogoWhite Company_Info SocialFooter_Links">
<a href="index.html"><img class="SmallGamesLogoWhite" src="img/SmallGamesLogoWhite.png" alt="SmallGamesStudiosFooter"/></a>
<p class="Company_Text_Info">
SmallGameStudios is a small mobile and PC/Laptop gaming company. Founded in 2020, SmallGameStudios has released some games. Several fun games. We are here to do the best work to entertain people worldwide and make games that we want to show to our friends. Join us on this new journey and lets connect the world through amazing games made with pride and passion.
</p>
<p class="Email"><img class="EmailIcon_Image" src="img/Email_Icon.png" alt="Email_Icon"><a class="EmailIcon_Link" href="contact.html">abdulfareed454@gmail.com</a></p>
<a href="https://smallgamesstudios.itch.io/platformergame" target="_blank"><img class="itch_image" src="img/itch.io.png" alt="itch.io-logo"></a>
<a href="#"><img class="googleplay_image" src="img/GooglePlay.png" alt="GooglePlay-icon"></a>
</div>
<!-- <div id="QuickLinks">
<center>
<h1 class="QuickLinks_h1">Quick Links</h1>
<a class="QuickLinks QuickLinks_Links" href="#">Home</a>
<a class="QuickLinks_Contant QuickLinks_Links" href="contact.html">Contact</a>
<a class="QuickLinks_Games QuickLinks_Links" href="games.html">Games</a>
<a class="QuickLinks_Videos QuickLinks_Links" href="videos.html">Videos</a>
<a class="QuickLinks_Terms QuickLinks_Links" href="terms.html">Terms & Conditions</a>
</center>
</div> -->
<center>
<div id="copyright">
<div class="copyright_message">
<p class="copyright_message_text">© 2009 - 2020 SmallGameStudios. All rights Reserved. <a class="Privacy" href="#">Privacy policy</a>.</p>
</div>
</div>
</center>
<!-- <div>
<h1 class="Newsletter_h1">Join Our Newsletter</h1>
<form action="https://formspree.io/maypgwbg" method="POST">
<input class="" placeholder="Your Email" type="text" name="_replyto">
<button class="" type="submit">Send</button>
</form>
</div> -->
</div>
</div>
</body>
<!-- Script Section -->
<script>
//Get the button
var mybutton = document.getElementById("myBtn");
// When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
mybutton.style.display = "block";
} else {
mybutton.style.display = "none";
}
}
// When the user clicks on the button, scroll to the top of the document
function topFunction() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}
</script>
</body>
</html>
................................................ .....................................
这是我为@media 添加的代码：
@media screen and (max-width:800px) {#background_grass, #Navbar, #logo, #NavLinks { width: 100%; } }
我做错了什么？我写的@Media 查询有误？
快速查看您的代码后，我建议您尝试这样的操作：
.games_image {
height: 200px;
margin: 25px 25px;
margin-bottom: 25px;
border-radius: 50px;
}
@media (max-width: 980px) {
.games_image {
height: 200px;
margin: 25px 25px;
margin-bottom: 25px;
border-radius: 50px;
}
}
另外我可能会包括这个：
* {
width: 100%;
padding: 0;
margin: 0;
}
没有快速的方法来使用媒体查询并使其响应，但在下面包装媒体查询并对各个部分进行调整可以非常有效，并让您获得想要的效果。
从头开始构建时，您必须规划和构建 HTML 以使页面响应。您可以使用 Media Queries 使网页响应。然而，有大量屏幕和设备具有不同的高度和宽度，因此很难为每个设备创建一个准确的断点。对于初学者，您可以这样做：
*{
margin: 0;
padding: 0;
}
/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (max-width: 600px) {
/* Define CSS rules for mobile device here */
.col-2,
.col-3{
width: 100% !important;
}
}
/* CSS rules for rest of the screen size */
.col{
min-height: 10vh;
float: left;
text-align: center;
}
.col-1{
width: 100%;
background: lime;
}
.col-2{
width: 50%;
background: pink;
}
.col-3{
width: 33.3%;
background: cyan;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive</title>
<link rel="stylesheet" href="./assets/css/custom.css">
</head>
<body>
<div class="col col-1">col-1</div>
<div class="col col-2">col-2</div>
<div class="col col-2">col-2</div>
<div class="col col-3">col-3</div>
<div class="col col-3">col-3</div>
<div class="col col-3">col-3</div>
</body>
</html>
始终为移动设备设计First.Mobile首先意味着在为桌面或任何其他设备设计之前为移动设备设计（这将使页面在较小的设备上显示速度更快）。
您可以在 Media Query 移动设备中为移动设备定义 CSS 规则。
然后为移动设备 Media Query 块之外的相同元素修改 属性 以使其在其他屏幕上看起来不错。
您还可以为多个屏幕定义 CSS 媒体查询。例如如下：
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {...}
/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {...}
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {...}
/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {...}
/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {...}
您可以调整它并根据您的需要进行调整。实验。
部分截图：
On Desktop
On Mobile