Html 如何更改代码以使其更具响应性？

我目前正在建立我的第一个网站。我中间有一个按钮，上面有一些文字。我没有得到100%正确的响应设计。我添加了一些媒体查询，以使设计适应不同的浏览器大小。最大的问题是，当我放大整个布局时，它会变得一团糟。也许你可以看看我的代码，给我一些提示

---

body，
html{
最小高度：100%；
}
身体{
颜色：#fff；
字体系列：Arial、Helvetica、无衬线字体；
字体大小：16px；
线高：1.6em；
保证金：0；
身高：100%；
溢出：隐藏；
}
图片报{
背景重复：无重复；
背景尺寸：封面；
}
#标题{
字体大小：14px；
左缘：3%；
字体系列：“流沙”，无衬线；
}
#主页脚{
宽度：100%；
高度：40px；
背景色：#0005；
位置：固定；
左：0；
底部：0；
线高：10px；
左：3%；
}
#主页脚p{
字体系列：“流沙”，无衬线；
浮动：左；
}
#主页脚a{
字体系列：“流沙”，无衬线；
浮动：对；
颜色：#fff；
右：5%；
文字装饰：无；
边缘顶部：16px；
}
#云杉{
字体家族：“建筑师之女”，草书；
文本对齐：居中；
利润率最高：25%；
字体大小：45px；
左边缘：25%；
右边距：25%；
}
.集装箱{
宽度：80%；
保证金：自动；
溢出：隐藏；
位置：相对位置；
}
.街区{
宽度：100%；
字体大小：30px；
位置：相对位置；
}
.按钮{
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%-50%）；
利润上限：-40px；
左边距：-120px；
字体家族：“建筑师之女”，草书；
}
.按钮{
背景：无；
颜色：#ccc；
宽度：240px；
高度：80px；
边框：2倍实心#fff；
字体大小：24px；
边界半径：4px；
过渡：.6s；
溢出：隐藏；
字体风格：粗体；
颜色：#fff；
}
按钮：焦点{
大纲：无；
}
按钮：之前{
内容：''；
显示：块；
位置：绝对位置；
背景：rgba（255,255,255,5）；
宽度：60px；
身高：100%；
左：0；
排名：0；
不透明度：.5s；
滤波器：模糊（30）；
变换：translateX（-130px）skewX（-15度）；
}
按钮：之后{
内容：''；
显示：块；
位置：绝对位置；
背景：rgba（255,255,255,2）；
宽度：30px；
身高：100%；
左：30px；
排名：0；
不透明度：0；
过滤器：模糊（30px）；
变换：平移（-100px）scaleX（-15度）；
}
按钮：悬停{
背景：#cc0000；
光标：指针；
}
按钮：悬停：之前{
变换：translateX（300px）skewX（-15度）；
不透明度：.6；
过渡：.7s；
}
按钮：悬停：之后{
变换：translateX（300px）skewX（-15度）；
不透明度：1；
过渡：.7s；
}
@仅介质屏幕和（最小宽度：1101px）{
#云杉{
字体家族：“建筑师之女”，草书；
文本对齐：居中；
利润率最高：7%；
字体大小：45px；
左边缘：25%；
右边距：25%；
线高：50px；
}
.按钮{
位置：固定；
最高：50%；
左：50%；
转换：翻译（-50%-50%）；
利润上限：-40px；
左边距：-120px；
}
}

尽量避免使用px。试着用%来表示

---

此外，您还可以使用诸如Bootstrap之类的CSS框架来为您完成这项工作：

任何使用

px

而不是

%

或

calc（）的地方

您将遇到调整大小的问题。如果您的代码响应正确，您不必担心浏览器缩放。感谢您的帮助：）请将其标记为答案（如果有帮助）。