Html 如何根据不同的宽度和高度相应地调整元素

下面是屏幕截图，其中包含OK文本作为一个元素，在左侧和右侧以及最后一个按钮中包含2个其他元素

。居中文本{
字体大小：粗体；
字体风格：普通；
文本对齐：居中；
字体大小：25px；
线高：30px；
字母间距：正常；
不透明度：1.0；
利润率最高：25%！重要；
}
.低含量{
边缘底部：30px；
}
.group:之前，.group:之后{
内容：“；
显示：表格；
}
.小组：之后{
明确：两者皆有；
}
.组{
明确：两者皆有；
*缩放：1；
}
.左下角内容{
浮动：左；
利润率：01.5%；
宽度：63%；
}
.右下角内容{
浮动：对；
利润率：01.5%；
宽度：30%；
}
.按钮左{
位置：绝对位置；
宽度：140px；
高度：140像素；
左：100px！重要；
右：0；
底部：0；
顶部：620px；
}
.按钮左>div{
宽度：100px；
高度：100px；
}
.通知按钮{
左边距：15px；
边缘顶部：10px；
缩放：2.0；
}
.按钮右{
位置：绝对位置；
宽度：140px；
高度：140像素；
左：250px；
右：20px；
底部：0；
顶部：620px；
}
.按钮右侧>div{
宽度：100px；
高度：100px；
}
.心形按钮{
左边距：15px；
边缘顶部：10px；
缩放：2.0；
}

Ok
点击这里
点击

这里
否则点击这里
点击这里

也

尝试通过分辨率来使用css

例如：

@media (max-width: 300px) {
    .your-class {
        your:option; }
        }

@media (max-width: 600px) {
    .your-class {
        your:option; }
        }

---

我不想对给定的代码使用媒体查询，它可以正常工作。用你的代码检查一下这把小提琴：