Html 当编码响应性设计时，对同一页面元素进行多个标记是否被认为是可接受的做法？

我正在编写一个响应性设计，该设计基于屏幕分辨率具有多个不同的导航布局（请注意，我无法控制我工作的地方的设计决策）

我发现单凭CSS的改变很难实现不同的布局。但我也不喜欢在许多地方为相同的元素设置重复标记的想法，因为出于某些原因或维护以及可能对SEO造成的不良影响（尽管除了默认设置之外，其他所有设置都将设置为在页面加载时不显示）

---

不管怎么说，你是怎么想的？这样做会严重违背良好做法吗？

是的，这样做完全可以，确保将媒体查询放在CSS的底部，这样这些样式将最后加载。在我看来，最明智的做法是使用带有行和列的网格系统，然后说，当您进行媒体查询时，您可以只显示所有列的宽度和100%，这将堆叠您使用的每个div，然后选择“是”您需要为媒体查询重写一些元素、类和ID，但在移动版上使用网格并使列的宽度为100%

这是我建立的一个简单的网格系统，你可以看到我是如何导航的

/* GRID */

*,*:before,*:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.layout-row {
    margin: 0 auto;
    width: 96em;

    zoom: 1;
}
.layout-row .layout-row { width: auto;}

.layout-row:before, .layout-row:after {
    display: block;
    visibility: hidden;
    height: 0;
    content: "\0020";    
}

.layout-row:after { clear: both;}

.layout-column {
    position: relative;
    display: inline;
    float: left;
    padding: 1em ;
}

.layout-column .layout-column { padding: 0;}


.one { width: 8.33333%;}

.two { width: 16.66667%;}

.three { width: 25%;}

.four { width: 33.33333%;}

.five { width: 41.66667%;}

.six { width: 50%;}

.seven { width: 58.33333%;}

.eight { width: 66.66667%;}

.nine { width: 75%;}

.ten { width: 83.33333%;}

.eleven { width: 91.66667%;}

.twelve { width: 100%;}

/* MODULES */

.layout-navigation { margin: -2em 0 0;}

.layout-navigation li {
    float: left;
    padding: 3em .75em .5em;
    text-align: center;
}

/* MOBILE MEDIA QUERY */

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

.layout-row { width: 48em;}

.layout-column { width: 100%;}

.hide-mobile { display: none;}

.layout-navigation li {
    float: none;
    padding: 1em;
    background: #F3F3F3;
    text-align: left;
}
}

---

如果使用媒体查询，则不违反最佳做法。例如，媒体查询显示手风琴菜单而不是选项卡菜单被视为响应性设计的正常做法。这是关于给用户最好的体验，不要为了适合你的代码而妥协。是的，我正在使用媒体查询来调整CSS以获得不同的分辨率。我想知道的是关于标记的问题。同一个html可以有多个版本吗？