大家好，我是網路開發的新手，我正在嘗試將我的投資組合網站構建為培訓專案，我在桌面模式下構建它，當我開始使用媒體查詢進行回應時，我遇到了一些問題，簡而言之我有一個最大寬度為 860px 的移動斷點，只有當我手動調整瀏覽器視窗的大小時才有效，如果我使用 chrome 的開發人員工具在移動模式下查看它，我將在這里留下代碼和鏈接網站，如果你想在手機上查看
http://mandowebdev.ddns.net/portfolio/
@import url("https://fonts.googleapis.com/css2?family=Luckiest Guy&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Knewave&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@500;800&display=swap");
:root {
--background: #3e3e3e;
--primary: #ffed00;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
overflow-x: hidden;
}
html {
width: 100vw;
height: 100vh;
font-size: 16px;
background-color: var(--background);
color: var(--primary);
}
body {
display: flex;
flex-direction: column;
justify-content: center;
width: 90%;
margin: auto;
}
nav {
width: 75%;
display: grid;
grid-template-columns: 1fr 3fr;
align-items: center;
justify-content: center;
}
img {
max-width: 100%;
height: auto;
}
.nav-logo {
font-family: "Luckiest Guy", cursive;
font-size: 3rem;
margin-right: 4.25rem;
margin-top: 1rem;
}
.nav-ul {
display: flex;
list-style-type: none;
}
.nav-li {
font-family: "Poppins", sans-serif;
font-weight: 800;
margin-right: 3.125rem;
}
.nav-links {
text-decoration: none;
color: var(--primary);
}
hr {
border: 2px solid #707070;
}
.landing {
width: 80%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background-image: url(img/grid.svg);
background-repeat: no-repeat;
background-size: cover;
margin-left: auto;
margin-right: auto;
margin-top: 8rem;
margin-bottom: 14.7rem;
padding: 3rem;
}
.landing-logo {
font-family: "Luckiest Guy", cursive;
font-size: 7.25rem;
}
.landing-logo-subtitle {
font-family: "Knewave", cursive;
font-size: 4.19rem;
}
.stack {
margin: auto;
margin-top: 8rem;
display: flex;
grid-template-columns: 1fr 1fr;
grid-column-gap: 12.25rem;
}
.stack-h1 {
font-family: "Luckiest Guy", cursive;
font-size: 2.5rem;
margin-bottom: 8rem;
margin-left: 7.5rem;
}
.stack article {
align-items: center;
}
.cloud {
border: 5px solid var(--primary);
border-radius: 4rem;
display: flex;
justify-content: space-around;
margin-left: 4rem;
}
.stack-icons {
margin: 5rem 1.5rem 5rem 1.5rem;
min-width: 2rem;
}
.projects {
margin-top: 25rem;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.projects-h1 {
font-family: "Luckiest Guy", cursive;
font-size: 3rem;
}
.project {
padding-bottom: 10rem;
padding-top: 10rem;
display: grid;
grid-column-gap: 8rem;
grid-template-columns: 1fr 1fr;
align-items: center;
border-bottom: 2px solid var(--primary);
font-family: "Poppins", sans-serif;
line-height: 2rem;
}
#plant {
direction: rtl;
}
#plant p {
direction: ltr;
}
@media (max-width: 860px){
.project{
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr;
}
}
@media screen and (max-width: 1230px) {
.stack {
flex-direction: column;
}
.cloud {
margin-bottom: 15rem;
}
}
@media screen and (max-width: 1600px) {
html {
font-size: 14px;
}
}<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css" />
<title>Portfolio</title>
</head>
<body>
<nav class="navbar">
<p class="nav-logo">Mando.</p>
<ul class="nav-ul">
<li class="nav-li"><a href="#" class="nav-links">HOME</a></li>
<li class="nav-li"><a href="#" class="nav-links">DEV-STACK</a></li>
<li class="nav-li"><a href="#" class="nav-links">MY PROJECTS</a></li>
<li class="nav-li"><a href="#" class="nav-links">CONTACT</a></li>
</ul>
</nav>
<hr id="nav_hr" />
<section class="landing">
<div class="landing-text">
<p class="landing-logo">Mando.</p>
<p class="landing-logo-subtitle">Full Stack Web Dev</p>
</div>
<img class="memoji" src="img/memoji_img.svg" alt="#" />
</section>
<section class="stack">
<article class="front-end">
<h1 class="stack-h1">My Front-end Stack</h1>
<div class="cloud">
<img class="stack-icons" src="img/front-end/js.svg" alt="#" />
<img class="stack-icons" src="img/front-end/html.svg" alt="#" />
<img class="stack-icons" src="img/front-end/css-3.svg" alt="#" />
</div>
</article>
<article>
<h1 class="stack-h1">My Back-end Stack</h1>
<div class="cloud">
<img class="stack-icons" src="img/back-end/js.svg" alt="#" />
<img class="stack-icons" src="img/back-end/django.svg" alt="#" />
<img class="stack-icons" src="img/back-end/python.svg" alt="#" />
</div>
</article>
</section>
<section class="projects">
<h1 class="projects-h1">My Learning Projects</h1>
<article class="project">
<img class="project-img" src="img/projects/python_guide.svg" alt="" />
<p class="projects-p">
A brief introduction to my favorite. Programming language: Python
</p>
</article>
<article class="project" id="plant">
<img class="project-img" src="img/projects/not_a_plant.svg" alt="" />
<p class="projects-p">
A product page design that includes images and a sample video <br />
for the product with a contact form at the end
</p>
</article>
<article class="project">
<img class="project-img" src="img/projects/apple.svg" alt="" />
<p class="projects-p">
My first html and css project: a little roadmap of Steve Jobs life
from 1974 to 2011
</p>
</article>
</section>
<section class="projects">
<h1 class="projects-h1">Javascript Projects</h1>
<article class="project">
<img class="project-img" src="img/projects/generative_art.svg" alt="" />
<p class="projects-p">
My generative art project made in javascript, with this you can tweak
<br />
some parameters to create your own generative frame
</p>
</article>
</section>
</body>
</html>uj5u.com熱心網友回復：
當您減小視口大小但不在瀏覽器的模擬器上時它正在作業，我懷疑您缺少元標記：
<meta name="viewport" content="width=device-width, initial-scale=1">
有關說明，請參閱MDN。
uj5u.com熱心網友回復：
添加媒體查詢screen and。max-width: 860px
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/467521.html
上一篇：Java中如何同步快取讀寫操作