html - 负责任的设计 - 不要处理所有元素-6ren

html - 负责任的设计 - 不要处理所有元素

转载作者：行者123 更新时间：2023-11-28 03:37:55

我正在针对定义的标准分辨率测试负责任的设计(定义的分辨率来自 FireFox)。如果页面宽度设置为最大宽度 650px 一切正常，但如果我将浏览器宽度更改为 651px 或更多，则 CSS 代码不会处理。我看不出问题。

        window.onresize = displayWindowSize;
        window.onload = displayWindowSize;

        function displayWindowSize() {
            myWidth = window.innerWidth;
            myHeight = window.innerHeight;
            // your size calculation code here
            document.getElementById("responsible-design-debug").innerHTML = "Responsible design debug: " + myWidth + "x" + myHeight;
        };

        body {
            background-color: #F5F5F5;
            font-family: Verdana, Geneva, Tahoma, sans-serif;
            font-size: 0.8em;
        }

        .Logo {
            height: 35px;
            margin-bottom: 15px;
        }

        /**
         * DEVICE:      Universally
         * DIMENSIONS:  1920px and more
         * ORIENTATION: Portrait
        **/
        @media screen and (orientation: portrait) and (min-width: 1920px) {
            .responsible-design-debug {
                background-color: green;
                float: left;
            }
        }

        /**
         * DEVICE:      Universally
         * DIMENSIONS:  1280px - 1920px
         * ORIENTATION: Portrait
        **/
        @media screen and (orientation: portrait) and (min-width: 1280px) and (max-width: 1919px) {
            .responsible-design-debug {
                background-color: lightgreen;
                float: left;
            }
        }

        /**
         * DEVICE:      Universally
         * DIMENSIONS:  980px - 1280px
         * ORIENTATION: Portrait
        **/
        @media screen and (orientation: portrait) and (min-width: 980px) and (max-width: 1279px) {
            .responsible-design-debug {
                background-color: red;
                float: left;
            }
        }

        /**
         * DEVICE:      Universally
         * DIMENSIONS:  800px - 980px
         * ORIENTATION: Portrait
        **/
        @media screen and (orientation: portrait) and (min-width: 800px) and (max-width: 979px) {
            .responsible-design-debug {
                background-color: orange;
                float: left;
            }
        }

        /**
         * DEVICE:      Universally
         * DIMENSIONS:  768px - 800px
         * ORIENTATION: Portrait
        **/
        @media screen and (orientation: portrait) and (min-width: 768px) and (max-width: 799px) {
            .responsible-design-debug {
                background-color: blueviolet;
                float: left;
            }
        }

        /**
         * DEVICE:      Universally
         * DIMENSIONS:  360px - 768px
         * ORIENTATION: Portrait
        **/
        @media screen and (orientation: portrait) and (min-width: 360px) and (max-width: 767px) {
            .responsible-design-debug {
                background-color: blue;
                float: left;
            }
        }

        /**
         * DEVICE:      Universally
         * DIMENSIONS:  320px - 360px
         * ORIENTATION: Portrait
        **/
        @media screen and (orientation: portrait) and (min-width: 320px) and (max-width: 359px) {
            .responsible-design-debug {
                background-color: aqua;
                float: left;
            }
        }

        /**
         * DEVICE:      Universally
         * DIMENSIONS:  0px - 320px
         * ORIENTATION: Portrait
        **/
        @media screen and (orientation: portrait) and (min-width: 0px) and (max-width: 319px) {
            .responsible-design-debug {
                background-color: yellow;
                float: left;
            }
        }

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Responsible design</title>
</head>
<body>

    <div id="responsible-design-debug" class="responsible-design-debug">Responsible design debug: init</div>
    <img src="Image.png" alt="Image.png" class="Logo" />

    <div id="example">
        <p>Lorem ipsum dolor sit amet consectetuer In et elit diam arcu. Lacus enim molestie dictumst quis convallis pellentesque consectetuer ipsum ligula pellentesque. Nullam elit nunc amet et nec semper lacus ac lacinia et. At Sed Proin tempor lacus tristique senectus eu est lacinia dui. Nisl Ut Vestibulum ac Vestibulum Phasellus lacinia ut auctor consequat felis. Sapien dolor Morbi Ut fringilla at molestie eu.</p>
        <p>Augue sodales est ligula eget cursus quis id orci magna et. Dapibus ac elit diam pede mauris Nam interdum adipiscing et suscipit. Nonummy justo laoreet In elit magna condimentum enim quis non tempor. Malesuada eget habitant ligula ut consequat ut felis amet libero cursus. Lobortis tellus volutpat pellentesque leo ipsum id Vestibulum suscipit convallis Donec. Amet eget dui.</p>
    </div>

</body>
</html>

谢谢你和最好的问候，彼得

最佳答案

因为你使用的是and (orientation: portrait)，所以一旦窗口的宽度值大于高度，你的CSS都不会被考虑，因为它被认为landscape 方向。如果您从所有媒体查询中删除它，它将按预期工作:

window.onresize = displayWindowSize;
window.onload = displayWindowSize;

function displayWindowSize() {
  myWidth = window.innerWidth;
  myHeight = window.innerHeight;
  // your size calculation code here
  document.getElementById("responsible-design-debug").innerHTML = "Responsible design debug: " + myWidth + "x" + myHeight;
};

body {
            background-color: #F5F5F5;
            font-family: Verdana, Geneva, Tahoma, sans-serif;
            font-size: 0.8em;
        }

        .Logo {
            height: 35px;
            margin-bottom: 15px;
        }

        /**
         * DEVICE:      Universally
         * DIMENSIONS:  1920px and more

        **/
        @media screen and (min-width: 1920px) {
            .responsible-design-debug {
                background-color: green;
                float: left;
            }
        }

        /**
         * DEVICE:      Universally
         * DIMENSIONS:  1280px - 1920px
        **/
        @media screen and (min-width: 1280px) and (max-width: 1919px) {
            .responsible-design-debug {
                background-color: lightgreen;
                float: left;
            }
        }

        /**
         * DEVICE:      Universally
         * DIMENSIONS:  980px - 1280px
        **/
        @media screen and (min-width: 980px) and (max-width: 1279px) {
            .responsible-design-debug {
                background-color: red;
                float: left;
            }
        }

        /**
         * DEVICE:      Universally
         * DIMENSIONS:  800px - 980px
        **/
        @media screen and (min-width: 800px) and (max-width: 979px) {
            .responsible-design-debug {
                background-color: orange;
                float: left;
            }
        }

        /**
         * DEVICE:      Universally
         * DIMENSIONS:  768px - 800px
        **/
        @media screen and (min-width: 768px) and (max-width: 799px) {
            .responsible-design-debug {
                background-color: blueviolet;
                float: left;
            }
        }

        /**
         * DEVICE:      Universally
         * DIMENSIONS:  360px - 768px
        **/
        @media screen and (min-width: 360px) and (max-width: 767px) {
            .responsible-design-debug {
                background-color: blue;
                float: left;
            }
        }

        /**
         * DEVICE:      Universally
         * DIMENSIONS:  320px - 360px
        **/
        @media screen and (min-width: 320px) and (max-width: 359px) {
            .responsible-design-debug {
                background-color: aqua;
                float: left;
            }
        }

        /**
         * DEVICE:      Universally
         * DIMENSIONS:  0px - 320px
        **/
        @media screen and (min-width: 0px) and (max-width: 319px) {
            .responsible-design-debug {
                background-color: yellow;
                float: left;
            }
        }

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Responsible design</title>
</head>

<body>

  <div id="responsible-design-debug" class="responsible-design-debug">Responsible design debug: init</div>
  <img src="Image.png" alt="Image.png" class="Logo" />

  <div id="example">
    <p>Lorem ipsum dolor sit amet consectetuer In et elit diam arcu. Lacus enim molestie dictumst quis convallis pellentesque consectetuer ipsum ligula pellentesque. Nullam elit nunc amet et nec semper lacus ac lacinia et. At Sed Proin tempor lacus tristique
      senectus eu est lacinia dui. Nisl Ut Vestibulum ac Vestibulum Phasellus lacinia ut auctor consequat felis. Sapien dolor Morbi Ut fringilla at molestie eu.</p>
    <p>Augue sodales est ligula eget cursus quis id orci magna et. Dapibus ac elit diam pede mauris Nam interdum adipiscing et suscipit. Nonummy justo laoreet In elit magna condimentum enim quis non tempor. Malesuada eget habitant ligula ut consequat ut
      felis amet libero cursus. Lobortis tellus volutpat pellentesque leo ipsum id Vestibulum suscipit convallis Donec. Amet eget dui.</p>
  </div>

</body>

</html>

关于html - 负责任的设计 - 不要处理所有元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44375048/

文章推荐： jquery - 可折叠侧边栏菜单中的弹出菜单

文章推荐： CSS 可变高度无法正常工作

文章推荐： c++ - 用相同的值填充数组，循环重置值

user-interface - 交互设计、视觉设计、网页设计、UX 设计、UI 设计、UI 开发之间有什么区别？
关闭。这个问题需要更多focused .它目前不接受答案。想改善这个问题吗？更新问题，使其仅关注一个问题 editing this post . 4年前关闭。 Improve this questi
wpf - 仅适用于 VS 设计 View 的 Blend 中的 UnresolvedAssemblyException - 在 VS 设计 View 中工作正常
.NET 框架:4.5.1 我在 Blend for visual studio 2015 中遇到一个奇怪的错误，我找不到它的来源。如果我在 VS 中打开我的 WPF 解决方案，它会加载并运行良好。
web-services - RESTful URL 设计 : public vs private API, 层次结构 API 设计模式，URI 与 URL 设计？
我经常遇到这样的问题，与 Hierarchical RESTful URL design 非常相似假设该服务仅提供用户上传文档。 POST, GET /accounts PUT, DELETE /a
设计，无法登出
在 Rails 应用程序中，我使用 devise 来管理我的用户，而我用来销毁 session 的链接不再有效。它正在工作，现在我添加了事件管理员，但没有。我的链接是 :delete, :clas
设计:更改密码
我已经坚持了超过 24 小时，试图按照此处发布的其他解决方案进行操作，但我无法使其正常工作。我是 Rails 新手，需要帮助! 我想让我的/users/edit 页面正常工作，以便我可以简单地更改用户
设计 - 超时不起作用
Devise 在以下情况下不会使用户超时: 用户登录，关闭选项卡，然后在超时 + X 分钟内重新访问该 URL。用户仍处于登录状态。如果选项卡已打开并且稍后刷新/单击，则超时可以正常工作。这意味着
WPF slider 设计
我想使用这样的 slider 我希望该 slider 根据提供给它的值进行相应调整。到目前为止，我只能应用具有渐变效果的背景，但无法获得这种效果。请通过提供样式代码来帮助我。
WCF 设计 - 一个请求和响应对象还是多个？
您应该为每种方法创建一个请求/响应对象，还是应该为每个服务创建一个？如果我在所有方法中使用它，我的服务请求对象中将只有 5 个不同的东西，因为我对几乎所有方法使用相同的输入。响应对象将只有一个字典
RESTful 设计 - 如何为实体的附件建模
我正在尝试在 REST 中对实体的附件进行建模。假设一个缺陷实体可以附加多个附件。每个附件都有描述和一些其他属性(上次修改时间、文件大小...)。附件本身是任何格式的文件(jpeg、doc ...)
sql - 设计——第六范式
我有以下表格: Blogs { BlogName } BlogPosts { BlogName, PostTitle } 博客文章同时建模一个实体和一个关系，根据 6nf(根据第三个宣言)这是无效的。
OOP 设计 - 许多对象每个都与其他对象的有限子集具有独特的交互
如果 A 类与 B、C 和 D 类中的每一个都有唯一的交互，那么交互的代码应该在 A 中还是在 B、C 和 D 中？我正在编写一个小游戏，其中许多对象可以与其他对象进行独特的交互。例如，EMP点击
设计 + Omniauth + remember_me
关于如何记住我与 Omniauth 一起工作似乎有些困惑。根据这个wiki ，您需要在 OmniauthCallbacksController 中包含以下内容: remember_me(user)
multithreading - 将非线程安全组件与多线程组件一起使用(设计)
设计问题: 使用非线程安全组件(集合，API，...)在/带有多线程成分 ... 例子 : 组件 1 :多线程套接字服务器谁向消息处理程序发送消息... 组件 2 :非线程安全消息处理程序谁
XML 设计 - 如何？
我们目前正在设计一个 RESTful 应用程序。我们决定使用 XML 作为我们的基本表示。我有以下关于在 XML 中设计/建模应用程序数据的问题。在 XML 中进行数据建模的方法有哪些？从头开始然
XSD 设计 - 一个或多个规则
我正在设计一个新的 XSD 来从业务合作伙伴那里获取积分信息。对于每笔交易，合作伙伴必须提供至少一种积分类型的积分值。我有以下几点:
API 设计 - 最佳实践以及如何支持多个版本
设计支持多个版本的 API 的最佳方法是什么。我如何确保即使我的数据架构发生更改(微小更改)，我的 api 的使用者也不会受到影响？任何引用架构、指南都非常有用。最佳答案 Mark Nottingh
文件上传的 REST 设计
关闭。这个问题是opinion-based 。目前不接受答案。想要改进这个问题吗？更新问题，以便 editing this post 可以用事实和引文来回答它。 . 已关闭 4 年前。 Improv
PHP 文件布局/设计
我想用 php 创建一个网站，其工作方式与 https://www.bitcoins.lc/ 相同。确实，就每个页面上具有相同布局但内容会随着您更改链接/页面而改变而言，我如何在 php 中使用lay
Java Swing 设计
我有一个关于编写 Swing UI 的问题。如果我想制作一个带有某些选项的软件，例如在第一个框架上，我有三个按钮(新建、选项、退出)。现在，如果用户单击新按钮，我想将框架中的整个内容更改为其他内容。
docker - Kubernetes建筑/设计/？
我正在尝试找出并学习将应用程序拥有的一堆Docker容器移至Kubernetes的模式和最佳实践。诸如Pod设计，服务，部署之类的东西。例如，我可以创建一个其中包含单个Web和应用程序容器的Pod，但

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - 负责任的设计 - 不要处理所有元素