Исключая части CSS в то время как на мобильном телефоне

Я пытаюсь использовать некоторый CSS для решения проблемы макета при отображении моего сайта на ПК. Я нашел очень простое решение, но теперь элемент находится не в нужном месте, пока он отображается на мобильном устройстве. Было бы замечательно, если бы CSS, который я вставил на свой сайт, применяется только тогда, когда страница визуализируется на ПК.Исключая части CSS в то время как на мобильном телефоне

Любое решение? Благодаря!

источник

2015-08-30 Umberto Calzari

Узнайте о запросах @media. :-) –

Вы имеете в виду разные размеры экрана или экраны мобильного/ПК? Если вы имеете в виду размеры экрана, то медиа-запросы позволят вам достичь результатов, в противном случае для разграничения между персональными компьютерами и мобильными посетителями вам нужно будет посмотреть на пользовательский агент. Для агента пользователя у меня есть класс PHP, чтобы получить желаемые результаты. – Rehmat

Если вы хотите сделать, что вы должны знать о медиа-запросов:

@media screen and (min-width: 480px) { 
    body { 
     // styles for 480px or larger screens 
    } 
}

Википедии:

Media Queries представляет собой модуль CSS3 позволяет содержание рендеринга адаптироваться к условий, таких как разрешение экрана (например, экран смартфона против экрана ). Он стал рекомендованным W3C стандартом в июне 2012 года, и является краеугольным камнем технологии адаптивного веб-дизайна.

источник

2015-08-30 08:31:50

Чтобы создать раздел CSS, который должен быть применен только к экранам определенного размера, вы можете использовать media queries. Например:

/* Regular site styles */ 
@media only screen and (max-width: 600px) { 
    /* Change styles to work for small screens */ 
}

Вы также, вероятно, хотите поставить ниже вашего <head> элемента, чтобы сделать работу трансфокации, как ожидается, на мобильном сайте:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Я рекомендую читать this article для получения более подробной информации о метатеге просмотра.

источник

2015-08-30 08:32:53

Для того, чтобы кто-либо проходил мимо, не стесняйтесь выделять исходный код моего [личного сайта] (http://parkerhoyes.com/) для простого примера этого, предоставляя ему все еще во время чтения. Изучение на примере может быть очень эффективным =) –

Исключая части CSS в то время как на мобильном телефоне

ответ

Смежные вопросы