问题：

由于网页比屏幕短15像素，媒体查询断点不工作

欧阳绪

2023-03-14

基本上，我的媒体查询比应该的低15像素，例如：

@media only screen and (max-width : 1200px) {
  .title{
    color: blue;
  }

}

当网页宽度达到1200px或更低时，上面的css应该将h1更改为蓝色，而不是在1185px时触发。我尝试过其他断点，它始终是15px。我使用检查工具查看网页宽度，并查看body元素的宽度，但我也使用了“console.log（$（窗口）。宽度（））”，相同的答案。但是，打开检查工具后，如果我重新调整窗口大小，它会以像素为单位显示右上角的“宽度x高度”。这个测量是准确的，一旦达到1200像素或更低，我的查询激活，它正好比我的“身体”宽度显示的宽15像素。有人能帮我弄清楚吗？

我已经在下面添加了一行，缩放是100%，我也在使用chrome。有什么建议吗？我将html添加到了带有的部分。标题h1标签在里面，如果你还需要看什么，请告诉我。我知道没有其他css会妨碍我，媒体查询位于我的css文件的底部。

<meta name="viewport" content="width=device-width, initial-scale=1" />

<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Mobius Designs - Architecture Firm</title>
    <meta name="description" content="An artichture firm based out of Dallas, TX with years of experience creating stunning buildings and structures.">
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="shortcut icon" type="image/ico" href="static/images/architecture_favicon.ico">

    <!-- STYLESHEETS BELOW -->
    <link rel="stylesheet" href="static/css/home_section.css">
    <link rel="stylesheet" href="static/css/project_section.css">
    <link rel="stylesheet" href="static/css/contact_section.css">
    <link rel="stylesheet" href="static/css/fontello.css">

    <!-- JQUERY SCRIPTS BELOW -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" src="static/js/jquery_scripts.min.js"></script>
  </head>



  <body id="top">


    <main>
      <!-- Start of the HOME section or the top of the page -->
      <div class="title-row">
        <h1 class="title">World Class Architecture Firm</h1>
        <p class="title-description">Based out of Dallas, TX, Mosbius Designs is an architecture firm with over 10 years of experience designing groundbreaking buildings. From commercial, business, to personal, we pride ourselves on creating state if the art buildings and exceeding expectations. If you are a business or individual in need of architectural services, you can get in touch with our company <a href="#contact"><b>here</b></a>.</p>
        <h3 class="looking-to-hire title-links"><a href="#contact">I'm Looking to Hire </a><span class="chevron"> > </span> </h3>
        <button  class="need-building title-links" type="button"> I Need a Building<span class="chevron"> > </span> </button>
        <p class="note"><small>*This website is merely an example, Mosbius Designs, all building names and locations are fictional. Any resemblence to real life locations or organizations is merely coincidence </small></p>

        <form class="building-form" action="process_building_form.php" method="post">
          <div class="building-form-inputs">
            <input type="text" name="name" placeholder="Name" required>
            <input type="email" name="email" placeholder="Email">
            <input type="text" name="phone" placeholder="Phone">
          </div>
          <textarea name="message" rows="8" placeholder="General Idea of Building or Message to Architecture Firm" required></textarea>
          <input type="submit" name="" value="Submit">
        </form>
      </div>

共有1个答案

宋明亮

2023-03-14

您的代码工作正常。问题是你混淆了屏幕宽度和视口宽度。

当您使用console.log（$（windows）. size（））时，您看到的值是视口的宽度-这是没有滚动条的屏幕宽度。这也是您的的最大宽度

如果您想检查屏幕宽度，即包括滚动条，请使用$（windows）. outerWidth（），即：

console.log("Screen Width:"+$(window).outerWidth());
console.log("Viewport Width:"+$(window).innerWidth());

类似资料：

CSS媒体查询屏幕尺寸

问题内容：我目前正在尝试设计一种可以兼容多种屏幕尺寸的布局。我正在设计的屏幕尺寸如下：屏幕尺寸： 640x480 800x600 1024x768 1280x1024（及更大）我遇到的麻烦是创建css3媒体查询，以便当窗口的宽度变为这些宽度之一时，布局会发生变化。以下是我当前正在使用的媒体查询的示例，但不适用于我，因此我想知道是否有人可以帮助我修复它。我尝试使用一组新的媒体查询，但是它们仍
媒体查询可以基于div元素而不是屏幕来调整大小吗？

问题内容：我想使用媒体查询根据其所在元素的大小来调整元素的大小。我不能使用屏幕大小，因为只是像网页中的小部件一样使用，它的大小可以变化。问题答案：不，媒体查询并非旨在基于页面中的元素来工作。它们被设计为基于设备或媒体类型工作（因此，它们被称为 _媒体_查询）。，和其他基于尺寸的媒体功能均指的是基于屏幕的媒体中视口或设备屏幕的尺寸。它们不能用于引用页面上的某个元素。如果您需要根据页面上某个元
响应站点上媒体查询的常见断点

问题内容：因此，我正在我的第一个响应式网站上工作，该网站广泛使用了媒体查询。我想知道是否应该优化一些常见的页面宽度。我可能会有一个最大宽度（不能完全流畅），我想我可能会设置3-5个宽度，并在它们之间进行一些有趣的CSS3过渡（类似于CSS Tricks的工作方式）。目前我使用的数字有些随意：另外，我想我已经读过一些移动设备的运行不正常（带有）。这在哪里发挥作用，我应如何应对这些情况？问题
CSS媒体查询

主要内容：1. 媒体类型,2. 媒体特性,3. 逻辑操作符,4. 定义媒体查询随着移动设备的快速普及，用户不再只是通过传统的电脑系来浏览 Web 内容，越来越多的用户开始使用各种尺寸的智能手机、平板电脑或者其它设备来浏览 Web 内容，为了确保使用不同设备的用户都能拥有不错的体验就需要用到媒体查询。媒体查询是 CSS 样式表最重要的功能之一，所谓媒体查询指的就是根据不同的媒体类型（设备类型）和条件来区分各种设备（例如：电脑、手机、平板电脑、盲文设备等），并为它们分别定义不
CSS3 媒体查询

响应式网站设计只有弹性布局这一个技巧是不够用的，媒体查询（ media queries ）也是响应式设计的核心技巧之一。媒体查询是可应用于 CSS 样式的简单过滤器。有了这些过滤器，我们可以根据设备呈现内容的特点轻松更改样式，包括显示屏类型、宽度、高度、方向甚至是分辨率。在 CSS2.1 中定义了媒体类型，通过给元素添加 media 属性，可以为不同的媒体类型加载不同的样式表。 <link r
9.4.1 媒体查询

在早些时候，为了满足移动用户的需求，需要为移动设备专门建立一个额外的网站。随着响应式设计的出现，这种做法已经越来越少见了。 2010年5月25日，Ethan Marcotte在A List Apart上发表了一篇开创性的文章，在这篇名为Responsive Web Design的文章中，他将媒体查询、弹性网格布局、弹性图片这三种已有的开发技术整合起来，并命名为响应式Web设计（RWD，Respon

由于网页比屏幕短15像素，媒体查询断点不工作

共有1个答案

相关问答

相关文章

相关阅读

相关工具

相关文档