如何使我的网页适合任何屏幕尺寸？

问题描述 投票：0回答：1

我试图让我的网页适合计算机屏幕的边界，因为当我尝试将代码作为网页查看时，宽度太宽，我必须滚动到一侧才能看到。我已经有几年没有编码了，我正在努力完成这个项目，所以我现在很挣扎。我知道问题出在我的 CSS 代码的表格和卡片中，我相信这与我使用预定像素作为宽度而不是百分比有关；但是，我自己找不到解决此问题的方法。我尝试过的任何修复都会导致我破坏卡片和桌子的比例。感谢任何帮助，谢谢！

What it looks like

CSS代码


/*rice*/
.container {
    display: grid;
    grid-template-columns: 1fr;
    
  }
  
  /* Nav Styles */
  .nav-wrapper {
    display: flex;
    justify-content: space-between;
    padding: 38px;
    background: url(images/banners/bannerrice.png);
  }
  
  .left-side {
    display: flex;
  }
  
  .nav-wrapper > .left-side > div {
    margin-right: 20px;
    font-size: 0.9m;
    text-transform:uppercase;
  }
  
  .nav-link-wrapper {
    height: 22px;
    border-bottom: 1px solid transparent;
    transition: border-bottom 0.5s;
  }
  
  .nav-link-wrapper a {
    color: white;
    text-decoration: none;
    transition: color 0.5s;
  }
  
  .nav-link-wrapper:hover {
    border-bottom: 1px solid black;
  }
  
  .nav-link-wrapper a:hover {
    color: black;
  }
  
  .active-nav-link {
    border-bottom: 1px solid black;
  }
  
  .active-nav-link a{
    color: black;
  }
  
  .brand {
    color: white; 
  }
  
  .title {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    margin: -50px;
  }
  /* Cards */
  body {
    background: url();
    font-family: 'Oswald', sans-serif;
  }
  
  .flex {
  display: flex;
  align-items: center;
  justify-content: center;
  }
  .card {
    display: grid;
    grid-template-columns: 300px;
    grid-template-rows: 210px 180px 80px;
    grid-template-areas: "image" "text" "stats";
  
    border-radius: 18px;
    background: white;
    box-shadow: 5px 5px 15px rgba(0,0,0,0.9);
    font-family: 'Oswald', sans-serif;
    text-align: center;
    
  
    transition: 0.5s ease;
    cursor: pointer;
    margin:30px;
  }
  .card-image {
    grid-area: image;
    background: url("images/cards/ricecard1.jpg");
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    background-size: cover;
  }
  
  .card-text {
    grid-area: text;
    margin: 25px;
  }
  .card-text .date {
    color: rgb(255, 7, 110);
    font-size:13px;
  }
  .card-text p {
    color: grey;
    font-size:40px;
    margin:-15px;
    font-weight: 300;
  }
  .card-text h2 {
    margin-top:0px;
    font-size:28px;
  }
  .card-stats {
    grid-area: stats; 
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    background: #002169;
  }
  .card-stats .stat {
    padding:10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: white;
  }
  .card-stats .border {
    border-left: 1px solid #002169;
    border-right: 1px solid #002169;
  }
  .card-stats .value{
    font-size:22px;
    font-weight: 500;
  }
  .card-stats .value sup{
    font-size:12px;
  }
  .card-stats .type{
    font-size:14px;
    font-weight: 300;
    text-transform: uppercase;
  }
  .card:hover {
    transform: scale(1.15);
    box-shadow: 5px 5px 15px rgba(0,0,0,0.6);
  }
  
  /*card2*/
  .card-image.card2 {
    background: url("images/cards/ricecard2.jpg");
    background-size: cover;
  }
  .card-text.card2 .date {
    color: #002169;
  }
  .card-stats.card2 .border {
    border-left: 1px solid #002169;
    border-right: 1px solid #002169;
  }
  .card-stats.card2 {
    background: #002169;
  }
  /*card3*/
  .card-image.card3 {
    background: url("images/cards/ricecard3.jpg");
    background-size: cover;
  }
  .card-text.card3 .date {
    color: #002169;
  }
  .card-stats.card3 .border {
    border-left: 1px solid #002169;
    border-right: 1px solid #002169;
  }
  .card-stats.card3 {
    background: #002169;
  }
   /*card4*/
   .card-image.card4 {
    background: url("images/cards/ricecard4.jpg");
    background-size: cover;
  }
  .card-text.card4 .date {
    color: #002169;
  }
  .card-stats.card4 .border {
    border-left: 1px solid #002169;
    border-right: 1px solid #002169;
  }
  .card-stats.card4 {
    background: #002169;
  }
  /* tables */
  /* skinny */
  .content-table {
  table-layout: fixed;
  border-collapse: collapse;
  margin: 25px 0;
  margin-top:-10px;
  margin-right: 220px;
  margin-left: 220px;
  font-size: 0.9em;
  min-width: 400px;
  width: 900px;
  border-radius: 5px 5px 0 0;
  overflow: hidden;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
  }
  
  .content-table thead tr {
  background-color: #002169;
  color: #ffffff;
  text-align: left;
  font-weight: bold;
  }
  
  .content-table th,
  .content-table td {
  padding: 12px 15px;
  }
  
  .content-table tbody tr {
  border-bottom: 1px solid #dddddd;
  }
  
  .content-table tbody tr:nth-of-type(even) {
  background-color: #f3f3f3;
  }
  
  .content-table tbody tr:last-of-type {
  border-bottom: 2px solid #002169;
  }
  
  .content-table tbody tr.active-row {
  color: ();
  }
  
  
  /*titles*/
  .info {
  font-size: 25px;
  margin-left: 220px;
  margin-top: -30px;
  }
  /* normal */
  .content-table2 {
  border-collapse: collapse;
  table-layout: fixed;
  margin: 25px 0;
  margin-top:-20px;
  margin-right: 220px;
  margin-left: 220px;
  font-size: 0.9em;
  min-width: 400px;
  border-radius: 5px 5px 0 0;
  overflow: hidden;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
  }
  
  .content-table2 thead tr {
  background-color: #002169;
  color: #ffffff;
  text-align: left;
  font-weight: bold;
  }
  
  .content-table2 th,
  .content-table2 td {
  padding: 12px 15px;
  }
  
  .content-table2 tbody tr {
  border-bottom: 1px solid #dddddd;
  }
  
  .content-table2 tbody tr:nth-of-type(even) {
  background-color: #f3f3f3;
  }
  
  .content-table2 tbody tr:last-of-type {
  border-bottom: 2px solid #002169;
  }
  
  .content-table2 tbody tr.active-row {
  color: ();
  }
  
  .content-table5 {
    table-layout: fixed;
    border-collapse: collapse;
    margin: 25px 0;
    margin-top:-10px;
    margin-right: 220px;
    margin-left: 220px;
    font-size: 0.9em;
    min-width: 400px;
    border-radius: 5px 5px 0 0;
    overflow: hidden;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
    }
    
    .content-table5 thead tr {
    background-color: #002169;
    color: #ffffff;
    text-align: left;
    font-weight: bold;
    }
    
    .content-table5 th,
    .content-table5 td {
    padding: 12px 15px;
    }
    
    .content-table5 tbody tr {
    border-bottom: 1px solid #dddddd;
    }
    
    .content-table5 tbody tr:nth-of-type(even) {
    background-color: #f3f3f3;
    }
    
    .content-table5 tbody tr:last-of-type {
    border-bottom: 2px solid #002169;
    }
    
    .content-table5 tbody tr.active-row {
    color: ();
    }
  
  /* kinda skinny */
  .content-table3 {
    table-layout: fixed;
  border-collapse: collapse;
  margin: 25px 0;
  margin-top:-20px;
  margin-right: 220px;
  margin-left: 220px;
  font-size: 0.9em;
  min-width: 400px;
  width: 1200px;
  border-radius: 5px 5px 0 0;
  overflow: hidden;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
  }
  
  .content-table3 thead tr {
  background-color: #002169;
  color: #ffffff;
  text-align: left;
  font-weight: bold;
  }
  
  .content-table3 th,
  .content-table3 td {
  padding: 12px 15px;
  }
  
  .content-table3 tbody tr {
  border-bottom: 1px solid #dddddd;
  }
  
  .content-table3 tbody tr:nth-of-type(even) {
  background-color: #f3f3f3;
  }
  
  .content-table3 tbody tr:last-of-type {
  border-bottom: 2px solid #002169;
  }
  
  .content-table3 tbody tr.active-row {
  color: ();
  }
  
  .content-table4 {
    table-layout: fixed;
    border-collapse: collapse;
  margin: 25px 0;
  margin-top:-10px;
  margin-right: 220px;
  margin-left: 220px;
  font-size: 0.9em;
  width: 1200px;
  border-radius: 5px 5px 0 0;
  overflow: hidden;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
  }
    
    .content-table4 thead tr {
    background-color: #002169;
    color: #ffffff;
    text-align: left;
    font-weight: bold;
    }
    
    .content-table4 th,
    .content-table4 td {
    padding: 12px 15px;
    }
    
    .content-table4 tbody tr {
    border-bottom: 1px solid #dddddd;
    }
    
    .content-table4 tbody tr:nth-of-type(even) {
    background-color: #f3f3f3;
    }
    
    .content-table4 tbody tr:last-of-type {
    border-bottom: 2px solid #002169;
    }
    
    .content-table4 tbody tr.active-row {
    color: ();
    }
    
    .facts {
      display: grid;
      grid-template-columns: 1fr 2.5fr;
      align-items: center;
      margin-left: 220px;
      margin-top:-33px;
      margin-bottom:17px;
      justify-content: space-between;
      font-size:22px;
      font-weight: 200;
      color: #444444;
      
      
      }
    
      .facts .line{
        padding-top: 3px;
        padding-bottom: 3px;
        border-bottom: 1px solid grey;
        width:330px;
      }
    
      .facts .line .color{
        color:black;
      }
      ```
html css web display
1个回答
0
投票

您的网页布局似乎遇到了问题，特别是表格、卡片和其他元素的宽度。为了使您的网页适合计算机屏幕的范围并确保其响应能力，您应该考虑使用相对单位（例如百分比）并相应地调整布局。

以下是使您的网页具有响应能力的一些事项：

  1. 使用百分比宽度：用百分比替换固定像素宽度 用于容器、桌子和卡片。这将使他们能够适应 不同的屏幕尺寸。例如，不要设置宽度： 1200 像素；对于您的表格，请使用宽度：100%；使它们扩展到 其父容器的全宽。

  2. 考虑媒体查询：使用CSS媒体查询来定义不同的 不同屏幕尺寸的样式。这允许您创建 根据用户设备进行调整的响应式设计。

  3. 使用 Flexbox 或 Grid 布局：考虑使用 CSS Flexbox 或 Grid 布局创建灵活且响应式的布局。这些布局 技术可以更轻松地控制定位和对齐 元素。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.