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

Question

我被一个课程作业卡住了，问题是如何以正确的方式优化我的移动和平板电脑主页。问题是我甚至不确定该问什么问题。我知道我的代码不能完全工作(我将在下面提供它，以防万一)，但是我给出的示例代码是非常非常严格地为一个特定的示例编写的，取自我的课程文献。因此，我在应用它时遇到了很大的问题。我现在真的不知道该改变什么，我已经试了一个月了。如你所理解的初学者程序员。

我很抱歉问了这么一个模糊的问题；这相当于试图联系到有时间帮助我的项目的人。我的老师不会帮我的，我想我已经在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;}

}   

Answer 1

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