Question

我查看了所有其他类似的问题，但找不到答案。因此，首先，我对编程没有什么了解，而我才刚刚开始学习CSS。我用以下代码制作了一个页面：

<html>
<style>
    body {
    p.Welcome {
      font-family: "Comic Sans MS", cursive, sans-serif;
      font-size: 23px;
      font-weight: bold;
      color: white;
      text-align: center;
    }
    section {
      border-radius: 1em;
      padding: 1em;
      position: absolute;
      top: 49%;
      left: 50%;
      margin-right: -50%;
      transform: translate(-50%, -50%)
    }
</style>
<section>
  <p class="Welcome">hi</p>
  <img src="blablabla whatever image" />
</section>


<html/>

我想即使在移动设备上也要强制使用台式机版本，例如即使我用移动设备打开该页面时，同一页面也必须显示且分辨率和其他内容不变。

Answer 1

我在下面添加了一些评论，目的只是为了帮助您纠正HTML中的一些错误。您必须了解，此类错误在很大程度上取决于浏览器的解释，每个浏览器可能使用不同的引擎或不同的方法来保证结果的一致性。

添加的评论：

您不应使用空规则声明（位于CSS的主体规则下）。
始终寻找结束标记。尝试使用Sublime，VS Code或Atom，因为它们具有“问题”通知者，可以帮助您在学习时发现这些错误。（位于CSS中的身体规则下）。
如果您的目标是响应能力，请尝试远离绝对定位，否则您将不得不以媒体查询的方式获得相同的结果。（位于CSS中的rull下）。
打开的每个标签都必须关闭。特别是为了兼容性。每种浏览器对这些错误的处理方式都不同，因此由浏览器来决定结果，在每种浏览器中（在HTML的主体关闭标签上方）您不会看到相同的结果。
关闭HTML标签时，格式为</html>。后面的斜杠用于自动关闭标签。（位于文档末尾）。

要更直接地回答您的问题，这很困难。您应该了解所有屏幕的大小和尺寸都各不相同，因此必须围绕此屏幕进行设计，无一例外。否则没有办法强迫。如果将元素的宽度设置为800px，但屏幕的宽度为324px，则该元素将不适合屏幕。

所以我的回答是，您正在寻找一种摆脱响应式设计的方法，而您不能这样做。是的，可能需要做很多工作，但是您会随着时间的流逝养成习惯。也许我也推荐freeCodeCamp，因为它们增加了一些出色的挑战来帮助教授更新的实践，以使您的项目更具响应性，以及诸如盒模型的基本原理。

<!-- Always specify your DOCTYPE, note that DOCTYPE is case sensitive. -->
<!DOCTYPE html>
<html>
<!-- You should have a head tag -->
<head></head>
<style type="text/css">
  /* You should not use empty rule declarations */ body {}
  /* Always look for closing tags. Try to use maybe Sublime, VS Code, or Atom as they have "problem" notifiers that may help you catch these mistakes when learning. */

  p.Welcome {
    font-family: "Comic Sans MS", cursive, sans-serif;
    font-size: 23px;
    font-weight: bold;
    color: white;
    text-align: center;
  }

  section {
    border-radius: 1em;
    padding: 1em;
    position: absolute;
    /* If your goal is responsiveness, try and stay away from absolute positioning, or you'll have to media query your way to the same results. */
    top: 49%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%)
  }
</style>
<!-- Sections are used for giving semantic clarity to your document, so summarize what the section is -->
<section id="welcome">
  <p class="Welcome">hi</p>
  <img src="http://whatever.com/image.jpg" />
</section>
<!-- Every tag opened must be closed. Especially for compatibility. Every browser will handle these errors differently, so leaving it up to the browser to decide the result, you won't see the same results in every browser -->
</body>
<!-- When you close HTML tags, the format is </html>. Slashes after are for self-closing tags. -->

</html>

即使在移动设备上也可以强制桌面视图

1 个答案: