Question

我在谷歌搜索后制作了一个用户界面。但是当我增加窗口大小或减小窗口大小时，我的用户界面没有响应，看起来不太好。

这是我的小提琴 http://jsfiddle.net/X8HV9/1/show/ 我只有两个问题

“up level”按钮当窗口大小更多时（全屏）看起来不错。当我减小窗口大小时，它会改变它的位置。但是下一个和上一个按钮看起来不错。
当您点击“添加”按钮时，当屏幕尺寸更大（全屏）时会显示弹出屏幕。但是当屏幕较小时它会隐藏。

我能以％表示宽度吗？

<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>

由于

Answer 1

是的，您可以使用宽度，高度，顶部，左侧，边距的％缩放

例如在你的css中：

#next_h{
   position:absolute;
   width:10%;
}

这会将宽度设置为窗口宽度的10％

如果你想在窗口低于一定宽度时进行缩放，

你可以使用javascript：

if($(window).outerWidth() < 500){
  $('#next_h).css({
    'position':'absolute',
    'width':'80%',
    'height':'10px'
  });
}

像这样的东西。

您可能对this张贴

感兴趣

如何使UI（用户界面）响应所有宽度？

1 个答案: