Fiddle

Question

我设计了一个页面，其中有四个div标签。如果我在手机上测试页面（5英寸），它完全适合页面，如果我在平板电脑上测试同一页面，页面适合30％的屏幕。那么如何设置div大小以使其适合所有类型的屏幕。

HTML：

  <div class="bubble0" align="center">
     <h3>Three  Levels </h3> 
  </div>
  <div class="bubble"  align="center"> </div><br/><br/>
  <div class="bubble1" align="center"> </div><br/><br/>
  <div class="bubble2" align="center"> </div><br/><br/>
  <button>Play</button>

请提出任何建议，

Answer 1

这称为Responsive Web Development(RWD)。为了使页面响应所有设备，我们需要使用一些基本的基础，例如： -

<强> 1。在head：中设置视口元标记：

<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0"/>

2.使用media queries。

实施例： -

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

第3。或者我们可以直接使用RWD framework： -

一些好的文章

Media Queries for Standard Devices - BY CHRIS COYIER

CSS Media Dimensions

<强> 4。更大的设备，中型设备和小型设备媒体查询。（在我的情景中工作。）

通用设备类型的媒体查询： - 更大的设备，中型设备＆amp;小型设备。这只是适用于所有场景的基本媒体类型。易于处理代码而不是使用各种媒体查询只需要关注三种媒体类型。

/*###Desktops, big landscape tablets and laptops(Large, Extra large)####*/
@media screen and (min-width: 1024px){
/*Style*/
}

/*###Tablet(medium)###*/
@media screen and (min-width : 768px) and (max-width : 1023px){
/*Style*/
}

/*### Smartphones (portrait and landscape)(small)### */
@media screen and (min-width : 0px) and (max-width : 767px){
/*Style*/
}

Answer 2

你的问题有点不清楚你想要什么，但从你的评论判断，我认为你希望每个气泡覆盖屏幕，包括垂直和水平。在这种情况下，垂直部分是棘手的部分。

正如许多其他人已经回答的那样，您首先需要确保设置视口元标记以触发移动设备使用其“理想”视口而不是模拟的“桌面宽度”视口。这个标签最简单，最简单的版本如下：

<meta name="viewport" content="width=device-width, initial-scale=1">

资料来源：PPK，可能是这些东西如何运作的主要专家。（见http://quirksmode.org/presentations/Spring2014/viewports_jqueryeu.pdf）。

基本上，上述内容确保媒体查询和CSS测量对应于任何给定设备上虚拟“点”的理想显示 - 而不是缩小页面以使用非优化的桌面布局。你不需要了解它的细节，但这很重要。

现在我们有一个正确的（非伪造的）移动视口可供使用，调整到视口的高度仍然是一个棘手的主题。通常，网页可以垂直扩展，但不能水平扩展。因此，当您对某些内容设置height: 100%时，该度量必须与其他内容相关。在最顶层，这是HTML元素的大小。但是当HTML元素高于屏幕（并扩展为包含内容）时，您的测量百分比将被搞砸。

输入vh单位：它的作用类似于百分比，但与视口有关，而不是包含块。 MDN信息页面：https://developer.mozilla.org/en-US/docs/Web/CSS/length#Viewport-percentage_lengths

使用该单位就像你期望的那样：

.bubble { height: 100vh; } /* be as tall as the viewport height. Done. */

它适用于许多浏览器（IE9及以上版本，现代版Firefox，Safari，Chrome，Opera等），但不是全部（支持信息：http://caniuse.com/#search=vh）。它运行的浏览器的缺点是iOS6-7中存在一个巨大的错误，使得这种技术无法用于这种情况（详情请参阅：https://github.com/scottjehl/Device-Bugs/issues/36）。它将在iOS8中修复。

根据项目的HTML结构，只要满足以下条件，可以在每个应该与屏幕一样高的元素上使用height: 100%。满足：

该元素是<body>。
html和body元素都设置了100％的高度。

我过去曾使用过这种技术，但很久以前我并不确定它适用于大多数移动设备。试试吧，看看。

下一个选择是使用JavaScript帮助程序调整元素大小以适合视口。要么是polyfill修复vh问题，要么完全解决其他问题。遗憾的是，并非每个布局都可以在CSS中使用。

Answer 3

您可以使用视口高度，只需将div的高度设置为height:100vh;，这会将div的高度设置为设备视口的高度，此外，如果您希望它为与设备屏幕完全一样，将边距和填充设置为0。

另外，设置视口元标记是个好主意：

<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0" />

请注意，这是相对较新的，IE8不支持，请在考虑此方法（http://caniuse.com/#search=viewport）之前查看支持列表。

希望这有帮助。

Answer 4

我没有太多时间，你的jsfidle现在不能正常工作但也许这会帮助你入门。

首先，你应该避免将css放入你的html标签中。像align="center"一样把这样的东西放在你的CSS中，因为它更清晰，并且不会那么快地弃用。

如果您想设计自适应布局，则应使用css3中引入的媒体查询，并且现在支持得非常好。

示例css：

@media screen and (min-width: 100px) and (max-width: 199px)
{
    .button
    {
        width: 25px;
    }
}

@media screen and (min-width: 200px) and (max-width: 299px)
{
    .button
    {
        width: 50px;
    }
}

您可以在媒体查询中使用任何所需的CSS。
http://www.w3.org/TR/css3-mediaqueries/

Answer 5

Fiddle

您想设置可为所有设备设置的高度吗？

决定网站的设计，即各种设备的高度。

前：

Height-100px表示设备上带有-min-width: 700px的气泡。
Height-50px在设备上出现< 700px;

让你的css高度为50px;

并添加此媒体查询

  @media only screen and (min-width: 700px) {
    /* Styles */
    .bubble {
        height: 100px;
        margin: 20px;
    }
    .bubble:after {
        bottom: -50px;
        border-width: 50px 50px 0;
    }
    .bubble:before {
        top: 100px;
        border-width: 52px 52px 0;
    }
    .bubble1 {
        height: 100px;
        margin: 20px;
    }
    .bubble1:after {
        bottom: -50px;
        border-width: 50px 50px 0;
    }
    .bubble1:before {
        top: 100px;
        border-width: 52px 52px 0;
    }
    .bubble2 {
        height: 100px;
        margin: 20px;
    }
    .bubble2:after {
        bottom: -50px;
        border-width: 50px 50px 0;
    }
    .bubble2:before {
        top: 100px;
        border-width: 52px 52px 0;
    }
}

这将使您的气泡在大于700px且边距为20px的设备上的高度为100px;

Answer 6

我在document.ready

中使用了类似的东西

var height = $(window).height();//gets height from device
var width = $(window).width(); //gets width from device

$("#container").width(width+"px");
$("#container").height(height+"px");

Answer 7

虽然我在寻找同一问题的答案，但我发现了这个：

<img src="img.png" style=max-
width:100%;overflow:hidden;border:none;padding:0;margin:0 auto;display:block;" marginheight="0" marginwidth="0">

您可以在标签内使用它（iframe或img），图片会根据它的设备进行调整。

Answer 8

尝试给你的div宽度为100%。

Answer 9

简单：

<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0" /＆GT;

干杯！

如何自动调整所有手机/平板电脑显示格式的div大小？

9 个答案:

Fiddle