我是html开发的新手。我设计了一个表单设计器，它显示了我的桌面屏幕，其大小约为1366 x 768。但当我把它放在不同分辨率的另一台机器上时，我的UI效果很差。当我放大并缩小时，那也将受到影响。这就是我的问题。
我分享了我的CSS和HTML代码，请看。有一个包含div的主体，div有一些子div，如元素div，属性div和可调整大小的div（在调整大小时有很大的问题）。请看我的代码：
<style>
.element-div {
width:300px;
box-shadow: 1px 1px 1px 1px grey;
height:auto;
border-radius: 10px;
margin-left:20px;
background-color:#fff;
float:left;
padding-bottom:18px;
}
.test {
margin-top:5px;
margin-left : 40px;
width: 180px;
height: auto;
padding:15px;
margin-bottom: 5px;
border: 1px solid burlywood;
}
#drop {
width: 700px;
height: 650px;
margin-bottom: 30px;
border-radius: 10px;
background-color: #fff;
box-shadow: 1px 1px 2px 2px grey;
}
.dropped {
width: 180px;
height: auto;
padding:15px;
border : 1px solid burlywood;
background-color: none;
}
.button-clone {
background-color: coral;
border: solid 1px;
border-color: crimson;
height:50px;
width:100%;
}
.text-clone {
border : solid 1px;
border-color :cornflowerblue;
height : 25px;
width : 100%;
}
.dropdown-clone {
height : 30px;
width : 100%;
background-color: cornflowerblue;
}
.date {
border : solid 1px ;
border-color: darkgoldenrod;
height:25px;
width:100%;
}
.save-form {
background-color:#B35050;
border: solid 1px;
border-color:#861F03;
height:40px;
width:80px;
float : right;
border-radius : 5px;
}
h1 {
font-family: sans-serif;
color :brown;
}
#properties-ui {
float:right;
margin-top:15px;
margin-right:10px;
min-width:180px;
min-height:100px;
background-color: #AFE1E6;
padding-left:20px;
padding-right: 20px;
padding-bottom: 20px;
border-radius: 10px;
font-family: sans-serif;
box-shadow: 1px 1px 1px 1px grey;
}
#header-properties {
background-color: brown;
color:#fff;
font-family: sans-serif;
margin-top: -33px;
text-align:center;
border-radius: 5px;
box-shadow: 1px 1px 1px 1px grey;
}
#delete , #clear, #save{
background-color:#FF7C7C;
border: solid 1px;
border-color:#ff000a;
color : #fff;
height:40px;
width:80px;
font-family: sans-serif;
border-radius : 5px;
}
#SET {
background-color:#3D7007;
color:#fff;
width:45px;
height:30px;
margin-top:5px;
float:right;
border:1px solid white;
border-radius:6px;;
}
.pre-button {
background-color:#496EF3;
color:#fff;
width:55px;
height:25px;
float:right;
border:1px solid white;
border-radius:6px;;
}
</style><body style="background-color:ivory;">
<div style="border:7px solid cadetblue;padding:10px;border-radius:20px;">
<div>
<h1>FORM TEST<input type="submit" class="save-form" name="saveForm" id="saveForm" value="Submit" style="float:right;color:#fff;" onclick="formsubmit();"></h1>
</div>
<div style="margin-left:50px;margin-bottom:10px;">
<input type="button" style="background-color:#77B337;border:1px #4E9205;"id="save" name="save" value="Save"/>
<input type="button" style="background-color:#7C9AFF;border:1px #637ED8;" id="clear" name="clear" value="Clear" onclick="clearCanvas();" />
<input type="button" id="delete" name="delete" value="Delete" onclick="delete_Element();"/>
<label style="margin-left:15%;">Selected Table:<input type="text" name="tablename" id="tablename" class="text-clone" style="border-color:green;width:15%;margin-left:2%; " readonly /></label>
</div>
<div id="properties-ui">
<div id="header-properties"><p>Properties</p></div>
<input type="text" id="Name" style="margin-bottom:8px;padding:3px;" placeholder="Name"><br>
<input type="checkbox" id="fieldbox" style="height:15px;width:15px;" name="fieldRequired" />
<label style="font-size:14px;">Field Required</label><br><br>
<input type="text" id="Value" style="margin-bottom:8px;padding:3px;" placeholder="Value"><br>
<input type="color" name="colorpicker" id="bg" style="margin-top:5px;width:20px;" value="#fefefe">
<label style="font-size:14px;">Select Color</label><br><br>
<input type="text" id="addoption" name="addoption" style="margin-bottom:8px;padding:3px;width:100px;" placeholder="Add Options">
<input type="button" class="pre-button" name="add" id="add" value="Add" onclick="return addoptions();" /><br><br>
<input type="text" id="deloption" name="deloption" style="margin-bottom:8px;padding:3px;width:100px;" placeholder="Del Options">
<input type="button" class="pre-button" name="Del" id="Del" value="Del" style="background-color:#F95050" onclick="return deloptions();" /><br><br>
<select id="data-column" class="dropdown-clone" style="background-color:rgb(208, 110, 6);margin-bottom:15px;height:25px;color:cornsilk" name="Name"><option value="">Name</option><option value="satinder">Satinder</option></select><br>
<input type="button" name="setproperties" id="SET" value="SET" onclick="return setProperties();"/>
</div>
<div class="element-div">
<h3 style="margin-left:25px;margin-top:10px;color:goldenrod;">ELEMENTS</h3>
<div class="test red square" style="cursor:move;"><input type="text" class="text-clone" name="default" style="cursor:not-allowed"></div>
<div class="test red square" style="cursor:move;"><textarea class="text-clone" name="default" style="cursor:not-allowed" placeholder=" Label here..."></textarea></div>
<div class="test red square" style="cursor:move;"><input type="text" class="date" name="date" style="cursor:not-allowed" id="date" placeholder=" DD-MM-YEAR"></div>
<div class="test red square" style="cursor:move;"><select id="selectbox" class="dropdown-clone" style="cursor:not-allowed" name="1">
<option id="SELECT" value="">SELECT</option>
</select></div>
<div class="test red square" style="cursor:move;" ><input type="button" class="button-clone" value="Button" style="height:50px;cursor:not-allowed;" ></div>
<label style="margin-left : 15%;">Radio Button</label>
<div class="test red square" style="cursor:move;"><input type="radio" style="width:15px; height:15px;cursor:not-allowed;" name="radiobutton" value="default"></div>
<label style="margin-left : 15%;">Checkbox</label>
<div class="test red square" style="cursor:move;"><input type="checkbox" style="width:15px; height:15px;cursor:not-allowed;"></div>
<label style="margin-left : 15%;">Combobox</label>
<div class="test red square" id="combobox" style="cursor:move;"><input type="text" name="example" style="cursor:not-allowed" list="exampleList">
<datalist id="exampleList">
</datalist></div>
</div>
<div id="dd"><div style="margin-left:26%;resize: both;overflow:auto;" id="drop"></div>
</div>
</div>
</body>
答案 0 :(得分：5)
看看这个：Responsive Web Design - Media Queries
这可能是你的选择。
答案 1 :(得分：1)
您可以在关闭样式标记之前在css-block的末尾使用此媒体查询。因此，您可以为不同的分辨率采取不同的设置
@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 */
}
答案 2 :(得分：0)
使用此Url，因为这将教您如何编写响应式设计代码
http://www.w3schools.com/html/html_responsive.asp
此外，请确保您了解不同设备的屏幕分辨率
以下是一些可以帮助您的链接，
http://www.iphoneresolution.com/
此外，还有一些单位，如vw（视口宽度）和vh（视口高度），您也可以使用它们来使网站响应。
这是链接