Подменю изменения дизайна для мобильных устройств

Question

У меня есть нижний колонтитул, содержащий около 10 ссылок, а когда область просмотра - 320 пикселей или меньше, я хотел бы изменить этот нижний колонтитул, чтобы отображать только две ссылки. Как я могу это сделать? У кого-нибудь есть хорошие ссылки (я не был уверен, как/что для Google).

Является ли ситуация ситуацией, когда мне придется создавать элементы dom через javascript?

Answer 1

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

@media (max-width:320px){ 
    ... 
} 

в этом случае СМИ запроса условные проверяет документ «видовой» меньше, чем 320px в ширине и будет применяться независимо от CSS вы положили в теге медиа запросов (и FYI вы можете гнездо множественные CSS стили в рамках одного медиа-запроса)

вставить медиа-запрос в таблицу стилей, дать эти мобильно-скрытые ссылки класс и установить их для отображения ни в следующем:

@media (max-width:320px){ 
    .mobileHidden{ 
     display:none; 
    } 
} 

mozilla developer network has an article here on media queries, если вы хотели бы некоторые дополнительные чтение. использование медиа-запросов обычно называется «Отзывчивый веб-дизайн» и должно отлично работать в любых современных веб-браузерах.

Answer 2

просто добавить класс к вашей ссылке, а затем установить дисплей: никто на некоторых разрешениях ..

@media (min-width: 320px) { 
    .do-now-show-on-mobile { 
     display: none; 
     } 

Answer 3

Если каждый из них имеют отдельные классы по ссылкам, просто нацелить их с запросами средств массовой информации, нет необходимости javascript

<footer> 
    <a href="" class="link1">Link here</a> 
    <a href="" class="link2">Link here</a> 
    <a href="" class="link3">Link here</a> 
    ... 
    <a href="" class="link10">Link here</a> 
</footer> 

@media (max-width: 320px) { 
    .link1,.link2,.link3 { 
     display: none; 
    } 
}