#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. Хотя этот фрагмент кода может решить проблему, включение объяснения действительно помогает улучшить качество вашего поста. Помните, что вы отвечаете на вопрос для читателей в будущем, и эти люди могут не знать причин вашего предложения по коду.