html - 启用触摸刺激会改变 css

问题描述

这是我的 HTML 网站

这是移动视图中的站点（禁用触摸刺激）

现在，当启用触摸刺激时

为什么启用触摸时样式会发生变化？这是我的代码：

body {
    background:rgba(71, 71, 71, 0.3);
    height:100vh;
    width:100%;
    margin:0;
    color: #fff;
}

.main {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    height: 80vh;
    width: 65%;
    min-width: 900px;
    max-width: 1100px;

    background: rgba(29, 29, 29, 0.7);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);

}


.sub {
    box-sizing: border-box;
    vertical-align: middle;
    border: solid 1px #fff;
    border-radius: 16px;;
    width: 50%;
    overflow: auto;
    padding: 20px;
}


.float_l {
    float: left;
}

.float_r {
    float: right;
}

/* For Mobile */
@media screen and (max-width: 950px) {
    .main {
        min-width: 350px;
        width: 90%;
        height: auto;

        margin: 8vh auto;

        position: relative;
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
        top: 0;
        left: 0;

    }

    .float_l {
        float: none;
        width: 100%;
    }

    .float_r {
        float: none;
        width: 100%;
    }

}

<!DOCTYPE HTML>
<html>

<head>
    <title>TITLE</title>

    <link rel="stylesheet" type="text/css" href="style1.css">

</head>


<body>

    <div class="main">

        <div class="sub float_l">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ac nisi elit. Aliquam erat volutpat. Praesent in tellus eget turpis elementum facilisis quis vitae odio. Aliquam sollicitudin ante eget felis tristique, eu dapibus est laoreet. Fusce interdum, lorem faucibus sagittis tincidunt, tellus mi facilisis eros, a convallis lacus nisl at ligula. Aliquam rhoncus laoreet ultricies. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent elit elit, rhoncus vitae ligula sit amet, porttitor imperdiet sem. Nulla rhoncus nibh rutrum, accumsan nisi at, commodo sem. Sed id mi eu dui bibendum suscipit. Vivamus massa justo, tempus vitae lacus blandit, iaculis cursus orci. Praesent molestie, quam non sodales aliquam, justo orci rhoncus tellus, vitae tempor nisl felis et diam. Curabitur sed ultricies lacus. Cras id orci augue.
        </div>

        <div class="sub float_r">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ac nisi elit. Aliquam erat volutpat. Praesent in tellus eget turpis elementum facilisis quis vitae odio. Aliquam sollicitudin ante eget felis tristique, eu dapibus est laoreet. Fusce interdum, lorem faucibus sagittis tincidunt, tellus mi facilisis eros, a convallis lacus nisl at ligula. Aliquam rhoncus laoreet ultricies. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent elit elit, rhoncus vitae ligula sit amet, porttitor imperdiet sem. Nulla rhoncus nibh rutrum, accumsan nisi at, commodo sem. Sed id mi eu dui bibendum suscipit. Vivamus massa justo, tempus vitae lacus blandit, iaculis cursus orci. Praesent molestie, quam non sodales aliquam, justo orci rhoncus tellus, vitae tempor nisl felis et diam. Curabitur sed ultricies lacus. Cras id orci augue. 
        </div>

    </div>

</body>

我需要 div 在桌面上是水平的，在手机上是垂直的。我使用@media screen 和 (max-width: 950px) 来实现这一点。但是当启用触摸刺激时它似乎不起作用。

标签： htmlcssresponsive-designresponsive

html - 启用触摸刺激会改变 css

问题描述

解决方案

推荐阅读