Question

文本在桌面上看起来很好，但是当我使用chrome inspect和调整大小以移动视图时，该文本不再显示.... i使用其他标签来标记文本，但仍然是同样的问题。

.product-full {
        position: relative;
        height: auto;
        width: auto;
        margin: 38px 0 0 0;
    }

    .product-full a {
        margin: 0 13px 0 13px;
        width: auto;
        height: 220px;
    }

    .product-full p {
        margin: 0;
    }

    img[alt~="from"] {
        position: absolute;
        max-width: 59.78px;
        max-height: 32px;
        margin-left: 10.67px;
        margin-top: 10px;
    }

    img[alt~="product"] {
        display: block;
        margin-top: 0;
        margin-left: auto;
        margin-right: auto;
        width: 50%;
        height: auto;
    }

<body>

<div class="product-full">
    <a>
       <img src="/Assets/from-amazon.png" alt="from">
        <img src="/Assets/product.png" alt="product">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </a>
</div>

</body>

Answer 1

首先，您必须检查<head>标记中是否包含meta标记。因为元标记对于不同的视口很重要。我为响应式设计添加了重要的元标记。

如果您有meta标签，则应在CSS中为不同的屏幕尺寸添加媒体查询。我已经为移动视图添加了媒体查询。希望对您有所帮助。

.product-full {
        position: relative;
        height: auto;
        width: auto;
        margin: 38px 0 0 0;
    }

    .product-full a {
        margin: 0 13px 0 13px;
        width: auto;
        height: 220px;
    }

    .product-full p {
        margin: 0;
    }

    img[alt~="from"] {
        position: absolute;
        max-width: 59.78px;
        max-height: 32px;
        margin-left: 10.67px;
        margin-top: 10px;
    }

    img[alt~="product"] {
        display: block;
        margin-top: 0;
        margin-left: auto;
        margin-right: auto;
        width: 50%;
        height: auto;
    }
    
    @media (max-width:767px){
         .product-full p{font-size:20px;}
      
    }

<html>
<head>
    <meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>



<body>


<div class="product-full">
    <a>
       <img src="/Assets/from-amazon.png" alt="from">
        <img src="/Assets/product.png" alt="product">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </a>
</div>

</body>
</html>

文本不会在小屏幕上显示

1 个答案: