如何让我的 CSS @media 代码在移动设备上运行以使我的网站具有响应性？
Posted
技术标签:
【中文标题】如何让我的 CSS @media 代码在移动设备上运行以使我的网站具有响应性？【英文标题】：How do I get my CSS @media code to work on mobile devices to make my website responsive? 【发布时间】：2021-01-25 18:01:48 【问题描述】：我的 CSS 中有以下代码，我希望将我的页面的不同部分堆叠在移动设备上。但是，当我在 iPhone 浏览器 (Safari) 中打开网站时，它只会打开我页面的桌面版本。这是 CSS：
body
display: grid;
grid-template-areas:
'header header header'
'nav article ads'
'nav footer footer';
grid-template-rows: 80px 1fr 70px;
grid-template-columns: 20% 1fr 15%;
grid-row-gap: 1px;
grid-column-gap: 1px;
height: 100vh;
margin: 0;
a
color: #0ad05b;
text-decoration: none;
a:hover
color: #e3eaee;
header
display: flex;
justify-content: space-between;
align-items: center;
padding: 1.2em;
background: #21313c;
font-family: Helvetica, Arial, sans-serif;
color: #e3eaee;
font-size: 14px;
footer,
article,
nav,
div
padding: 1.2em;
background: #061621;
font-family: Helvetica, Arial, sans-serif;
color: #e3eaee;
font-size: 14px;
textarea
font-family: Arial, Helvetica, sans-serif;
#pageHeader
grid-area: header;
#pageFooter
grid-area: footer;
#mainArticle
grid-area: article;
align-content: flex-start;
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: flex-start;
#mainNav
grid-area: nav;
#siteAds
grid-area: ads;
/* Stack the layout on small devices/viewports. */
@media all and (max-width: 575px)
body
grid-template-areas:
'header'
'article'
'ads'
'nav'
'footer';
grid-template-rows: 80px 1fr 70px 1fr 70px;
grid-template-columns: 1fr;
.innerArticle
height: 16vh;
width: 16vh;
.big-user-photo
border-radius: 50%;
.userAvatar
height: 3rem;
width: 3rem;
border-radius: 50%;
margin-right: 1rem;
.mainPage
height: 3rem;
width: 3rem;
border-radius: 50%;
margin-right: 1rem;
.headerRight
grid-area: header;
justify-self: right;
padding: 1.2em;
background: #21313c;
font-family: Helvetica, Arial, sans-serif;
color: #e3eaee;
.right
display: flex;
flex-direction: row;
flex-wrap: wrap;
padding: 0.5em;
background: #21313c;
font-family: Helvetica, Arial, sans-serif;
color: #e3eaee;
.left
background: #21313c;
font-family: Helvetica, Arial, sans-serif;
color: #e3eaee;
.form-user-photo
height: 15rem;
width: 15rem;
.alert
position: fixed;
top: 0;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
z-index: 9999;
color: #fff;
font-size: 1.8rem;
font-weight: 400;
text-align: center;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
padding: 1.6rem 15rem;
-webkit-box-shadow: 0 2rem 4rem rgba(0, 0, 0, 0.25);
box-shadow: 0 2rem 4rem rgba(0, 0, 0, 0.25);
.alert--success
background-color: #0ad05b;
.alert--error
background-color: #eb4d4b;
当我在手机上打开页面时，它是这样显示的（从我的 iPhone 截屏）：
我希望有人能告诉我我错过了什么。谢谢。
【问题讨论】：
【参考方案1】：您必须将此标记添加到 html 的 <head> 以告诉浏览器正确处理响应。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
来自 W3School，
width=device-width部分设置页面的宽度以跟随设备的屏幕宽度
更多信息here。
【讨论】：
以上是关于如何让我的 CSS @media 代码在移动设备上运行以使我的网站具有响应性？的主要内容，如果未能解决你的问题，请参考以下文章
CSS / Bootstrap - 字体大小未正确从计算机调整到移动设备：移动设备上的字体看起来很小