How to make an "oldskool" layout responsive

Question

I’m trying to convert an “oldskool” layout to a responsive one.

It should be 1000px on desktops and “collapse” when the screen is under 480px (mobile phones). So not multiple versions, only two ones.

It should look like this: http://fs1.directupload.net/images/150713/s5rfbhdj.jpg

<div id="page">

    <div id="header">HEADER</div>

    <div id="navi1">NAVI</div>
    <div id="content">CONTENT</div>
    <div id="navi2">NAVI2</div>

</div>

Full code: http://codepen.io/anon/pen/pJKENW

In the markup for mobiles the layout should collapse like in the screenshot.

Answer 1

在你的情况下，我会选择流畅的设计，这是我的小提琴http://jsfiddle.net/61q7avrL/7/

修改下面的代码以符合您的喜好，但这对您来说是一个好的开始：

body{margin:0;font-size:100%}

#page{width:1000px;margin: 0 auto}

#header{position:relative;width:1000px;height:100px;background:purple}

#navi1{position:relative;width:200px;float:left;background:green}
#content{position:relative;width:600px;float:left;background:yellow}
#navi2{position:relative;width:200px;float:left;background:#4fffff}

.container{width:100%;background:#afafaf;clear:both;margin-bottom:10px}

.pic{background:orange;width:200px;float:left}
.text{background:blue}
/* desktop */
@media only screen and (max-width: 999px)

    {
    #page{width: 100%;}
    #header{width: 100%;}
    #navi1{width: 20%}
    #navi2{width: 20%;}
    #content{width: 60%;}

    .container{width: 100%;}
    .pic{width: 50%;}
    }

/* mobile */
@media only screen and (max-width:480px)

    {


    }

Answer 2

@ media queries是您寻找的答案。它允许您根据屏幕更改css或查看端口大小。快速谷歌搜索将向您展示它是多么快捷和简单