Question

我应用了以下css：

@media screen and (max-height: 650px) {
    .about .info{
        bottom: 65px;
    }
}

在我写的HTML中

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

但断点不起作用。我添加了以下内容：

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

这也不起作用，所以我删除了"initial-scale=1.0"，但这会弄乱整个网页。

有什么想法吗？

更新

这是我的foreach循环，我在其中添加图像和信息。

<?php $i=0;?>
@foreach($images as $image)
<div class="about">
    <div class="overlay"></div>
    <div class="image" style="background-image:url({{asset('uploads/about/' . $image->path )}})">
        <section class="info right hidden" id="{{$i+1}}">
            <h2>{{$image->title}}</h2>
            <div>{{$image->body}}</div>
        </section>
    </div>
</div>
<?php $i++; ?>
@endforeach

这是我的完整<head>

<!DOCTYPE html>
<html>
    <head>
        <title>Kristal Logistics</title>
        <link rel="icon" type="image/png" href="{{asset('img/favicon.png')}}" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        {{ HTML::style('fonts/fonts.css')}}
        {{ HTML::style('css/reset.css')}}
        {{ HTML::style('css/fullpage.css')}}
        {{ HTML::style('css/animate.css')}}
        {{ HTML::style('css/menu.css')}}
        {{ HTML::style('css/main.css')}}
        {{ HTML::script('js/jquery.js') }}
        {{ HTML::script('js/script.js') }}
        {{ HTML::script("js/modernizr.custom.js")}}
    </head>
    <body>

上面发布的我的css代码在最后一行的main.css中应用。

Answer 1

检查css文件的顺序以及调用断点的顺序。正如我的评论中所提到的，这个jsfiddle显示了一个工作示例。在我的例子中，我添加了一个

position:absolute;

到内容部分。这确保了当css顺序正确时的正确定位。

视口高度元标记

1 个答案: