使用 MQ 对 HTML/CSS 进行移动/平板电脑优化

Question

我被困在一个课程作业上，以正确的方式优化我的手机和平板电脑主页的问题。问题是我什至不确定要问什么问题。我知道我的代码不能完全工作（我会在下面提供它以防万一），但我给出的示例代码是针对特定示例非常严格地编写的，取自我的课程文献。因此，我在应用它时遇到了很大的问题。我现在真的不知道要改变什么，我已经尝试了一个月。你可能理解的初级程序员。

很抱歉问了这么含糊的问题；这是一种尝试联系有时间帮助我完成项目的人。我的老师不会帮助我，我想我已经阅读了谷歌上的所有内容。我知道我到达了。

提前谢谢你。

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;}

}   

Answer 1

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