Question

我注意到我的某些页面在笔记本电脑和台式机上的显示方式有所不同。我还注意到，当您缩小或拖动浏览器角落并使其较小时，组件无法正确缩小（调整大小）

我试图将视口添加到我的css和我在这里找到的其他一些缩放属性中。

<div class="column">
<main class="toggle1">
  <details>
    <summary role="button" tabindex="0">
      Sell directly to the buyer
    </summary>
    <div>
      <p>When you work directly with the buyer you have the potential to 
         save 5-7% in real estate commissions. The
        median existing home price for all new homes as of Oct 2018 is 
        $309,700 for the median price and $257,700
        for
        existing homes as per the US census data. So you, the seller have 
        the potential of saving up to $27,650.00
        in
        commissions. Sellers pay the commission, so you the seller can be 
        more flexible with the price.
      </div>
    </details>

当用户从不同的设备或屏幕尺寸查看网站时，我希望所有内容都能正确呈现。

Answer 1

您应该使用此站点，实际上，使用它搜索Google相当容易：https://blog.teamtreehouse.com/beginners-guide-to-responsive-web-design

这将向您展示如何使用css和html使网站响应任何客户端

Answer 2

您正在寻找的是响应式网页设计。创建一个网站并使其在屏幕上看起来像CSS一样简单，但是您要记住，并非每个人都使用相同大小的屏幕。监视器大小不同，每个像素大小不同。除此之外，您还需要考虑到手机，平板电脑等小屏幕尺寸。

有很多设计响应式网页设计的指南，您可以从Google的快速搜索中找到，但这是基础知识：

1 在CSS中编码时，请使用百分比而不是像素。为了适应多种屏幕尺寸，如上所述，您必须考虑到每个屏幕的像素数量都不相同。因此，在某些屏幕上，您网站的外观可能与您最初的计划有所不同。对于随屏幕大小或浏览器大小变化而变化的自适应网页设计，我们使用百分比，以便计算机可以根据您的喜好呈现屏幕的该区域。看下面的这段代码：

<!--SHOWCASE AREA-->
    <div class="container">
        <h1>We are currently working hard on building our new website</h1>
    </div>

.container{
    width:80%;
    margin:auto;
    overflow:hidden;
}

而不是宽度：96px；等等等等，我们使用一定比例的屏幕进行渲染。

在另一种情况下，假设您已经编码了一种表格，该表格在向左浮动的1000px屏幕上约宽400px。要将其更改为百分比，您只需将400/1000乘以100，就可以得到40％，可以在响应式网站中使用。

2 使用媒体查询。当涉及到响应式网页设计时，这确实是大腕。媒体查询基本上是在告诉CSS在浏览器大小或屏幕大小减小到某个像素大小时进行更改。不同的屏幕有不同的像素大小。许多站点使用全部媒体查询负载来适应每个平台，但实际上，您现在只需要3-4个就可以适应各种设备。在Google上进行快速搜索还会找到适合媒体查询的最佳像素大小。

例如，假设您有一些这样的代码：

<div id="topleft">
                    <h2>Text</h2>
                </div>

原始CSS：

#topleft{
    text-align:center;
    float:left;
}

然后，您要在达到特定阶段时将其更改为不浮动，只需添加媒体查询即可。

@media(max-width: 768px){
    #topleft,
    #topright{
        float:clear;
        text-align:center;
        width:100%;
    }

}

某种程度上的媒体查询有点像HTML中使用的笼子或容器。所有代码都必须包含在其中才能起作用。并且必须与下面显示的文本相同（减去像素值），否则它将无法正常工作。

*@media(max-width: 0px){

}*

希望这对您有所帮助！同样，在对响应式网站进行编码时，google是一件方便的事情！

如何调整屏幕大小以适应不同的大小并最小化浏览器

2 个答案: