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

Question

在较小的屏幕中，我的 pre 标签超出了父 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

使用视口(viewport)单位，例如vw或vh，而不是px和%因为它将帮助您使您的网页/网站具有响应能力。

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

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;
     }