Question

我的目标是320x480和320x568。我在320x568纵向视图中面临的问题。一切都在320x480上正常工作，但在320x568纵向视图中，容器的大小非常大。我尝试了一切来调整高度，但它没有显示与320 * 480纵向视图相同。我找不到解决这个问题的方法。您可以查看以下屏幕截图：

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

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

.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

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

但是，我建议你使用css 3的vh单位。这只是将视口高度视为单位。

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

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

祝你好运!!

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

1 个答案: