如何修复不同屏幕尺寸的简单HTML UI分辨率

我是html开发中的新手。我设计了一个表格设计器，显示出我的桌面屏幕大小约为1366 x 768。但是当我用不同的分辨率将其放在另一台机器上时，我的用户界面效果很差。当我放大和缩小时，这也会受到影响。所以这是我的问题。如何修复不同屏幕尺寸的简单HTML UI分辨率

我分享我的css和html代码，请看看它。那里有一个包含一个div体，该专区有一些孩子的div元素一样的DIV，性质DIV和调整大小DIV（调整时具有很大的问题）。请看到我的代码：

<style> 
 
.element-div { 
 
\t width:300px; 
 
\t box-shadow: 1px 1px 1px 1px grey; 
 
\t height:auto; 
 
\t border-radius: 10px; 
 
\t margin-left:20px; 
 
\t background-color:#fff; 
 
\t float:left; 
 
\t padding-bottom:18px; 
 
} 
 

 
.test { 
 
\t margin-top:5px; 
 
\t margin-left : 40px; 
 
\t width: 180px; 
 
\t height: auto; 
 
\t padding:15px; 
 
\t margin-bottom: 5px; 
 
\t border: 1px solid burlywood; 
 
} 
 

 
#drop { 
 
\t width: 700px; 
 
\t height: 650px; 
 
\t margin-bottom: 30px; 
 
\t border-radius: 10px; 
 
\t background-color: #fff; 
 
\t box-shadow: 1px 1px 2px 2px grey; 
 
} 
 

 
.dropped { 
 
\t width: 180px; 
 
\t height: auto; 
 
\t padding:15px; 
 
\t border : 1px solid burlywood; 
 
\t background-color: none; 
 
} 
 

 
.button-clone { 
 
\t background-color: coral; 
 
\t border: solid 1px; 
 
\t border-color: crimson; 
 
\t height:50px; 
 
\t width:100%; 
 
} 
 

 
.text-clone { 
 
\t border : solid 1px; 
 
\t border-color :cornflowerblue; 
 
\t height : 25px; 
 
\t width : 100%; 
 
} 
 

 
.dropdown-clone { 
 
\t height : 30px; 
 
\t width : 100%; 
 
\t background-color: cornflowerblue; 
 
} 
 

 
.date { 
 
\t border : solid 1px ; 
 
\t border-color: darkgoldenrod; 
 
\t height:25px; 
 
\t width:100%; 
 
} 
 

 
.save-form { 
 
\t background-color:#B35050; 
 
\t border: solid 1px; 
 
\t border-color:#861F03; 
 
\t height:40px; 
 
\t width:80px; 
 
\t float : right; 
 
\t border-radius : 5px; 
 
} 
 

 
h1 { 
 
\t font-family: sans-serif; 
 
\t color :brown; 
 
} 
 

 
#properties-ui { 
 
\t float:right; 
 
\t margin-top:15px; 
 
\t margin-right:10px; 
 
\t min-width:180px; 
 
\t min-height:100px; 
 
\t background-color: #AFE1E6; 
 
\t padding-left:20px; 
 
\t padding-right: 20px; 
 
\t padding-bottom: 20px; 
 
\t border-radius: 10px; 
 
\t font-family: sans-serif; 
 
\t box-shadow: 1px 1px 1px 1px grey; 
 
} 
 

 
#header-properties { 
 
\t background-color: brown; 
 
\t color:#fff; 
 
\t font-family: sans-serif; 
 
\t margin-top: -33px; 
 
\t text-align:center; 
 
\t border-radius: 5px; 
 
\t box-shadow: 1px 1px 1px 1px grey; 
 
} 
 

 
#delete , #clear, #save{ 
 
\t background-color:#FF7C7C; 
 
\t border: solid 1px; 
 
\t border-color:#ff000a; 
 
\t color : #fff; 
 
\t height:40px; 
 
\t width:80px; 
 
\t font-family: sans-serif; 
 
\t border-radius : 5px; 
 
} 
 

 
#SET { 
 
\t background-color:#3D7007; 
 
\t color:#fff; 
 
\t width:45px; 
 
\t height:30px; 
 
\t margin-top:5px; 
 
\t float:right; 
 
\t border:1px solid white; 
 
\t border-radius:6px;; 
 
} 
 

 
.pre-button { 
 
\t background-color:#496EF3; 
 
\t color:#fff; 
 
\t width:55px; 
 
\t height:25px; 
 
\t float:right; 
 
\t border:1px solid white; 
 
\t 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="&nbsp;&nbsp;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>

来源

2016-11-11 Satinder Singh

使用'媒体query' –

@ Ron.Basco：谢谢你，我听了有关媒体查询，但是请你能帮助我多一点我如何在使用它我以上代码。 –

看一看：Responsive Web Design - Media Queries

这可能是一个选项。

来源

2016-11-11 05:59:04

谢谢！我会试试看。 –

它对你有帮助吗？ –

在关闭样式标记之前，您可以在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 */ 
}

来源

2016-11-11 06:02:48 dihegroup

谢谢先生，您举了一个很好的例子，但我没有得到正确的结果，请将它与我的代码联系起来。 –

使用这个网址，因为这将教你如何编写响应设计

http://www.w3schools.com/html/html_responsive.asp

此外，还要确保你得到不同的设备

下面是的屏幕分辨率的知识几个链接将帮助你，

http://www.iphoneresolution.com/

http://iosres.com/

此外，也有一些单位，比如大众汽车（视口宽度）和VH（视高度），你可以使用这些也使网站的响应速度。

这里是链接

http://www.tipue.com/blog/css3-vw-vh/