Question

我使用material-ui及其网格功能开发了一个表单。但是，我在中型设备和平板电脑上遇到了问题。我怎么能解决这个问题？调整浏览器大小或响应工具时可以看到此问题。我在codesandbox中创建了一个工作演示。

这是完整的代码

的style.css

 <Grid container spacing={24}>
      <form className="login-form validate-form" onSubmit={handleSubmit}>
        <span className="login-form-title p-b-59">Sign Up</span>
        <Grid item xs={12}>
          <Field
            id="fullName"
            name="fullName"
            placeholder="Fullname"
            className="input-field"
            onChange={handleChange}
            value={fullName}
            fullWidth
            component={MaterialTextField}
            {...fullName}
          />
        </Grid>
        <Grid item xs={12}>
          <Field
            id="emai"
            name="email"
            onChange={handleChange}
            value={email}
            placeholder="Email"
            className="input-field"
            fullWidth
            component={MaterialTextField}
          />
        </Grid>
        <Grid item xs={12}>
          <Field
            id="password"
            name="password"
            onChange={handleChange}
            value={password}
            className="input-field"
            placeholder="password"
            type="password"
            fullWidth
            component={MaterialTextField}
          />
        </Grid>
        <Grid item xs={12}>
          <div className="terms">
            <FormControlLabel
              control={
                <Checkbox
                  id="agree-term"
                  type="checkbox"
                  onChange={handleCheckbox}
                  name="agreeTerm"
                />
              }
              label="I agree to terms and conditions"
            />
          </div>
        </Grid>
        <Grid item xs={12}>
          <div className="buttonContainer">
            <Button
              variant="raised"
              disabled={pristine || submitting || !agreeTerm}
              id="create-account"
              type="submit"
            >
              Sign Up
            </Button>
          </div>
        </Grid>
      </form>
      <Grid item xs={12}>
        <div className="form-footer">
          <p>
            Already have an account,<a href="">Log in</a>
          </p>
        </div>
      </Grid>
    </Grid>

Register.js

do { let ipAddress = try String(contentsOf: URL.init(string: "http://icanhazip.com/")!, encoding: String.Encoding.utf8)
        print("IP AddRess : ", ipAddress)

    } catch { print(error) }

如何让它对所有设备做出响应？

预期行为 - 它应该像桌面设备和平板电脑设备的图像，但移动设备没有左蓝屏。

expected design for desktop and tab

Answer 1

因此。如何添加媒体查询来隐藏整个图像？

@media only screen and (max-width: 768px) {
  .login-more {
    display: none;
  }
}

你的元素也有一些奇怪的填充：

.limiter {
  width: 100%;
  margin: 0 auto;
  padding: 0 10em; /* I think this is unnecessary big. Use some percentages. Perhaps 5%? */
}

最后一件事。使用box-sizing: border-box;可能有助于您的设计溢出屏幕宽度。

我的沙箱over here

中型设备的设计中断

1 个答案: