zzzcsd 2016-04-06 04:40 采纳率: 0%
浏览 852

手机网站，文字内容宽度始终在屏幕范围内，如何做到的？

http://www.uml.org.cn/jmshj/2015060510.asp
比如这个网页，双指缩放屏幕，文章的文字内容的宽度，始终在屏幕宽度范围之内
如何做到的？

  • 写回答

1条回答 默认 最新

  • 你知我知皆知 2024-08-05 08:52
    关注

    以下回答参考 皆我百晓生、券券喵儿 等免费微信小程序相关内容作答，并由本人整理回复。

    HTML和CSS可以实现这种效果。这里是一个简单的例子：

    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>页面标题</title>
<style>
    body {
        width: 100%;
        margin: 0;
        padding: 0;
    }

    .content {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100vh; /* vh 是 viewport height 的缩写，即视窗高度 */
        overflow-x: hidden; /* 隐藏超出视窗外的内容 */
        transition: all 0.3s ease-in-out;
    }
    
    @media (max-width: 768px) { /* 将响应式设计应用到小屏幕设备上 */
        .content {
            max-height: 90vh;
        }
    }
</style>
</head>
<body>
<div class="content">
    <p>这是你的文章内容。</p>
</div>
</body>
</html>

    在这个例子中，我们使用了 display: flex 和 align-items: center、justify-content: center 属性来使内容居中对齐，并且设置了 height: 100vh 来确保内容在整个视窗内显示。

    然后，我们在 CSS 中使用了一个媒体查询，当视窗宽度小于或等于 768px 时，将 max-height 设置为 90vh，以保证内容不会溢出视窗。

    最后，我们将整个内容放在一个 <div> 标签中，并为其添加类名为 .content，这样就可以通过样式选择器（例如 .content p）来引用它了。

    注意：这个示例是针对桌面浏览器的，如果你的目标是兼容移动设备，你可能需要进一步调整样式。

    评论

报告相同问题？