Q:

how to make UI(user interface) responsive for all width?

I make one UI after googling .But my UI is not responsive it not look good when I increase the window size or decrease the window size/.
Here is my fiddle
http://jsfiddle.net/X8HV9/1/show/
I have only two issues 

"up level" button it look good when window size is more (full screen).When I decrease the size of window it changes it position.But next and previous button look good.
When you click "add" button it show pop up screen when screen size is more(full screen).but it hide when screen is smaller.

can I give width in %?
<div data-role="page" id="home">

    <div class="main_cont">

        <div class="cb"></div>

        <section>

            <div class="contentbox">
                <div class="actionbar">
                    <a href="#" class="home" id="home_h"></a><a href="#" class="previous" id="previous_h"><i
                    class="iconprev"></i>Previous</a><a href="#" class="next" id="next_h"><i
                    class="iconnext"></i>Next</a>
                    <a style="position: relative;top: 6px;left: 89px;cursor: pointer;" id="oneLevelUp">Up level ^</a>
                    <div class="cb"></div>
                </div>

            </div>

        </section>

        <footer id="firstPageFooter">
            <button class="addtestbtn" id="addTestCase" data-theme="a" style="color: #ffffff!important;">Add Test Case</button>

        </footer>

        <div data-role="popup" id="testCaseId" data-theme="b" data-arrow="b">
            <a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>
            <div data-role="fieldcontain">
                <label for="testCaseIDValue">Test Case ID:</label>
                <input type="text" name="testCaseIDValue" id="testCaseIDValue" value=""  class="inputTextTestCase"/>
            </div>
            <a href="#" data-role="button" id="donePopUp">Done</a>
        </div>

    </div>

Thanks

A:

Yes you can use % scaling with width,height,top,left,margins
for example in your css:
#next_h{
   position:absolute;
   width:10%;
}

this will set width to 10% of window's width
if you want to scale when window is below certain width,
you can use javascript:
if($(window).outerWidth() < 500){
  $('#next_h).css({
    'position':'absolute',
    'width':'80%',
    'height':'10px'
  });
}

something like this.
you might be interested in this post too

