使我的网站具有响应性（在任何手机、台式机中）

Posted 2023-02-19

【中文标题】使我的网站具有响应性（在任何手机、台式机中）

【英文标题】：Making my Website responsive (in any phone,desktops)

【发布时间】：2019-01-21 08:16:12

【问题描述】：

我是 html、CSS 的新手，我正在尝试为我的项目创建一个网站，但是其中一个要求是它应该是响应式网站。 出于某种原因，我的黄色盒子变得越来越小，不像我的红色和蓝色盒子，当我点击智能手机查看时，笔记本电脑视图和不同的另一个视图都很大，只是黄色盒子变得又小又薄。我想寻求帮助或建议，使其成为响应式网站，谢谢

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>

  <div class="row">
    <div class="col-md-4" style="margin-left: 3%"  >
      <div class="color">Column 1</div>
      <div class="color" >Column 2</div>
    </div>
    <div class="col-md-8">Column 3</div>
  </div>
  <style type="text/css">
    .color:nth-child(1) 
    background:red; 
    height:40%;
    margin-top:5%;
    margin-left: 2%;
    border-radius: 4%;
    width: 100%;    

 .color:nth-child(2) 
    margin-top: 3%;
    border-radius: 4%;
    background:blue; height:260px;
 
.col-md-8 
    background:yellow; height:628px;
    width: 38%;
    margin-left: 15%;
    margin-top: 1%;
    border-radius: 9%;


  </style>

【问题讨论】：

为什么这个标签是 Bootstrap 4？究竟是什么问题/问题？

对不起，我的问题只是如何让它在手机中响应

如果它在手机上没有响应，请确保您已包含元视口标签：***.com/a/19158781/171456

【参考方案1】：

我不知道这会是一个什么样的网站，但是尝试“最小宽度”而不是黄色列中的正常“宽度”

【讨论】：

只需从黄色添加宽度的“min-”信息，但我不确定这是否是您想要的：.col-md-8 background:yellow;高度：628px；最小宽度：38%；左边距：15%；最高保证金：1%；边界半径：9%；

【参考方案2】：

红色和蓝色实际上都是响应式的，但是因为它们被设置为 100% 宽度，所以看起来它们没有做任何事情。尝试将它们的宽度设置为与黄色相同的宽度，您会发现它们确实有效。

【讨论】：

使用您提供的代码确实有效。您的 .color:nth-child(1) 的宽度为 100%，将其更改为 50% 并将 .color:nth-child(2) 的宽度设置为 50%

【参考方案3】：

简答：

由于 col-md-8 覆盖中的 width:38% css 属性，一切都按预期工作。

长答案：

第一个选项： 您想要做的是创建自己的单独类，这样您就不会直接覆盖引导类

第二个选项： Bootstrap 很可能已经为您的用例准备好了所有类，所以尽量不要编写自己的 css 并重用 bootstrap 中的实用程序类，请参阅： https://getbootstrap.com/docs/4.0/layout/grid/

https://getbootstrap.com/docs/4.1/layout/utilities-for-layout/

https://getbootstrap.com/docs/4.1/utilities/spacing/

请记住正确的 html 文档布局，为方便起见，这里是引导启动模板：

https://getbootstrap.com/docs/4.0/getting-started/introduction/#starter-template

并将 css 放置在文档中的适当位置： https://www.w3schools.com/css/css_howto.asp

【参考方案4】：

我建议通过以下网站上的 HTML 和 CSS 课程：

https://www.freecodecamp.org/ 和 https://www.codecademy.com/catalog/language/html-css

它们都是免费的，因此请在使用引导程序之前熟悉基本的 HTML 和 CSS。这些课程还解释了如何以您想要的方式使页面具有响应性，您将更加了解您想要做什么以及如何去做。