Запросы на мобильную связь

Question

У меня есть website, что мне нужно работать на мобильных устройствах в настоящее время, как показано на рисунке ниже.

До сих пор я имел следующие идеи:

1. Копирование 680 строк CSS снова в том же документе между @media only screen тегами.
2. Скопируйте этот код в mobile.css стилей и начать заново

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

iPhone Вид:

Answer 1

Это собирается занять немного работы, но стоит. Вы должны взять CSS, который слишком велик на мобильных устройствах и помещать их в конкретные медиа-запросы на основе размера. Допустим, вы хотите, чтобы ваши заголовки изменить от 80px до 40px, когда размер экрана меньше, чем 600px:

@media screen and (max-width: 1000px) { 
.mytitle { 
    font-size: 80px; 
    } 
} 
@media screen and (max-width: 600px) { 
.mytitle { 
    font-size: 40px; 
    } 
} 

Answer 2

Поместите это в голове вашего HTML

<meta name='viewport' content='width=device-width, initial-scale=1 />