gpt4 book ai didi

javascript - 图片内的文字没有响应

转载 作者:行者123 更新时间:2023-11-28 15:08:14 24 4
gpt4 key购买 nike

我正在制作一个小网页,我的问题是图像中的文本无法响应所有设备,所以任何人都可以帮助我使该文本响应,这是我的代码:

<html>
<head>
<title>resturant</title>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="main.css">
<script src="script.js"></script>
</head>

<body>
<div id="w3-display-container w3-mobile" id="main">
<img src="headerimg.jpg" class="w3-image w3-mobile">
<div class="w3-display-topleft w3-mobile" id="title"><br /><p>Welcome to <strong>JS</strong> resturant</p></div>
<p class="w3-display-left w3-mobile" id="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque at enim voluptatibus, veniam omnis quaerat cumque deleniti repellat tempore rem sapiente temporibus consectetur illum praesentium eius, expedita totam? Earum, quos?</p>
</div>
</body>

</html>

这是我的 CSS 样式


#title {
color: rgb(255, 237, 75);
font-size: 40px;
font-weight: bold;
padding-left: 30px;
}

#title strong {
color: brown;
}

#description {
max-width: 40%;
padding-left: 40px;
font-size: 20px;
font-weight: bold;
}

最佳答案

您应该在所有网页中包含以下视口(viewport)元素:

视口(viewport)元素向浏览器提供有关如何控制页面尺寸和缩放比例的说明。

width=device-width 部分设置页面的宽度以跟随设备的屏幕宽度(这将因设备而异)。

initial-scale=1.0 部分设置浏览器首次加载页面时的初始缩放级别。

关于javascript - 图片内的文字没有响应,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54265652/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com