Верстка, CSS, HTML, SVG

Великая проблема (HTML+CSS)

Всем здравствуйте, есть вопрос.
Есть у меня сайт (к примеру) на нём стандартная менюшка горизонтальная по длине сайта. Но, когда я захожу на свой сайт с телефона (снова же, к примеру) Nokia 210 ASHA, то на своем маленьком экране я вижу длинную не оптимизированную меню, которая не поддается оптимизации с моих "прямых" рук...

Так вот, как мне сделать что бы меню отображалось в "сокращенном" варианте, как на playua.net ?
ФХ
Фаргат Хайруллин
396
Ну дык нужно сделать отдельный стиль для смартфонов и телефонов)
АТ
Александр Токарев
344
Лучший ответ
Фаргат Хайруллин Я сделал 4 CSS файла, где:
1. @media only screen and (min-width: 220px) {}
2. @media only screen and (min-width: 481px) {}
3. @media only screen and (min-width: 780px) {}
4. @media only screen and (min-width: 1172px) {}

Отображается под мобилу всё, кроме меню, как я ей задал параметры в первом CSS файле, так и видит при других размерах.
Ержан Т !импортабле
не забудь также прописать в индексе < meta name = "viewpor t" content = "width=device-width, initial-scale=1.0" >
иначе медиа-запрос не будет работать..
иначе медиа-запрос не будет работать..
Yuldosh Saksonov
Yuldosh Saksonov
6 999
Есть стили для отдельных устройств это media css

вот вам для всех устройств

/* Smartphones (portrait and landscape) -----------*/
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) -----------*/
@media only screen
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) -----------*/
@media only screen
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) -----------*/
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) -----------*/
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) -----------*/
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops -----------*/
@media only screen
and (min-width : 1224px) {
/* Styles */
}

/* Large screens -----------*/
@media only screen
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 -----------*/
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
Мирсеит Садабаев
Мирсеит Садабаев
6 131
Станислав ********* Оно работает? Сейчас же даже на говнодевайсах разрешения идут full hd ++
Yuldosh Saksonov не забудь также прописать в индексе
иначе медиа-запрос не будет работать..

Похожие вопросы