沃梦达 / 编程问答 / 前端问题 / 正文

在瘦小的视区上，HTML标记停止为全宽

沃梦达教程前端问题

2022-01-01

html tag stops being full width on skinny viewports(在瘦小的视区上，HTML标记停止为全宽)

本文介绍了在瘦小的视区上，HTML标记停止为全宽的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我的<html>标记在瘦小的视区上停止占据全宽(即使应用的绿色背景色似乎覆盖了全宽)。这会导致我的1行1列的css网格在水平方向上不居中。在此屏幕截图中，我将鼠标悬停在<html>标记上，而视区很薄：

一旦设备变宽，<html>就会占据整个宽度，内容水平居中。

数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">

html,
body {
  background-color: #46d689;
  align-content: space-evenly;
  display: grid;
  justify-items: center;
  align-content: space-evenly;
  grid-template-columns: auto;
  grid-template-rows: 1fr;
}

.subtitle {
  text-align: center;
}

.container {
  display: grid;
  justify-items: center;
  align-content: space-evenly;
  grid-template-columns: repeat(1, minmax(240px, 1fr));
  grid-template-rows: 1fr;
}

<section className="container">
        <img
          alt="logo"
          style={{
            height: "250px",
            objectFit: "contain",
          }}
          src={require("./img/logo_web.png")}
        />
        <h4 style={{ color: "#FFF" }}>The Vegan Repository</h4>
        <h4
          style={{
            color: "#FFF",
            fontWeight: "400",
            marginBottom: "0",
          }}
        >
          Find Vegan Products in your Local Community
        </h4>

        <span
          style={{
            color: "#FFF",
            marginBottom: "20px",
            display: "inline-block",
          }}
        >
          Coming Soon to iOS
        </span>
        <br />
        <div>
          {/* <a href="https://itunes.apple.com/nz/app/surfboard-volcalc/id1223913734?mt=8"> *

沃梦达教程

本文标题为：在瘦小的视区上，HTML标记停止为全宽