html - 如何利用手机浏览器中的全部空间

Closed. This question needs to be more focused。它当前不接受答案。












                            想改善这个问题吗？更新问题，使其仅通过editing this post专注于一个问题。

                        4年前关闭。



我希望我的网站能够响应类似于桌面版本的智能手机浏览器。我的意思是所有元素必须保持在同一位置（元素缩放到浏览器窗口）。
我用下面的例子说明了它：

帮助我使用CSS和HTML来实现这一目标。如果问题似乎太长而无法解释，请向我提供帮助我完成此工作的链接。提前致谢！

最佳答案

Here是我为您创建的jsfiddle。

body, html {
    margin: 0;
    padding: 0; /*some resets */
}
* {
    box-sizing: border-box;
}

header, footer, .container {
    border: 1px solid grey;
}

.middle {
    width: 33.33%;
    background-color: red;
    border: 1px solid white;
    float:left;
    text-align: center;
    height: 300px;
}

.clear{
    clear:both;
}

<header>Some header text</header>
<div class="container">
    <div class="middle">Text</div>
    <div class="middle">is</div>
    <div class="middle">here</div>
    <div class="clear"></div>
</div>
<footer>Some footer text</footer>

您需要使用百分比才能使其在所有设备上都相同。

关于html - 如何利用手机浏览器中的全部空间，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33344320/

上一篇：jQuery 手机 : Listview with rounded corners using CSS?

下一篇：css - 如何更改 "select box"表单的大小

相关文章：

html - 制作一个没有位置的两列 div 布局

html - 减少移动设备中的左填充

html - 如何创建嵌套类选择器？

javascript - 两个不同的菜单栏在响应时折叠在单个菜单栏中

html - 如何使文章居中

html - 小型设备的响应式表格设计 - 表格 {"display:block"}

html - 用户点击同页链接后是否可以突出显示页面的某个区域？

html - 一个接一个的CSS定位div

javascript - 为什么说uncaught Reference error : counter is not defined?

html - CSS内联不起作用