现在做响应式设计还来得及吗

Question

我一直在网站上工作，它在我的屏幕上看起来不错。但是，当我用其他分辨率检查我的设计时，元素遍布屏幕。我是 web 开发的新手，所以我有一个坏习惯，即使用顶部、右侧的命令移动项目。我应该更改代码本身还是@media query 会帮助我解决这种情况？如果是这样，你能推荐一个好的教程吗？我将 post 我的 CSS 的一小段，以更清楚地说明我正在处理的内容。

.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;
    
}

Answer 1

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

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

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

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

此回答仅供参考。我很遗憾看到你太晚意识到 “响应能力”。我去过那儿。这一切的好处是它可能会教你一个教训（就像对我一样）不要再忘记它了:)

祝你好运！

Answer 2

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

首先，您需要在 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) {}

现在做响应式设计还来得及吗

Is it too late to make responsive design

html

css

media-queries

responsive