Устранение дублированного содержимого для отзывчивой страницы

Question

В настоящее время я работаю над проектом, отвечающим за отзывчивый дизайн, и весь макет должен быть достигнут с помощью HTML и CSS. Я знаю, что возможно перемещать содержимое из одного макета столбца в другое, без дублирования контента, используя скрипт java, но тот же, который можно достичь с помощью HTML и CSS?

Возьмем, например, после чего сделает, как это на дизайн настольного

--page------------------- 
| -------- -------- | 
| |div 1 | | div 2| | 
| -------- -------- | 
------------------------- 

Но тогда дизайнер переехал div1 ниже div2 на мобильном дизайне.

--page-------- 
| -------- | 
| |div 2 | | 
| -------- | 
| -------- | 
| |div 1 | | 
| -------- | 
-------------- 

Очевидно, что естественный способ, с помощью которого элементы уровня блока складываются, - это наоборот.

--page------------------- 
| -------- -------- | 
| |div 1 | | div 2| | <--- shown on desktop 
| -------- -------- | 
| --------    | 
| |div 1 |    | <--- hidden on desktop 
| --------    | 
------------------------- 

--page-------- 
| -------- | 
| |div 1 | | <--- hidden on mobile 
| -------- | 
| -------- | 
| |div 2 | | <--- shown on mobile 
| -------- | 
| -------- | 
| |div 1 | | <--- shown on mobile 
| -------- | 
-------------- 

Используя выше, содержание div1 дублируется. Это плохо для SEO? Очевидно, что это не оптимально, так как содержимое отображается дважды в DOM и т. Д., Поэтому скорость влияет (хотя и незначительно).

Есть ли какие-либо другие решения, которые я мог бы реализовать, которые не основаны на javascript, которые могут облегчить проблему?

Любой совет будет очень благодарен.

Answer 1

Если divs являются прогнозируемым размером (например, 50em), вы можете просто их смещать с position: relative и отрицательными значениями top. Это позволит вам создать видимый переупорядоченный поток без изменения разметки.

Например:

#div1 { 
    float: left 
    clear: both; 
    height: 50em; 
    position: relative; 
    top: 50em; 
} 

#div2 { 
    float: left 
    clear: both; 
    height: 50em; 
    position: relative; 
    top: -50em; 
} 

Место, что внутри запроса средств массовой информации, и это даст вам результат вы хотите.

Answer 2

Содержание поединка - проблема, которую лучше всего избежать, конечно. И мы всегда должны создавать элементы, которые могут быть любой высоты, чтобы обеспечить содержание CMS.

Я предлагаю порядок наценка должна быть:

--page-------- 
| -------- | 
| |div 2 | | 
| -------- | 
| -------- | 
| |div 1 | | 
| -------- | 
-------------- 

... как дизайнер определяет в мобильном макете. Ширина имеет тенденцию быть более узнаваемой, чем высота, поэтому на рабочем столе вы можете сделать «старый переключатель», чтобы изменить свои позиции. Clearfix подразумевается. Например, на рабочем столе:

.div1, .div2 { 
    float: left; 
    position: relative; 
    width: 200px; 
} 
.div2 { 
    right: -200px; 
} 
.div1 { 
    left: -200px; 
} 

... который должен дать вам этот макет:

--page------------------- 
| -------- -------- | 
| |div 1 | | div 2| | 
| -------- -------- | 
------------------------- 

(я не проверял этот код - по всей вероятности, я получил мое правое и левое смешанное)

Имеет ли это смысл?

Answer 3

Повторяющийся контент для SEO - настоящая проблема с отзывчивыми страницами, если вы скрываете и не скрываете элементы. Код по-прежнему отображается в DOM, и если поисковые системы могут видеть код (даже если пользователь не может видеть результат), он все равно будет считаться с вами. Ни один из приведенных выше ответов не дает реального решения для этого, и, честно говоря, я не могу ни на этот момент.

Я двигаюсь к фактическому удалению элементов с помощью javascript из DOM, но это становится очень грязным и не является идеальным.

Ответ на мультимедийный запрос выше не изменит тот факт, что вы все еще имеете HTML-вывод в DOM с дублирующимся контентом.

Answer 4

Я знаю, что опаздываю, но я надеюсь, что это поможет кому-то другому.

Я решил бы это, думая, что это мобильный телефон. #div1 должен быть первым, указанного в мобильных разрешениях, и #div2 второй.

Тогда я бы сделал их обоими плавать вправо, так что «первый» будет показан справа, когда захочет.

Вот пример (лучше видеть его в полную страницу, чтобы увидеть отклик):

* { box-sizing: border-box; } 
 
div { border: 1px solid gray; } 
 
#div1 { background: lightblue; } 
 
#div2 { background: yellow; } 
 
@media (min-width: 768px) { 
 
    div { 
 
    display: inline-block; 
 
    width: 50%; 
 
    float: right; 
 
    } 
 
}

<div id="div1"> 
 
    <p>This div will be shown on top on mobile resolutions, and will be in the right in any other resolution!</p> 
 
    <p>We could say it will be a main content holder in mobile, and secondary in desktop</p> 
 
</div> 
 
<div id="div2"> 
 
    <p>This div will be shown on bottom on mobile resolutions, and will be in the left in any other resolution!</p> 
 
    <p>We could say it will be a main content holder in desktop, and secondary in mobile</p> 
 
</div>

Answer 5

• CSS-order свойство можно использовать для изменения порядка flex детей.
• Bootstrap4 представил некоторые гибкие утилиты, которые можно использовать для изменения порядка гибких детей.

<div class="row"> 
    <div class="col-sm-6 order-2 order-sm-1">div 1</div> 
    <div class="col-sm-6 order-1 order-sm-2">div 2</div> 
</div> 

Рассмотрим самозагрузки на основе фрагмента кода выше. div 1 и div 2 появятся в исходном порядке для устройств с sm и выше (md, lg, xl), тогда как div 2 появляется перед div 1 на xs устройствах.