预标记在移动设备中没有响应

Question

我的预标记在较小的屏幕上超出父 div。正如您在屏幕截图中看到的那样，它在移动设备上没有响应。请帮我让它响应

CSS:

pre {
            background-color: #FFFFCC;
            border: 1px dashed #FF6666;
            padding-top: 7px;
            padding-bottom: 8px;
            padding-left: 10px;
            margin: 10px;
            float: left;
            padding-right: 10px;
            clear: both;
            }

Answer 1

使用百分比代替像素。

pre {
    background-color: #FFFFCC;
    border: 1% dashed #FF6666;
    padding-top: 1.2%;
    padding-bottom: 1.2%;
    padding-left: 1%;
    margin: 1.5%;
    float: left;
    padding-right: 1.5%;
    clear: both;
    font-size: 1em;
}

应该可以，因此它会自行调整大小。

Answer 2

使用 视口单位，例如 vw 或 vh 而不是 px 和 % 因为它会帮助您 webpage/website 响应迅速。

尝试附加的代码，如果它不起作用，请在评论中告诉我。我会尽力解决您的问题。

pre {
     background-color: #FFFFCC;
     border: 1px dashed #FF6666;
     padding-top: 0.518vw;
     padding-bottom: 0.585vw;
     padding-left: 0.732vw;
     margin: 0.732vw;
     float: left;
     padding-right: 0.732vw;
     clear: both;
     }

Answer 3

默认情况下，pre 元素旨在 pre 提供文本格式。这意味着文本不会被包裹在里面，这就是为什么它可以展开整个容器。

尝试设置样式规则 overflow: scroll; 或 overflow: hidden; 任意一个。

预标记在移动设备中没有响应

pre tag not responsive in mobile

html

pre