css - 响应式 CSS 适用于移动设备，但不适用于桌面
问题描述
我有这个非常拥挤的设计，我很难做出响应。基本上，使用“max-width:1024px”媒体查询时，整个布局适合在移动模式下，因为如果我理解正确的话，这种模式会尝试适合窗口中的所有内容。
问题是对于相同的屏幕尺寸但没有移动模式，它根本不适合。如果在媒体查询中我使窗口的高度更大，比如说 140vh，那么如果在桌面上运行良好但在移动模式下所有元素都太远了。
基本上我想知道如何使布局适用于相同尺寸的手机和台式机。
这是代码：
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;300;400;500;700&display=swap');
:root {
--primary: #252b42;
--green: #1eb589;
--red: #dc414c;
--blue: #1da1f2;
--bc: #20222f;
--text-light: #8c98c6;
}
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
/* TOOLS */
.grid {
display: grid;
}
.flex {
display: flex;
}
.font-white {
color: white;
}
.font-grey {
color: var(--text-light);
}
.font-green {
color: var(--green);
}
.font-red {
color: var(--red);
}
/* FONTS */
html {
font-size: 14px;
font-family: 'Inter', sans-serif;
}
h1 {
font-size: 2rem;
font-weight: bold;
}
h2 {
font-size: 1rem;
font-weight: bold;
}
h3 {
font-size: 0.9rem;
font-weight: bold;
}
h4 {
font-size: 4rem;
font-weight: bold;
line-height: 48px;
letter-spacing: -2px;
}
h5 {
font-weight: 400;
letter-spacing: 5px;
}
h6 {
font-size: 0.9rem;
font-weight: bold;
}
.number {
font-size: 2.3rem;
font-weight: bold;
}
/* ///////////////////////////////////////////// */
/* BODY */
body {
background-color: var(--bc);
/* overflow-y: hidden; */
}
.wrapper {
flex-direction: column;
height: 100vh;
/* margin: 2rem auto 4rem; */
margin: 0 auto;
width: 80%;
justify-content: space-evenly;
}
/* Header */
header {
justify-content: space-between;
}
.dark-mode {
flex-direction: row;
align-items: center;
justify-self: space-between;
}
/* DASHBOARD */
.dashboard {
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr;
justify-content: space-between;
column-gap: 28px;
}
/* Grid items */
.dashboard .grid-item {
position: relative;
flex-direction: column;
align-items: center;
justify-content: space-evenly;
/* width: 255px; */
height: 216px;
border-radius: 5px;
background-color: var(--primary);
}
.color {
height: 3px;
width: 100%;
display: fixed;
/* margin-top: -2rem; */
position: absolute;
top: 0;
border-radius: 5px 5px 0 0;
}
/* sticker colors */
#blue {
background-color: var(--blue);
}
#ig {
background: linear-gradient(70deg, #df4896, #ee877e, #fdc366);
}
#red {
background-color: var(--red);
}
.network {
display: flex;
align-items: center;
}
.network .pseudo {
margin-left: 4px;
}
.followers {
align-items: center;
}
.number-followers {
text-align: center;
}
.unit {
margin-top: 1rem;
text-transform: uppercase;
text-align: center;
}
.today {
display: flex;
align-items: center;
}
.today img {
height: 4px;
margin-right: 5px;
}
/* OVERVIEW */
.overview {
grid-template-columns: repeat(4, 1fr);
grid-template-rows: 1fr;
grid-gap: 28px;
}
.overview .grid-item {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 125px;
border-radius: 5px;
background-color: var(--primary);
}
.top-half,
.bottom-half {
width: 80%;
height: 80%;
display: flex;
flex-direction: row;
justify-content: space-between;
text-align: center;
align-items: center;
}
/* HOVER STATES */
.grid-item {
cursor: pointer;
transition: background 0.2s ease-in-out;
}
.grid-item:hover {
background-color: #333a55;
}
/* RESPONSIVENESS */
@media screen and(max-width: 1280px) {
html {
font-size: 13px;
}
/* .grid-item {
width: 215px;
} */
}
/* Smaller screens */
@media screen and (max-width: 1024px) {
.wrapper {
width: 90%;
/* height: 140vh; */
}
.grid {
grid-gap: 17px;
}
/* bottom grid */
.overview {
grid-template-columns: repeat(3, 1fr);
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1" />
<!-- displays site properly based on user's device -->
<link
rel="icon"
type="image/png"
sizes="32x32"
href="./images/favicon-32x32.png"
/>
<link rel="stylesheet" href="style.css" />
<title>Frontend Mentor | [Challenge Name Here]</title>
<!-- Feel free to remove these styles or customise in your own stylesheet -->
<style>
.attribution {
font-size: 11px;
text-align: center;
}
.attribution a {
color: hsl(228, 45%, 44%);
}
</style>
</head>
<body>
<div class="wrapper flex">
<header class="flex">
<div class="title">
<h1 class="title-1 font-white">Social Media Dashboard</h1>
<h2 class="font-grey">Total Followers: 23,004</h2>
</div>
<div class="dark-mode flex">
<h2 class="font-grey">Dark Mode</h2>
<button class="dark-mode-btn"></button>
</div>
</header>
<div class="dashboard grid">
<div class="grid-item flex">
<div class="color" id="blue"></div>
<div class="network">
<img src="./images/icon-facebook.svg" alt="" class="social-icon" />
<h3 class="pseudo font-grey">@nathanf</h3>
</div>
<div class="followers">
<h4 class="number-followers font-white">1987</h4>
<h5 class="unit font-grey">FOLLOWERS</h5>
</div>
<div class="today"><img src="./images/icon-up.svg"></img><h6 class="font-green">12 Today</h6></div>
</div>
<div class="grid-item flex">
<div class="color "id="blue"></div>
<div class="network">
<img src="./images/icon-twitter.svg" alt="" class="social-icon" />
<h3 class="pseudo font-grey">@nathanf</h3>
</div>
<div class="followers">
<h4 class="number-followers font-white">1044</h4>
<h5 class="unit font-grey">FOLLOWERS</h5>
</div>
<div class="today"><img src="./images/icon-up.svg"></img><h6 class="font-green">99 Today</h6></div>
</div>
<div class="grid-item flex">
<div class="color" id="ig" ></div>
<div class="network">
<img src="./images/icon-instagram.svg" alt="" class="social-icon" />
<h3 class="pseudo font-grey">@realnathanf</h3>
</div>
<div class="followers">
<h4 class="number-followers font-white">11k</h4>
<h5 class="unit font-grey">FOLLOWERS</h5>
</div>
<div class="today"><img src="./images/icon-up.svg"></img><h6 class="font-green">1099 Today</h6 class="font-green"></div>
</div>
<div class="grid-item flex">
<div class="color" id="red"></div>
<div class="network">
<img src="./images/icon-youtube.svg" alt="" class="social-icon" />
<h3 class="pseudo font-grey">Nathan F.</h3>
</div>
<div class="followers">
<h4 class="number-followers font-white">8239</h4>
<h5 class="unit font-grey">Subscribers</h5>
</div>
<div class="today"><img src="./images/icon-down.svg"></img><h6 class="font-red">144 Today</h6></div>
</div>
</div>
<h1 class="title-2 font-white">Overview - Today</h1>
<div class="overview grid">
<div class="grid-item flex">
<div class="top-half">
<h2 class="font-grey">Page Views</h2>
<img src="./images/icon-facebook.svg" alt="" class="media-icon" />
</div>
<div class="bottom-half">
<div class="number font-white">87</div>
<div class="today"><img src="./images/icon-up.svg"></img><h6 class="font-green">3%</h6></div>
</div>
</div>
<div class="grid-item flex">
<div class="top-half">
<h2 class="font-grey">Likes</h2>
<img src="./images/icon-facebook.svg" alt="" class="media-icon" />
</div>
<div class="bottom-half">
<div class="number font-white">52</div>
<div class="today"><img src="./images/icon-down.svg"></img><h6 class="font-red">2%</h6></div>
</div>
</div>
<div class="grid-item flex">
<div class="top-half">
<h2 class="font-grey">Likes</h2>
<img src="./images/icon-instagram.svg" alt="" class="media-icon" />
</div>
<div class="bottom-half">
<div class="number font-white">5462</div>
<div class="today"><img src="./images/icon-up.svg"></img><h6 class="font-green">2257%</h6></div>
</div>
</div>
<div class="grid-item flex">
<div class="top-half">
<h2 class="font-grey">Profile Views</h2>
<img src="./images/icon-instagram.svg" alt="" class="media-icon" />
</div>
<div class="bottom-half">
<div class="number font-white">52k</div>
<div class="today"><img src="./images/icon-up.svg"></img><h6 class="font-green">1375%</h6></div>
</div>
</div>
<div class="grid-item flex">
<div class="top-half">
<h2 class="font-grey">Retweets</h2>
<img src="./images/icon-twitter.svg" alt="" class="media-icon" />
</div>
<div class="bottom-half">
<div class="number font-white">117</div>
<div class="today"><img src="./images/icon-up.svg"></img><h6 class="font-green">303%</h6></div>
</div>
</div>
<div class="grid-item flex">
<div class="top-half">
<h2 class="font-grey">Likes</h2>
<img src="./images/icon-twitter.svg" alt="" class="media-icon" />
</div>
<div class="bottom-half">
<div class="number font-white">507</div>
<div class="today"><img src="./images/icon-up.svg"></img><h6 class="font-green">553%</h6></div>
</div>
</div>
<div class="grid-item flex">
<div class="top-half">
<h2 class="font-grey">Likes</h2>
<img src="./images/icon-youtube.svg" alt="" class="media-icon" />
</div>
<div class="bottom-half">
<div class="number font-white">107</div>
<div class="today"><img src="./images/icon-down.svg"></img><h6 class="font-red">19%</h6></div>
</div>
</div>
<div class="grid-item flex">
<div class="top-half">
<h2 class="font-grey">Total Views</h2>
<img src="./images/icon-youtube.svg" alt="" class="media-icon" />
</div>
<div class="bottom-half">
<div class="number font-white">1407</div>
<div class="today"><img src="./images/icon-down.svg"></img><h6 class="font-red">12%</h6></div>
</div>
</div>
</div>
<div class="attribution">
Challenge by
<a href="https://www.frontendmentor.io?ref=challenge" target="_blank"
>Frontend Mentor</a
>. Coded by <a href="#">Thomas M.</a>.
</div>
</div>
<script src="./app.js"></script>
</body>
</html>解决方案
对于响应式布局，您可以使用Raheel Junaid's answer 之auto-fit类的网格。但是你也只能使用没有显示网格的 flex。
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;300;400;500;700&display=swap');
:root {
--primary: #252b42;
--green: #1eb589;
--red: #dc414c;
--blue: #1da1f2;
--bc: #20222f;
--text-light: #8c98c6;
}
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
/* TOOLS */
.grid {
display: grid;
}
.flex {
display: flex;
}
.font-white {
color: white;
}
.font-grey {
color: var(--text-light);
}
.font-green {
color: var(--green);
}
.font-red {
color: var(--red);
}
/* FONTS */
html {
font-size: 14px;
font-family: 'Inter', sans-serif;
}
h1 {
font-size: 2rem;
font-weight: bold;
}
h2 {
font-size: 1rem;
font-weight: bold;
}
h3 {
font-size: 0.9rem;
font-weight: bold;
}
h4 {
font-size: 4rem;
font-weight: bold;
line-height: 48px;
letter-spacing: -2px;
}
h5 {
font-weight: 400;
letter-spacing: 5px;
}
h6 {
font-size: 0.9rem;
font-weight: bold;
}
.number {
font-size: 2.3rem;
font-weight: bold;
}
/* ///////////////////////////////////////////// */
/* BODY */
body {
background-color: var(--bc);
/* overflow-y: hidden; */
}
.wrapper {
flex-direction: column;
height: 100vh;
/* margin: 2rem auto 4rem; */
margin: 0 auto;
width: 80%;
justify-content: space-evenly;
}
/* Header */
header {
justify-content: space-between;
}
.dark-mode {
flex-direction: row;
align-items: center;
justify-self: space-between;
}
/* DASHBOARD */
.dashboard {
/* grid-template-columns: 1fr 1fr 1fr 1fr; */
/* grid-template-rows: 1fr; */
/* justify-content: space-between; */
/* column-gap: 28px; */
display: flex;
flex-wrap: wrap;
gap: 10px;
}
/* Grid items */
.dashboard .grid-item {
flex-basis: calc(calc(700px - 100%) * 9999);
flex-shrink: 1;
flex-grow: 1;
position: relative;
flex-direction: column;
align-items: center;
justify-content: space-evenly;
/* width: 255px; */
height: 216px;
border-radius: 5px;
background-color: var(--primary);
}
.color {
height: 3px;
width: 100%;
display: fixed;
/* margin-top: -2rem; */
position: absolute;
top: 0;
border-radius: 5px 5px 0 0;
}
/* sticker colors */
#blue {
background-color: var(--blue);
}
#ig {
background: linear-gradient(70deg, #df4896, #ee877e, #fdc366);
}
#red {
background-color: var(--red);
}
.network {
display: flex;
align-items: center;
}
.network .pseudo {
margin-left: 4px;
}
.followers {
align-items: center;
}
.number-followers {
text-align: center;
}
.unit {
margin-top: 1rem;
text-transform: uppercase;
text-align: center;
}
.today {
display: flex;
align-items: center;
}
.today img {
height: 4px;
margin-right: 5px;
}
/* OVERVIEW */
.overview {
/* grid-template-columns: repeat(4, 1fr);
grid-template-rows: 1fr;
grid-gap: 28px; */
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.overview .grid-item {
flex-basis: 300px;
flex-shrink: 1;
flex-grow: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 125px;
border-radius: 5px;
background-color: var(--primary);
}
.top-half,
.bottom-half {
width: 80%;
height: 80%;
display: flex;
flex-direction: row;
justify-content: space-between;
text-align: center;
align-items: center;
}
/* HOVER STATES */
.grid-item {
cursor: pointer;
transition: background 0.2s ease-in-out;
}
.grid-item:hover {
background-color: #333a55;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1" />
<!-- displays site properly based on user's device -->
<link
rel="icon"
type="image/png"
sizes="32x32"
href="./images/favicon-32x32.png"
/>
<link rel="stylesheet" href="style.css" />
<title>Frontend Mentor | [Challenge Name Here]</title>
<!-- Feel free to remove these styles or customise in your own stylesheet -->
<style>
.attribution {
font-size: 11px;
text-align: center;
}
.attribution a {
color: hsl(228, 45%, 44%);
}
</style>
</head>
<body>
<div class="wrapper flex">
<header class="flex">
<div class="title">
<h1 class="title-1 font-white">Social Media Dashboard</h1>
<h2 class="font-grey">Total Followers: 23,004</h2>
</div>
<div class="dark-mode flex">
<h2 class="font-grey">Dark Mode</h2>
<button class="dark-mode-btn"></button>
</div>
</header>
<div class="dashboard">
<div class="grid-item flex">
<div class="color" id="blue"></div>
<div class="network">
<img src="./images/icon-facebook.svg" alt="" class="social-icon" />
<h3 class="pseudo font-grey">@nathanf</h3>
</div>
<div class="followers">
<h4 class="number-followers font-white">1987</h4>
<h5 class="unit font-grey">FOLLOWERS</h5>
</div>
<div class="today"><img src="./images/icon-up.svg"></img><h6 class="font-green">12 Today</h6></div>
</div>
<div class="grid-item flex">
<div class="color "id="blue"></div>
<div class="network">
<img src="./images/icon-twitter.svg" alt="" class="social-icon" />
<h3 class="pseudo font-grey">@nathanf</h3>
</div>
<div class="followers">
<h4 class="number-followers font-white">1044</h4>
<h5 class="unit font-grey">FOLLOWERS</h5>
</div>
<div class="today"><img src="./images/icon-up.svg"></img><h6 class="font-green">99 Today</h6></div>
</div>
<div class="grid-item flex">
<div class="color" id="ig" ></div>
<div class="network">
<img src="./images/icon-instagram.svg" alt="" class="social-icon" />
<h3 class="pseudo font-grey">@realnathanf</h3>
</div>
<div class="followers">
<h4 class="number-followers font-white">11k</h4>
<h5 class="unit font-grey">FOLLOWERS</h5>
</div>
<div class="today"><img src="./images/icon-up.svg"></img><h6 class="font-green">1099 Today</h6 class="font-green"></div>
</div>
<div class="grid-item flex">
<div class="color" id="red"></div>
<div class="network">
<img src="./images/icon-youtube.svg" alt="" class="social-icon" />
<h3 class="pseudo font-grey">Nathan F.</h3>
</div>
<div class="followers">
<h4 class="number-followers font-white">8239</h4>
<h5 class="unit font-grey">Subscribers</h5>
</div>
<div class="today"><img src="./images/icon-down.svg"></img><h6 class="font-red">144 Today</h6></div>
</div>
</div>
<h1 class="title-2 font-white">Overview - Today</h1>
<div class="overview">
<div class="grid-item flex">
<div class="top-half">
<h2 class="font-grey">Page Views</h2>
<img src="./images/icon-facebook.svg" alt="" class="media-icon" />
</div>
<div class="bottom-half">
<div class="number font-white">87</div>
<div class="today"><img src="./images/icon-up.svg"></img><h6 class="font-green">3%</h6></div>
</div>
</div>
<div class="grid-item flex">
<div class="top-half">
<h2 class="font-grey">Likes</h2>
<img src="./images/icon-facebook.svg" alt="" class="media-icon" />
</div>
<div class="bottom-half">
<div class="number font-white">52</div>
<div class="today"><img src="./images/icon-down.svg"></img><h6 class="font-red">2%</h6></div>
</div>
</div>
<div class="grid-item flex">
<div class="top-half">
<h2 class="font-grey">Likes</h2>
<img src="./images/icon-instagram.svg" alt="" class="media-icon" />
</div>
<div class="bottom-half">
<div class="number font-white">5462</div>
<div class="today"><img src="./images/icon-up.svg"></img><h6 class="font-green">2257%</h6></div>
</div>
</div>
<div class="grid-item flex">
<div class="top-half">
<h2 class="font-grey">Profile Views</h2>
<img src="./images/icon-instagram.svg" alt="" class="media-icon" />
</div>
<div class="bottom-half">
<div class="number font-white">52k</div>
<div class="today"><img src="./images/icon-up.svg"></img><h6 class="font-green">1375%</h6></div>
</div>
</div>
<div class="grid-item flex">
<div class="top-half">
<h2 class="font-grey">Retweets</h2>
<img src="./images/icon-twitter.svg" alt="" class="media-icon" />
</div>
<div class="bottom-half">
<div class="number font-white">117</div>
<div class="today"><img src="./images/icon-up.svg"></img><h6 class="font-green">303%</h6></div>
</div>
</div>
<div class="grid-item flex">
<div class="top-half">
<h2 class="font-grey">Likes</h2>
<img src="./images/icon-twitter.svg" alt="" class="media-icon" />
</div>
<div class="bottom-half">
<div class="number font-white">507</div>
<div class="today"><img src="./images/icon-up.svg"></img><h6 class="font-green">553%</h6></div>
</div>
</div>
<div class="grid-item flex">
<div class="top-half">
<h2 class="font-grey">Likes</h2>
<img src="./images/icon-youtube.svg" alt="" class="media-icon" />
</div>
<div class="bottom-half">
<div class="number font-white">107</div>
<div class="today"><img src="./images/icon-down.svg"></img><h6 class="font-red">19%</h6></div>
</div>
</div>
<div class="grid-item flex">
<div class="top-half">
<h2 class="font-grey">Total Views</h2>
<img src="./images/icon-youtube.svg" alt="" class="media-icon" />
</div>
<div class="bottom-half">
<div class="number font-white">1407</div>
<div class="today"><img src="./images/icon-down.svg"></img><h6 class="font-red">12%</h6></div>
</div>
</div>
</div>
<div class="attribution">
Challenge by
<a href="https://www.frontendmentor.io?ref=challenge" target="_blank"
>Frontend Mentor</a
>. Coded by <a href="#">Thomas M.</a>.
</div>
</div>
<script src="./app.js"></script>
</body>
</html>这些变化是：
.dashboard {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.dashboard .grid-item {
flex-basis: calc(calc(700px - 100%) * 9999);
flex-shrink: 1;
flex-grow: 1;
}
.overview {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.overview .grid-item {
flex-basis: 300px;
flex-shrink: 1;
flex-grow: 1;
}
我正在向.dashboard和.overviewflex-basis子级添加、flex-shrink和flex-grow属性。
flex-basis将设置弹性项目的主要尺寸。- 例如，如果我们将基础设置为 300px，则宽度将为 300px。但是如果值为 1，我们有
flex-grow并且flex-shrink允许 child 从其主要大小增长或缩小。 flex-shrink默认值为 1flex-grow默认值为 0- 当父宽度 > 600px 它将有 2 列（600px / 2 = 300px）
- 当父宽度 < 300px 时，如果
flex-shrinkvalue = 1 ，孩子将缩小 - 当父宽度为 400 像素时，如果
flex-grow值 = 1 ，则子宽度将增长到 400 像素 - 负值
flex-basis无效。 - 对于
calc(calc(700px - 100%) * 9999);当父宽度达到 < 700px 时，flex-basis将具有很大的值，这将使父级只有一列。当父宽度 > 700px 时，基值将为负数，然后flex-basis将设置为默认值auto。
推荐阅读
- php - 如何通过数据映射器将受保护的属性保存到数据库？
- assembly - 为什么我的 .s 文件不能使用我的 Raspberry Pi VM 组装？
- mongodb - 在mongodb中使用按位而不是大量布尔值是一个好策略吗？
- python - 计算熊猫时间序列中的连续 nan 值
- python - tensorflow 是否在同一设备上并行执行图形的独立部分？
- asp.net-core-mvc - 如果没有自定义视图模型，.Net 核心视图组件将无法工作
- android-studio - 如何使 Flutter 应用的 Navigation Drawer 透明？
- node.js - 你可以在 azure webchat 和 skype 上使用 Botkit 和 botframework 吗？
- r - R中缺失数据的百分比给出错误
- c - 如何制作一个接受 C 中两位整数或字符的菜单界面？