css - @media 不起作用-6ren

css - @media 不起作用

转载作者：太空宇宙更新时间：2023-11-04 07:27:35

25

4

我在让我的媒体查询处理家庭作业时遇到了问题。我想我做的一切都是正确的，我花了 2 个多小时试图理解为什么从移动设备查看时它似乎没有做任何更改。如果有人有任何想法，那将大有帮助。附件是我的 html 头部部分和遵循我的标准 css 的 css 代码。

<head>
<title>Pacific Trails Resort</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<link href="pacific.css" rel="stylesheet">
<link href="pacificprint.css" rel="stylesheet" media="print">
</head>

@media only screen and (max-width: 1024px) {
body { margin: 0 ;
        padding: 0 ;
        background-image: none }
#wrapper { width: auto ;
            min-width: 0 ;
            margin: 0 ;
            box-shadow: none }
h1 { margin: 0 }
nav { float: none ;
        width: auto ;
        padding: 0.5em }
nav li { display: inline-block }
nav a { padding: 1em }
main { padding: 1em ;
        margin-left: 0 ;
        font-size: 90% }
footer { margin: 0 }
}

最佳答案

问题是你的一半 CSS 规则没有以分号结尾。

虽然最后的 CSS 分号确实可以在语句中省略， at-rules (如媒体查询)构成自身的声明:

A statement is a building block that begins with any non-space characters and ends at the first closing brace or semi-colon (outside a string, non-escaped and not included into another {}, () or [] pair).

因此，只有您的last 规则可以省略分号(页脚)。

话虽如此，在每行中添加分号是一种很好的做法，不会造成任何问题，因此这是您应该始终追求的目标。

我已经格式化了代码并在以下(现在可用的)示例中的每一行中添加了分号:

@media only screen and (max-width: 1024px) {
  body {
    margin: 0;
    padding: 0;
    background-image: none;
  }
  #wrapper {
    width: auto;
    min-width: 0;
    margin: 0;
    box-shadow: none;
  }
  h1 {
    margin: 0;
  }
  nav {
    float: none;
    width: auto;
    padding: 0.5em;
  }
  nav li {
    display: inline-block;
  }
  nav a {
    padding: 1em;
  }
  main {
    padding: 1em;
    margin-left: 0;
    font-size: 90%;
  }
  footer {
    margin: 0;
  }
}

<head>
  <title>Pacific Trails Resort</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta charset="utf-8">
  <link href="pacific.css" rel="stylesheet">
  <link href="pacificprint.css" rel="stylesheet" media="print">
</head>

关于css - @media 不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49745362/

25

4

0

文章推荐： python - 如何计算列表中元素的数量并创建新列？

文章推荐： c - 为库定义结构的最佳位置

文章推荐： html - 根据其他要求将 div 移动到父级的底部

实例分析Try {} Catch{} 作用
今天有小伙伴给我留言问到，try{...}catch(){...}是什么意思？它用来干什么？简单的说他们是用来捕获异常的下面我们通过一个例子来详细讲解下
html - 列表社交媒体链接的 ARIA 作用
我正在努力提高网站的可访问性，但我不知道如何在页脚中标记社交媒体链接列表。这些链接指向我在 facecook、twitter 等上的帐户。我不想用 role="navigation" 标记这些链接，因
java.util.Timer SystemTime 作用？
说现在是 6 点，我有一个 Timer 并在 10 点安排了一个 TimerTask。之后，System DateTime 被其他服务(例如 ntp)调整为 9 点钟。我仍然希望我的 TimerTas
php - 什么是 Doctrine hydration 作用？
就目前而言，这个问题不适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit the
python入门:argparse浅析 nargs='+'作用
我就废话不多说了，大家还是直接看代码吧~ ? 1
Maven是什么?Maven的概念+作用+仓库的介绍+常用命令的详解
Maven系列1 1.什么是Maven？ Maven是一个项目管理工具，它包含了一个对象模型。一组标准集合，一个依赖管理系统。和用来运行定义在生命周期阶段中插件目标和逻辑。核心功能 Mav

首页

博学

6Ren·AI

商城

css - @media 不起作用