Оптимизация для мобильных устройств / планшетов для HTML / CSS с помощью MQ

#html #css #mobile #media-queries #tablet

#HTML #css #Мобильный #медиа-запросы #планшет

Вопрос:

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

Мне очень жаль задавать такой расплывчатый вопрос; это скорее попытка обратиться к кому-то, у кого есть время, чтобы помочь мне с моим проектом. Мой учитель мне не поможет, и я думаю, что к этому моменту я прочитал все в Google. Я знаю, что достигаю цели.

Заранее благодарю вас.

Код MQ (если это поможет):

 /*MQ Mobile*/
@media only screen and (max-width: 1024px) {
    html, body {    
     margin:0; /* remove default margin */
     padding:0; /* remove default padding */
     width: auto;
}
    #content { width: auto;}
    #text { width: auto;}
    main { margin-left: 0; width: auto; }
    aside {display: none; }
    nav li {display: inline-block; padding: 0.5em;}
    nav ul { text-align: center; }
    nav a { border-style: none;}
    h1 { font-size: 120%;}
    p {font-size: 90%}

}

@media only screen and (max-width: 768px) {
    html, body {    
     margin:0; /* remove default margin */
     padding:0; /* remove default padding */
     width: auto;
}
     h1 {font-size: 100%;}
     p { font-size: 120%; }
     figure { display: none; }
     nav, nav ul, nav li { padding: 0.1em; font-size:90%; }
     nav li {display: block;}
     nav a { display: block; padding: 0.5em 0; border-bottom: none;}

}   
  

Ответ №1:

 @media screen and (min-width: 479px) and (max-width: 1024px){ /* your css between 1024px until for example 479px  */}
  

Комментарии:

1. Я не понимаю. Куда вы хотите, чтобы я это поместил? Первый mq создан для планшетов, второй — для мобильного использования.

2. Хотя этот фрагмент кода может решить проблему, включение объяснения действительно помогает улучшить качество вашего поста. Помните, что вы отвечаете на вопрос для читателей в будущем, и эти люди могут не знать причин вашего предложения по коду.