css 我们如何调整不同屏幕尺寸的布局？

8wigbo56 于 2023-02-01 发布在其他

关注(0)|答案(5)|浏览(214)

屏幕在1920X1080分辨率下工作正常，但在较低的分辨率下，例如1280X721，屏幕和UI正在被破坏和压缩。
我们如何解决这个问题使用css或什么是技术？我们如何保留它应该调整大小reso？。将不胜感激。谢谢。

分辨率或屏幕大小为1280x721

分辨率为1920x1080或屏幕大小为

html代码

<div id="settings-admin-page-container">
    <div class="page-content flex-column">
      <mat-card class="mb-18px tenant-mat-card-centered">
        <!-- <img class="map-pin custom-pin" src="{{mapMarkerIconSingleProperty}}" /> -->
        <div class="settings-admin-page-content-form-container">
          <div fxLayoutAlign="center"> 
            <span style="padding-top: 20px;padding-bottom:15px;" class="cofirmation-text">{{configurations.INSPECTION_TENANT_ACKNOWLEDGE_CONFIRMATION.label}}</span>
          </div>
          <div fxLayoutAlign="center"> 
            <span style="padding-top: 10px;padding-bottom:30px;" class="vendors-visit">Please confirm that you acknowledged our vendor’s visit between March 2, 2022 - March 7, 2022 Morning (8 AM - 12 PM). Thank you!</span>
          </div>
          <span style="padding-top: 24px;" class="procedure-text">{{configurations.INSPECTION_TENANT_ACKNOWLEDGE_Q1.label}}</span>
          <mat-form-field class="input-field-width" appearance="fill">
            <mat-label>{{configurations.INSPECTION_TENANT_ACKNOWLEDGE_INPUT.label}}</mat-label>
              <textarea 
                name="A"
                matInput
                class="resize-none"
                [rows]="5"
                >
              </textarea>
            <mat-error>This is a required field.</mat-error>
          </mat-form-field>
          <span style="padding-top: 24px;" class="procedure-text">{{configurations.INSPECTION_TENANT_ACKNOWLEDGE_Q2.label}}</span>
        
          <mat-form-field class="input-field-width" appearance="fill">
            <mat-label>{{configurations.INSPECTION_TENANT_ACKNOWLEDGE_INPUT.label}}</mat-label>
              <textarea 
              name="B"
              matInput
              class="resize-none"
              [rows]="5"
              >
            </textarea>
            <mat-error>This is a required field.</mat-error>
          </mat-form-field>
            <span style="padding-top: 24px;" class="procedure-text">{{configurations.INSPECTION_TENANT_ACKNOWLEDGE_Q3.label}}</span>
            <div style="margin-top:10px;">
              <span class="secondary-text">{{configurations.INSPECTION_TENANT_ACKNOWLEDGE_Q3.label2}}</span>
            </div>
        </div>
      </mat-card>
    </div>
  </div>

CSS代码

.tenant-mat-card-centered{
    margin-left: 565px;
    margin-right: 565px;
    box-shadow: 0px 3px 3px -2px rgba(0, 0, 0, 0.2), 0px 3px 4px rgba(0, 0, 0, 0.14), 0px 1px 8px rgba(0, 0, 0, 0.12) !important;
  }

  .procedure-text {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 143%;
    letter-spacing: 0.15px;
    color: rgba(0, 0, 0, 0.87);
  }

  .input-field-width {
    width: 100%;
    padding-top: 10px;
  }

  .secondary-text {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 143%;
    letter-spacing: 0.15px;
    color: rgba(0, 0, 0, 0.6);
    margin-top: 30px;
    padding-bottom: 20px;
  }

  .user-card {
    margin-top:20px
  }

  .cofirmation-text{
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 400;
    font-size: 20px;
    line-height: 143%;
    text-align: center;
    color: rgba(0, 0, 0, 0.87);
  }

  .vendors-visit {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 143%;
    text-align: center;
    letter-spacing: 0.15px;
    color: rgba(0, 0, 0, 0.87)
  }

  .custom-pin {
    padding-top: 30px;
    width:150px;
  }

css

来源：https://stackoverflow.com/questions/71932629/how-do-we-adjust-the-layout-on-different-screen-sizes

5条答案

按热度按时间

qzwqbdag1#

你可以使用媒体查询来做到这一点！这是一个超级简单的例子。在这种情况下，当屏幕宽度低于600 px时，主体背景颜色为绿色。如果超过600 px，主体背景颜色将为蓝色。W3schools是一个很好的资源：https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

@media only screen and (max-width: 600px) {
      body {
        background-color: green;
      }
    }
body{
    background-color: blue;

}

赞(0）回复(0）举报 2023-02-01

igsr9ssn2#

媒体查询正是你所需要的，就像其他贡献者提供的一样。但是当使用媒体查询时，要确保你有合适的HTML标签来真正让它们工作：

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

这个标记实际上告诉浏览器如何缩放内容，使内容能够适应页面大小并随页面大小增长/收缩。

赞(0）回复(0）举报 2023-02-01

qaxu7uf23#

通过使用css媒体查询.这将帮助你调整到不同的屏幕尺寸

赞(0）回复(0）举报 2023-02-01

u4vypkhs4#

您可以使用介质查询来实现这一点。

- 示例：**

@media only screen and (max-width: 1200px){
    /*Tablets [601px -> 1200px]*/
}
@media only screen and (max-width: 600px){
    /*Big smartphones [426px -> 600px]*/
}
@media only screen and (max-width: 425px){
    /*Small smartphones [325px -> 425px]*/
}

在这里，我附上一些伟大的资源，你可以学习如何使响应网络使用媒体查询。

赞(0）回复(0）举报 2023-02-01

jgovgodb5#

1-您可以像这样使用介质查询：In this example, the container element is set to display as a grid with two columns when the screen width is greater than 600px, and as a block element when the screen width is less than 600px.
2-灵活的基于网格的布局
3 -相对测量单位In this example, the container element will take up 80% of the available width, regardless of the screen size.
您可以访问此链接以获取更多详细信息：https://codeanystuff.com/responsive-design-how-to-create-websites-that-adapt-to-different-screen-sizes-and-resolutions/

赞(0）回复(0）举报 2023-02-01