堆栈内存溢出
  简体   繁体   English

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

[英]How I can fix a simple html UI resolution for different different screen sizes

 原文  2016-11-11 05:52:53  2   3    jquery/ html/ css/ html5/ css3

问题描述

I am new in html development. 我是html开发的新手。 I design a form designer that is showing good my desktop screen which have size 1366 x 768 approx. 我设计的表单设计器可以很好地显示我的桌面屏幕，其尺寸约为1366 x 768。 But when I put it on another machine on different resolution my UI effected badly. 但是，当我将它放在另一台分辨率不同的计算机上时，UI效果很差。 When I zooming in and zooming out then that will also effected. 当我放大和缩小时，这也会发生。 So that is my problem. 这就是我的问题。

I sharing my css and html code , please see it . 我共享我的CSS和HTML代码，请查看。 there have a body which contains a div , that div have some child div like element div , properties div and a resizeable div (that have big problem when resizing) .Please see my code: 有一个包含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="&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>

3 个解决方案

解决方案1
 5  2016-11-11 05:59:04

Have a look on this: Responsive Web Design - Media Queries 看一下： 响应式Web设计-媒体查询

This could be an option for you. 这可能是您的选择。

解决方案2
 1  2016-11-11 06:02:48

You can use this media-queries on the end of css-block before closed style-tag. 您可以在封闭样式标签之前的css-block末尾使用此媒体查询。 So you can take different settings for different resolutions. 因此，您可以针对不同的分辨率进行不同的设置。 

@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 */
}

解决方案3
 0  2016-11-11 07:16:01

Use this Url as this will teach you how to code responsive designs 使用此网址，因为它将教您如何编写响应式设计

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

Also, make sure you get the knowledge of the screen resolutions of different devices 另外，请确保您了解不同设备的屏幕分辨率

Here are few links that will help you, 这里有一些链接可以帮助您，

http://www.iphoneresolution.com/ http://www.iphoneresolution.com/

http://iosres.com/ http://iosres.com/

Also, there are some units like vw(viewport width) and vh(viewport height) you can use these also to make the site responsive. 此外，还有一些单位，例如vw（视口宽度）和vh（视口高度），您还可以使用它们使网站响应。

Here is the link 链接在这里

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

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何更改不同屏幕尺寸的语义UI侧栏的位置？ - How to change position of Semantic UI sidebar for different screen sizes? 我如何居中对齐不同屏幕尺寸的文本 - How do i center align text in different screen sizes 不同屏幕尺寸的Javascript - Javascript on different screen sizes 如何为不同尺寸的图像创建简单的幻灯片显示 - How to create a simple slideshow for images of different sizes 如何在屏幕上将不同大小的div居中 - How to center div with different sizes on the screen 如何获得不同大小的datepicker实例？ - How can I get datepicker instances of different sizes? 使用Java更改不同屏幕尺寸之间的导航菜单HTML？ - Change nav-menu HTML between different screen sizes with java? 在JS / Jquery中将热图上的鼠标单击坐标映射为不同的分辨率和屏幕尺寸 - Mapping mouse click coordinates on heatmap for different resolution & screen sizes in JS/Jquery 管理几种不同的屏幕尺寸 - Managing several different screen sizes 为不同的屏幕尺寸更改动画 - changing animation for different screen sizes
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM