Question

我有一张我正在制作的桌子，我想要适应屏幕。无论是iPhone，iPad还是PC，无论如何。我希望它适合窗户。

到目前为止，除了我在电脑上遇到错误以及窗口是半屏蔽的时候，一切都有效。它就好像屏幕更宽。因此显示了一半的表格。

这是我所谈论的JS小提琴：

＆＃13;

img {
    height: 24vh;
    width: 40vh;
    object-fit: scale-down;
}
body {}
#loading {
    width: 100%;
    height: 100%;
    top: 25%;
    left: -25%;
    position: absolute;
    display: block;
    opacity: 0.8;
    background-color: #fff;
    z-index: 99;
    text-align: center;
}
#loading-image {
    position: absolute;
    margin: 0 auto;
    z-index: 100;
}
table td {
    position: relative;
}
.ui-effects-transfer {
    background: url("http://images.clipartpanda.com/finger-clipart-pointing-finger-md.png") no-repeat;
    opacity: .8;
    z-index: 10;
    margin-top: 9vh;
    background-position: 50% 50%;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-size: 9vh auto;
    pointer-events: none;
}

＆＃13;

<!DOCTYPE html>
<html>
<head>

    <!--- Basic Page Needs
   ================================================== -->
    <meta charset="utf-8">
    <title>eTeacher.online</title>
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- Mobile Specific Metas
   ================================================== -->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.6/hammer.min.js"></script>
</head>
<body style="width: 100vh; height: auto">
    <div id="container">
        <table id='table1' style="">
            <tbody>
                <tr>
                    <td id="{{$data['comparison'][0]}}" class="cell">
                        <a href='response/{{ $data[' comparison '][0]}}'><img class='trial' src='{{ url(' taskAssets/ '.$data['comparison '][0]) }}.jpg' /></a>
                    </td>
                    <td id="{{$data['comparison'][1]}}" class="cell">
                        <a href='response/{{ $data[' comparison '][1]}}'><img class='trial' src='{{ url(' taskAssets/ '.$data['comparison '][1]) }}.jpg' /></a>
                    </td>
                    <td id="{{$data['comparison'][2]}}" class="cell">
                        <a href='response/{{ $data[' comparison '][2]}}'> <img class='trial' src='{{ url(' taskAssets/ '.$data['comparison '][2]) }}.jpg' /></a>
                    </td>
                </tr>
                <tr>
                    <td>
                    </td>
                    <td id="sample" style="border: 2vh solid #000;">
                        <img class='trial' src='{{ url(' taskAssets/ '.$data['sample '][0]) }}.jpg'/>
                    </td>
                </tr>
                <tr>
                    <td id="{{$data['comparison'][3]}}">
                        <a href='response/{{ $data[' comparison '][3]}}' class="cell"> <img class='trial' src='{{ url(' taskAssets/ '.$data['comparison '][3]) }}.jpg' /></a>
                    </td>
                    <td id="{{$data['comparison'][4]}}">
                        <a href='response/{{ $data[' comparison '][4]}}' class="cell"><img class='trial' src='{{ url(' taskAssets/ '.$data['comparison '][4]) }}.jpg' /></a>
                    </td>
                    <td id="{{$data['comparison'][5]}}">
                        <a href='response/{{ $data[' comparison '][5]}}' class="cell"><img class='trial' src='{{ url(' taskAssets/ '.$data['comparison '][5]) }}.jpg' /></a>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</body>

＆＃13;

我试图让它在任何屏幕上工作并适合。并且当屏幕调整大小以响应时。

使用VH的表格的响应式CSS适合整个表格在屏幕上

0 个答案: