Html 将我的头脑（和本网站）围绕响应性设计

所以我用纯HTML、CSS和升华文本从零开始创建了一个网站，我创建这个网站是为了在我的投资组合中展示给潜在的雇主。我是这个领域的新手，还没有找到工作，所以我给自己一些个人项目来炫耀。网站上的一切工作正常，但现在我想让它移动友好

我已经利用在Youtube上观看有关该主题的视频所获得的知识添加了一些断点。但是，如何确定给定屏幕的每个可能宽度和高度？例如，在320像素宽，它看起来不错。我去掉页眉中的图像并修复页脚，但当我达到321像素宽时，一切都乱了套。我的问题是我该如何补救？在我的媒体查询中，我可以做什么来针对所有内容？代码如下：

html，正文{
宽度：100%；
身高：100%；
边际：0px；
填充：0px；
背景图像：url（../images/bg.jpg）；
背景附件：固定；
背景位置：中心；
背景重复：无重复；
背景尺寸：封面；
最小高度：100%；
}
/*------------------标题样式------------------*/
标题{
背景色：白色；
边框底部样式：实心；
溢出：自动；
高度：200px；
字体系列：“Freehand521BT”，Arial，无衬线；
}
标题p{
字体系列：“Freehand521BT”，Arial，无衬线；
保证金：20px 0px 0px 20px；
字体大小：60px；
}
收割台img{
浮动：对；
左边框：实心；
}
/*------------------主导航样式------------------*/
#主要链接{
边缘顶部：60像素；
}
#美联保险公司{
边缘底部：0px；
}
#主要链接a{
列表样式类型：无；
文字装饰：无；
颜色：黑色；
右边距：90像素；
左边距：-10px；
字体大小：25px；
}
#主要链接a：悬停{
颜色：#D423A2；
过渡：均为0.5s；
}
#主要链接李{
显示：内联；
右侧填充：5px；
}
/*------------------辅助导航样式------------------*/
李先生{
显示：内联；
列表样式类型：无；
}
.第二链接{
左侧填充：0px；
}
.第二链接a{
右边距：30px；
文字装饰：无；
颜色：黑色；
}
.a:悬停{
颜色：#7A0A56；
过渡：缓进缓出0.7秒；
}
.a#月亮：悬停{
颜色：#FFE619；
过渡：缓进缓出0.7秒；
}
.a#火星：悬停{
颜色：#E30000；
过渡：缓进缓出0.7秒；
}
.a#水星：悬停{
颜色：#1BB9EB；
过渡：缓进缓出0.7秒；
}
.a#木星：悬停{
颜色：#21EB47；
过渡：缓进缓出0.7秒；
}
.a#维纳斯：悬停{
颜色：#F7B20F；
过渡：缓进缓出0.7秒；
}
/*------------------主要内容样式------------------*/
#内容包装{
背景色：rgba（231231231.7）；
边框样式：实心；
边界半径：10px；
边缘顶部：20px；
左边距：20px；
右边距：20px；
边缘底部：150px；
填充：15px；
填充底部：50px；
最小高度：100%；
字体系列：“Freehand521BT”，Arial，无衬线；
字号：17px；
}
#内容包装{
边框样式：实心；
}
.顶{
文本对齐：居中；
颜色：黑色；
文字装饰：无；
}
.top:悬停{
颜色：#D423A2；
过渡：均为0.5s；
}
/*------------------页脚样式------------------*/
页脚{
背景色：#fff；
边框顶部样式：实心；
利润上限：-130px；
宽度：100%；
高度：130像素；
字体系列：“Freehand521BT”，Arial，无衬线；
字体大小：15px；
位置：相对位置；
明确：两者皆有；
}
#页脚导航{
浮动：对；
}
#李国宝{
显示：内联；
}
#页脚导航a{
颜色：黑色；
文字装饰：无；
右边距：30px；
}
#页脚导航a：悬停{
颜色：#D423A2；
过渡：均为0.5s；
}
#版权所有{
位置：绝对位置；
左：550px；
底部：30px；
}
/*------------------响应式设计的媒体查询------------------*/
@媒体屏幕和屏幕（最大宽度：960像素）{
#标题{
宽度：自动；
}
#内容包装{
宽度：自动；
}
#页脚{
宽度：自动；
}
#版权所有{
左：300px；
}
}
@媒体屏幕和屏幕（最大宽度：812px）{
标题p{
字体大小：50px；
}
#版权所有{
左：250px；
}
}
@媒体屏幕和屏幕（最大宽度：320px）{
标题p{
字体大小：29px；
}
#主要链接a{
字体大小：20px；
右边距：15px；
}
收割台img{
宽度：0px；
高度：0px；
}
#版权所有{
左：100px；
字体大小：10px；
}
#法老王90号内容图片{
宽度：100%；
}
#皇后尼赫莱尼亚内容图片{
宽度：100%；
}
}

星星的捍卫者--官方水手文范佩奇！
星星的捍卫者






欢迎粉丝们！
欢迎来到官方的水手月亮粉丝页面！在这里你会发现很多关于水手月亮宇宙的信息！包括人物和反派，以及到目前为止的故事概述。我们还将不断更新本页面，了解水手月亮世界的最新情况

2014年7月5日-新的水手月亮动画，水手月亮水晶发布

©；版权所有2016 Jorge Goris。
由Jorge Goris设计和开发





你必须考虑网站的设计和元素，并决定什么样的屏幕大小，显示哪些内容以及隐藏什么，等等。然后，通过使用媒体查询，您可以针对每个不同的屏幕大小范围，对应用于元素的样式进行更改，以使网站具有响应性
至于你所说的321px之后网站会出问题，你需要定义更多的媒体查询，针对320px范围以外的不同屏幕尺寸。一旦你做到了这一点，你的网站就会看起来很好，无论它是在哪个设备上浏览的

下面是一篇关于标准媒体查询的文章，它将帮助您定义范围：
我想你需要和我谈谈