如何调整不同屏幕尺寸的div元素宽度？

Question

I'm working on SPA and I tried to avoid using tables for non tabular data. On my main page I have set of elements and I need them to be in side-by-side order. For this I used class:

div.nextTo {
    display: inline-block;
    margin-left: 5px;
}

This looks fine and works on the big screen. Once I resized my browser or if I open my app on Mobile device my elements are sitting over each other. I also set the width in percentage for each element and seems that doesn't adjust on the different screen size. Here is example:

 div.pgContainer { width: 100%; height: 100%; font-family: Arial; font-size: 12px; box-sizing: border-box; padding: 5px 10px 5px 10px; } div.headerBox { width: 100%; border-top: 2px solid #000099; border-right: 2px solid #000099; border-left: 2px solid #000099; height: 25px; background-color: #000099; } div.headerBox span { font-weight: bold; color: white; font-size: 16px; } section.mainBox{ width: 100%; padding-top: 0; float: left; background-color: white; border: 2px solid #000099; } nav.xNavigation { width: 100%; margin-left: 0; margin-right: 0; padding-top: 2px; margin-bottom: 5px; background-color: #c8e2db; float: left; border-bottom: 2px solid #000099; height: 18px; } nav.xNavigation a { color: black; text-decoration: none; cursor: pointer; font-weight: bold; padding-left: 5px; padding-right: 5px; } nav.xNavigation a:hover { color: #999999; } div.nextTo { display: inline-block; margin-left: 5px; } 

 <div class="pgContainer"> <div class="headerBox"> <div style="float:left; margin-left:5px;"> <span>My App</span> </div> <div style="float:right; margin-right:5px; margin-top:2px;"> <span>Choose: <select name="hmMenu" id="hmMenu"> <option value="mainBox" selected="selected">Home</option> <option value="settingsBox">Settings</option> </select> </span> </div> </div> <section class="mainBox"> <div id="frmContainer"> <nav class="xNavigation"> <a href="#" id="chDemo">Demographic</a> | <a href="#" id="adInfo">Adult</a> | </nav> <form name="searchForm" id="searchForm" action="hmHome.cfm" method="POST" onsubmit="return false"> <div class="nextTo" style="width:5%;"> <select name="studMenu" id="studMenu"> <option value="1">Name</option> <option value="2">DOB</option> <option value="3">Age</option> <option value="4">State</option> </select> </div> <div class="nextTo" style="width:10%;"> <input type="text" name="searchFld" id="searchFld" size="24" maxlength="24" value="" title="Maximum size of the field is 24 characters." placeholder="Example: John, Miller" /> </div> <div class="nextTo" style="width:5%;"> <input type="button" name="searchBtn" id="searchBtn" value="Search"/> </div> <div class="nextTo" style="width:30%;"> <span id="searchMsg" style="display:none;"></span> </div> </form> </div> </section> </div> 

I'm wondering what is the best way to make my container adjustable for different screen size? Also what I should use for that in order to work on all browsers? If anyone knows how this can be achived please let me know. Thank you!

Answer 1

You could use @media css rule and define different style attributes depending on the viewport size. Please see this reference . @media browser compatibility can be verified here .

Answer 2

You can declare width using a responsive unit like vw .

1vw is 1% of the viewport width.

So, if you wanted five elements to span the width of the viewport, you could style the elements something like this:

div {
    width: 18vw;
    margin: 1vw;
}