css - 我找不到调整媒体查询的高度

Question

我的目标是 320x480 和 320x568。我在 320x568 纵向 View 中面临的问题。在 320x480 上一切正常，但在 320x568 纵向 View 中，容器的尺寸非常大。我尝试了所有调整高度的方法，但显示效果与 320*480 纵向 View 不同。我找不到解决这个问题的方法。您可以查看下面的屏幕截图:

您可以通过手机在此处查看网站 - bit.ly/1bD6EhX

我必须将文本移动到顶部位置，但是当我这样做时，这也会影响 320*480 纵向 View 。下面是我的代码:

.container3 {
        margin:0;
        height:750px;
        overflow:hidden; 
    }

    .fullwidth3 {
        width:100%;   
    }

    .mobtxt {
        margin:0 0 0 25px;
        font-size:22px;
        font-weight:600;
        font-family:'Open Sans', arial, helvetica;
        letter-spacing:0;
        text-align:center;
        width:80%;
        border-bottom:2px solid #e0e0e0;
    }

    .mobdes {
       margin:15px 0 0 10px;
        font-size:16px;
        font-weight:normal;
        font-family:arial;
        letter-spacing:0;
        text-align:left;
        width:95%;

    }


    .mobdes2 {
        position:absolute;
        top:320%;
        width:95%;
        margin:15px 0 0 10px;
        font-size:arial;
        font-size:15px;
        color:#adadad;
        padding:0;

    }

    .mobimg {
        width:100%;
        clear:both;
        float:none;
        margin-left:0;
        margin-right:0;
        right:10px;
        margin-top:30px;

    }


HTML File

<div class="container3">
        <div class="fullwidth3">    
            <p class="mobtxt">We have an experience of 10 Years</p>
            <p class="mobdes">Mandaremus veniam dolor ita sunt, duis praesentibus vidisse velit ingeniis qui 
                sed est dolore fore eram a do aute incurreret transferrem ab se qui culpa 
                eiusmod, quem iis pariatur, an culpa magna legam occaecat o in qui quorum legam 
                quem. Singulis exquisitaque ut quamquam, ita ea tractavissent, nam sint de quis 
                est quo a tractavissent. </p>

            <img src="img/mobimg.png" alt="mob image" class="mobimg" >
          <hr class="hr"/>

           <p class="mobdes2">Laborum duis malis in duis, duis ingeniis nam transferrem, nam quis commodo, de 
                nisi varias illum nescius si probant ipsum in laborum exercitation, ut a 
                comprehenderit, iis aliqua praesentibus, e nisi litteris expetendis.</p>

        </div>
    </div>

Answer 1

我不明白，你为什么要在 .mobdes2 中执行 top:320%;。我想你想这样做 top:320px。但是，如果您也提供 HTML 会更好。

但是，我建议您使用 css 3 的 vh 单位。这仅表示视口(viewport)高度作为单位。

示例: http://snook.ca/archives/html_and_css/vm-vh-units

浏览器支持: http://caniuse.com/#feat=viewport-units

祝你好运!