html - 如何让我的 CSS 响应式

Question

他我正在为我的应用程序开发一个标准模板。我对 CSS 很感兴趣，但我为做出一个好的响应式设计而头疼。

现在这是我的想法：

这就是它的工作原理：

演示

现在使用一些 java 脚本我可能可以做到这一点，但如果这在 CSS 中是可能的，那就太好了。我的问题是如何仅使用 HTML 和 CSS 进行设计。

一个 jsFiddle 只是为了好玩：

jsFiddle

我的CSS：

body{
    font-family:"Trebuchet MS",sans-serif;
    padding:0px;
    margin:0px;
}

#content{
    min-height: 100%;
    width: 100%;
    position: absolute;
    background-color: #5adc23;
}

input[type="button"]{
    border:2px outset rgb(166, 166, 166);
    display:inline-block;
}

input[type="button"]:hover{
    border:2px inset rgb(166, 166, 166);
    display:inline-block;
    cursor: pointer;
}

#mainbar{
    height: 31px;
    background-color: rgb(109, 164, 227);
    background-image: -webkit-linear-gradient(0deg, rgb(39, 162, 207) 1%, rgb(63, 181, 224) 36%, rgb(63, 181, 224) 64%, rgb(39, 162, 207) 100%);
}

    #mainbar_border{
        height: 100%;
        border-bottom:1px solid rgb(0, 0, 0);
        color: rgb(255, 255, 255); 
        font-family: 'Courier New', serif; 
        font-size: 21px; 
    }

#mainmenu{
    width: 40px;
    height: 96%;
    min-height: 100%;
    margin-top: 0px;
    margin-bottom: 0px;
    float: left;
}

    #mainmenu_border{
        height: 99%;
        padding: 4px;
        padding-top: 46px;
        padding-bottom: 19px;
        border-bottom-width: 1px;
        border-left-width: 1px;
        border-bottom-style: solid;
        border-left-style: solid;
    }

        #mainmenu_item_container{
            list-style-type:none;
        }

#content_app{
    float: left;
    width: 88%;
    height: 96%;
}

    #content_app_border{
        height: 99%;
        padding: 4px;
        border-bottom-width: 1px;
        border-left-width: 1px;
        border-bottom-style: solid;
        border-left-style: solid;
        border-right-width: 1px;
        border-right-style: solid;
    }

我的html：

<div id='content' class='invoer'>    
    <div id='mainbar'>
        <div id='mainbar_border'>
            Mainbar
        </div>
    </div>
    <div id='mainmenu'>
        <div id='mainmenu_border'>
            <ul id='mainmenu_item_container'>
                <li><input type='button' value='Load content' title='load some more shit to test the resposive design' id='btn' action='loadmoreshit' /></li>
                <li>button</li>
                <li>button</li>
            </ul>
        </div>
    </div>
    <div id='content_app'>
        <div id='content_app_border'>
            content
            <br>
                <br>
                    <br>
         </div>
     </div>
</div>

Answer 1

这个 JsFiddle将为您提供图表正在寻找的布局的粗略版本。从这里您可以使用 Jefferson 建议的媒体查询来为移动设备创建替代版本。一个提示 - 此处的 div 应仅用作骨架，我不会尝试为它们设置样式。如果您开始向它们添加边框和其他一些样式，则边缘将不再对齐。这是 CSS 和 HTML -

<div id="header">Header</div>
<div id="left_nav">Left Navigation</div>
<div id="content">Content</div>

div {
    position: absolute;
}

#header {
    top: 0px;
    left: 0px;
    right: 0px;
    height: 40px;
    background: blue;
}

#left_nav {
    top: 40px;
    left: 0px;
    width: 100px;
    bottom: 0px;
    background: red;
}

#content {
    top: 40px;
    left: 100px;
    bottom: 0px;
    right: 0px;
    background: green;
}

更新：在你的最后评论之后，我做了更多的工作。首先，这是我理解的标准：

1. 左侧菜单和内容应从顶部向下 100 像素开始以容纳标题。
2. 左侧菜单和内容应至少延伸到页面底部。
3. 如果左侧菜单或内容超出页面底部，则：它们都应该向下扩展，以使它们的高度相等。湾。整个页面应该滚动，而不是单个面板。

考虑到这一点，我无法仅使用 CSS 和 HTML 来产生所有这些效果，所以看起来这里可能需要 Javascript。我已经更新了这个 JSFiddle，以便显示溢出#main_container。至此，解决方案完成了 1、2 和 3b。为了完成 3a，我添加了这个 javascript：

$(document).ready(function(){
    var body_height = $("body").height();
    var body_scroll = $("body").get(0).scrollHeight;
    var menu_height = $("#left_nav").height();
    var content_height = $("#content").height();

    if(body_scroll > body_height && (menu_height != content_height)) {
        if(menu_height > content_height) {
            $("#content").css("height", (menu_height + "px"));
        } else {
            $("#left_nav").css("height", (content_height + "px"));
        }
    }
});

所有这一切都是为了确保#left_nav和#content是相同的高度。它确实使用 JQuery，所以如果你不使用 JQuery，你将不得不为纯 Javascript 重写它。不过，如果您不使用 JQuery，我强烈建议您在此处获取。它会让你的生活轻松很多。还要注意#spikediv，它提供了在其中一个定位元素中添加“边框”div 的示例。

希望这可以帮助。

Answer 2

您可以使用 css 框架lite twitter.github.io/bootstrap、foundation.zurb.com或gumbyframework.com

这样您就不需要从头开始构建所有东西。你会从一开始就获得很多样式，比如响应式脚手架、表单、表格、按钮、菜单等。

作为初学者，可以更容易地建立在好的东西上并从中学习。

Answer 3

让您的设计响应的一种简单方法是使用媒体查询。
这只需要 html 和 css。您可以修复自己的媒体查询，或使用预制的响应式框架。比如推特引导。

CSS3 中的媒体查询查看设备的功能，您可以使用它们来检查各种事情。例如：

- （浏览器窗口的）
宽度和高度 - 设备宽度和高度
- 方向 - 例如手机处于横向还是纵向模式？
- 解析度

然后，您可以根据这些功能设置您的 html 样式。

Answer 4

如果您不喜欢自己动手，使用像 Bootstrap 这样的现有框架可能是一个好主意。您在上面描述的内容实际上并不需要媒体查询，因为它实际上是一个相当基本的流体布局。

以下以基本形式实现您想要的

html:

<div id="content" class="invoer">
    <div id="mainbar">
        Mainbar
    </div>
    <div id="mainmenu">
            <ul>
                <li>button</li>
                <li>button</li>
            </ul>
    </div>
    <div id="content_app">
            <br>blablabla content
            <hr>
            <br>blablabla content
    </div>
</div>

css

#content {
    background:#00E113
}
#mainbar {
    width:98%;
    height:40px;
    background:#00ACD9;
    color:#fff;
    padding:1%;
}
#mainmenu {
    width:100px;
    position:absolute;
    left:0;
}
#content_app {
    margin-left:140px;
}

这里我使用了一个绝对定位的主菜单，这样它就不会影响任何周围元素的宽度。然后在 content_app 上设置一个 margin-left 来为主菜单留出足够的空间。

在这里试试 http://jsfiddle.net/PMJBc/2/