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

Question

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

很抱歉问这样一个含糊的问题；这是试图联系有时间帮助我完成元素的人。我的老师不会帮助我，我想我已经在谷歌上阅读了所有内容。我知道我快到了。

提前谢谢你。

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  */}