Jquery 如何为不同的屏幕大小修复简单的html UI分辨率

我是html开发新手。我设计了一个表单设计器，它可以很好地显示我的桌面屏幕，大小约为1366 x 768。但是当我将它放在另一台不同分辨率的机器上时，我的UI效果很差。当我放大和缩小时，这也会生效。这就是我的问题

我正在分享我的css和html代码，请看。有一个包含div的主体，该div有一些子div，如元素div、属性div和可调整大小的div（在调整大小时有很大问题）。请参阅我的代码：

.元素组{
宽度：300px；
盒影：1px 1px 1px灰色；
高度：自动；
边界半径：10px；
左边距：20px；
背景色：#fff；
浮动：左；
垫底：18px；
}
.测试{
边缘顶部：5px；
左边距：40px；
宽度：180px；
高度：自动；
填充：15px；
边缘底部：5px；
边框：1件实心粗实木；
}
#下降{
宽度：700px；
高度：650px；
边缘底部：30px；
边界半径：10px；
背景色：#fff；
盒影：1px 1px 2px 2px灰色；
}
.放弃{
宽度：180px；
高度：自动；
填充：15px；
边框：1件实心粗实木；
背景色：无；
}
.按钮克隆{
背景颜色：珊瑚；
边框：实心1px；
边框颜色：深红色；
高度：50px；
宽度：100%；
}
.文本克隆{
边框：实心1px；
边框颜色：矢车菊蓝；
高度：25px；
宽度：100%；
}
.下拉克隆{
高度：30px；
宽度：100%；
背景颜色：矢车菊蓝；
}
.日期{
边框：实心1px；
边框颜色：暗金色；
高度：25px；
宽度：100%；
}
.保存表单{
背景色：#B35050；
边框：实心1px；
边框颜色：#861F03；
高度：40px；
宽度：80px；
浮动：对；
边界半径：5px；
}
h1{
字体系列：无衬线；
颜色：棕色；
}
#属性用户界面{
浮动：对；
边缘顶部：15px；
右边距：10px；
最小宽度：180px；
最小高度：100px；
背景色：#AFE1E6；
左侧填充：20px；
右边填充：20px；
垫底：20px；
边界半径：10px；
字体系列：无衬线；
盒影：1px 1px 1px灰色；
}
#标题属性{
背景颜色：棕色；
颜色：#fff；
字体系列：无衬线；
利润上限：-33px；
文本对齐：居中；
边界半径：5px；
盒影：1px 1px 1px灰色；
}
#删除、#清除、#保存{
背景色：#FF7C7C；
边框：实心1px；
边框颜色：#ff000a；
颜色：#fff；
高度：40px；
宽度：80px；
字体系列：无衬线；
边界半径：5px；
}
#设置{
背景色：#3D7007；
颜色：#fff；
宽度：45px；
高度：30px；
边缘顶部：5px；
浮动：对；
边框：1px纯白；
边界半径：6px；；
}
.预告按钮{
背景色：#496EF3；
颜色：#fff；
宽度：55px；
高度：25px；
浮动：对；
边框：1px纯白；
边界半径：6px；；
}

形式测试
所选表格：
性质



所需字段




选择颜色








命名者

元素
挑选
单选按钮
复选框
组合框

看看这个：

---

这可能是您的一个选项。

您可以在关闭样式标记之前的css块末尾使用此媒体查询。因此，您可以对不同的分辨率进行不同的设置

@media(max-width:767px) { /* Your code for all until 767px */ } @media(min-width:768px){ /* all from 768px until you override it in other queries like 992px or 1200px */ } @media(min-width:992px) { /* enter your code here */ } @media(min-width:1200px) { /* your code for Desktop */ } @介质（最大宽度：767px）{ /*767px之前的所有代码*/ } @介质（最小宽度：768px）{ /*从768px开始，直到在其他查询（如992px或1200px）中覆盖它为止*/ } @介质（最小宽度：992px）{ /*在此处输入您的代码*/ } @介质（最小宽度：1200px）{ /*你的桌面代码*/ }

---

使用此Url，因为它将教您如何编写响应性设计

另外，确保您了解不同设备的屏幕分辨率

这里有几个链接可以帮助您

此外，还有一些单位，如vw（视口宽度）和vh（视口高度），您也可以使用它们使站点响应

这里是链接

---

使用

媒体查询

@Ron.Basco:谢谢，我听了关于媒体查询的内容，但请你再帮我一点，如何在我的上述代码中使用它。谢谢！！我会试试的。谢谢你，先生，你给了我一个很好的例子，但是我没有得到正确的答案。请把它和我的代码联系起来。谢谢Saiyam Gamphir ji