Question

我正在制作一个小型网页，我的问题是图像内的文本不能对所有设备进行响应，因此任何人都可以帮助我使该文本对响应进行响应，这是我的代码：

awk 'NR>2&&NR<5' file
52,01    dec   2018,sonia,team
52,01    dec   2018,sonia,team

awk '{print NR>2&&NR<5}' file
Nothing shows up

这是我的CSS样式

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

Answer 1

分享问题的屏幕截图

无论如何，您都可以使用
font-size: CSS;

CSS可以是：
100％， 100vw ， x％或 xvw （ x 是一个数字）使它具有响应性

也不要忘记
HTML中的<meta name="viewport" content="width=device-width, initial-scale=1" />

Answer 2

您应该在所有网页中包含以下视口元素：

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

width = device-width部分将页面的宽度设置为跟随设备的屏幕宽度（视设备而定）。

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

Answer 3

将此行添加到头部下面的行中，

<meta name="viewport" content="width=device-width, initial-scale=1.0">

图片内的文字没有反应

3 个答案: