做出响应式设计是否为时已晚答案

【问题标题】：Is it too late to make responsive design做出响应式设计是否为时已晚
【发布时间】：2021-06-05 05:10:14
【问题描述】：

我一直在网站上工作，它在我的屏幕上看起来不错。然而，当我用其他分辨率检查我的设计时，屏幕上到处都是元素。我是 web 开发的新手，所以我有一个用 top, right 命令移动项目的坏习惯。我应该更改代码本身还是@media 查询可以帮助我解决这种情况？如果是这样，你能推荐一个好的教程吗？我将发布我的 CSS 的简短 sn-p 以更清楚地说明我在处理什么。

.sidebar {
  position: fixed;
  width: 30%;
  height: 100vh;
  background: #312450;
  font-size: 0.65em;
  opacity: 0.8;
  
  
}


.container {
    
    float:right; /* BE SITO PZDC BUNA KAZKODEL */
  }

  .logo {
    padding-bottom: 3em;
    z-index: 50;
    width: 300px;
    height: auto;
    position: absolute;
    left: 18%;
    top: 10%;
    
   }

img {
position: relative;
  width: auto;
  float: left;
  height: 40vh;
  z-index: 999;
  padding: 2em 20px;
}

.nav {
  position: relative;
  margin: 0 15%;
  top: 65%;
  transform: translateY(-50%);
  font-weight: bold;
  animation: slide-up 1.1s ease;
}

.nav ul {
  list-style-type: none; /* KAD NEBUTU JUODU TASKELIU */
}
.nav-item {
      color: rgba(#FFF, 0.35);
      display: block;
      border-style: solid;
      border-radius: 30px;
      width: 380px;
      text-transform: uppercase;
      margin-top: 30px;
      text-align: center;
      list-style-type: none;
      flex-direction: column;
      padding: 1rem 2rem 1.15rem;
    cursor: pointer;
    animation: slide-up 1.1s ease;
    }
    
    /* kad visada baltas tekstas butu navbar */
    .nav-item {
  color: #fff;
  text-decoration: none;
}
/* uzvedus pelyte orange spalva navbar */
.nav-item:hover {
    color: #f98673;
}

/* icons virs orange teksto */
.icon {
    width:85px;
    height: auto;
    margin-left: 7em;
    margin-bottom: -20px;
    position: relative;
   
       
}
/* tekstas apacioje */
.rows {
    display: flex;
    flex-direction: row; 
    width: 80%;
    top: 32em;
    float: right;
    position: relative;
    column-gap: 8px;
    
}

【问题讨论】：

标签： html css media-queries responsive

【解决方案1】：

响应式网页设计永远不会迟到。我总是从桌面版本开始。

首先，您需要在 css 文件的末尾创建一个媒体查询，例如：

@media only screen and (max-width: 479px) {}

在那里你可以覆盖其他 css 命令。

然后就可以复制里面的css命令了：

 @media only screen and (min-width: 480px) and (max-width: 719px) {}

这里你需要编辑和删除一些css命令。

如果需要，您还可以仅为桌面版本添加媒体查询，这意味着您可以添加一些 css 命令而无需为手机或平板电脑覆盖它们：

@media only screen and (min-width: 1200px) {}

【讨论】：

【解决方案2】：

是的，@media 查询会帮助您。是的，您很可能需要更改代码。

我的意思是，看，有无数种方法可以使用 CSS 来修复问题，以便它们看起来不错。这并不意味着他们中的任何一个：

将是合理和适当的事情
比调整 html 结构花费的时间更少

我不会分析您的代码，因为我会完全理解它并准备好为您修复它。

这个答案是一个建议。很遗憾看到您意识到“响应能力”为时已晚。我去过那儿。这一切的好处是它可能会教你一个教训（就像它对我一样）不要再忘记它了:)

祝你好运！

【讨论】：