2 baidu 16129877 baidu_16129877 于 2014.12.14 17:33 提问

响应式布局怎么写啊 求简单代码

要求网页在不同的手机屏幕大小显示内容可以兼容 就是媒体查询 响应式布局 只需要一个简单的例子 好让我有思路写

4个回答

devmiao
devmiao   Ds   Rxr 2014.12.14 19:04

参考:http://www.xaoqao.com/html/3914/3914.html

不过最好用现成的,比如bootstrap

showbo
showbo   Ds   Rxr 2014.12.14 17:45

最外层容器不要定宽,内部元素使用百分比来定宽

u012851817
u012851817   2014.12.14 20:42

<!DOCTYPE html>



demo
<br> .inner-side {<br> padding: 5px 0;<br> }<br> .my-div {<br> width: 100%;<br> height: 20px;<br> background: red;<br> margin: 0 10px;<br> }<br>











u012851817
u012851817   2014.12.14 20:45
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <style>
    .inner-side {
        padding: 5px 0;
    }
    .my-div {
        width: 100%;
        height: 20px;
        background: red;
        margin: 0 10px;
    }
    </style>
</head>
<body>
    <div class = "outer-side">
        <div class="inner-side">
            <div class="my-div"></div>
        </div>
        <div class="inner-side">
            <div class="my-div"></div>
        </div>
    </div>
</body>
</html> 
Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!