2

我正在编写一个响应式设计，它具有基于屏幕分辨率的几种不同导航布局（ps 我无法控制我工作的设计决策）。

我发现仅通过 CSS 更改来实现不同的布局非常困难。但我也不喜欢在许多地方为相同元素使用重复标记的想法，因为这看起来很丑陋，因为原因或维护以及可能对 SEO 产生不良影响（尽管除了默认值之外的所有内容都将设置为在页面加载时不显示） .

无论如何，对此有何想法？这样做是否非常违反良好做法？

4

1 回答 1

0

是的，这样做完全没问题，请确保将媒体查询放在 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;
}
}
于 2013-04-02T22:27:31.990 回答