使用簡單網格系統在移動大小上溢出容器內容

我想了解一種更好的方法來將自定義邏輯適應簡單網格（Simple Grid System，當定製寬度div大於移動版面時，我的問題是我的例如，我有一個400像素的寬度的div，在較小的設備上給出了20px（網格規則）的左側和右側白色填充，但是由於它大於移動佈局並溢出了網格格子填充手機的大小，我的div溢出了正確的20px填充。我想了解最好的方法來使用網格。我應該創建自己的斷點來縮小div寬度以適應移動？我應該使用CSS屬性覆蓋溢出？我最好的辦法是什麼？我只想找到一個合適的金標準來保持工作流程的一致性。謝謝。使用簡單網格系統在移動大小上溢出容器內容

Example

HTML：

<!doctype html> 

<html> 

    <head> 
     <title>Simple Grid</title> 
     <meta charset="utf-8" /> 
     <link rel="stylesheet" type="text/css" href="simplegrid.css" /> 
     <link rel="stylesheet" type="text/css" href="styles.css" /> 


    </head> 

    <body> 
     <!-- Grid 2/3 and 1/3--> 
     <div class="grid"> 
      <div class="col-1-1"> 
       <div id="test"> 
        <h1>This is a test.</h1> 
       </div> 
      </div> 
     </div> 
     <!-- Grid 1/2 --> 

    </body> 

</html>

CSS：

#test { 
    background-color: green; 
    height: 400px; 
    width: 400px; 
    margin: 0 auto; 
    overflow: hidden; 
} 

#test h1 { 
    text-align: center; 
}

簡單的網格：

/* 
    Simple Grid 
    Learn More - http://dallasbass.com/simple-grid-a-lightweight-responsive-css-grid/ 
    Project Page - http://thisisdallas.github.com/Simple-Grid/ 
    Author - Dallas Bass 
    Site - dallasbass.com 
*/ 

*, *:after, *:before { 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
} 

body { 
    margin: 0px; 
} 

[class*='col-'] { 
    float: left; 
    padding-right: 20px; /* column-space */ 
} 

.grid { 
    width: 100%; 
    max-width: 1140px; 
    min-width: 755px; 
    margin: 0 auto; 
    overflow: hidden; 
} 

.grid:after { 
    content: ""; 
    display: table; 
    clear: both; 
} 

.grid-pad { 
    padding-top: 20px; 
    padding-left: 20px; /* grid-space to left */ 
    padding-right: 0px; /* grid-space to right: (grid-space-left - column-space) e.g. 20px-20px=0 */ 
} 

.push-right { 
    float: right; 
} 

/* Content Columns */ 

.col-1-1 { 
    width: 100%; 
} 
.col-2-3, .col-8-12 { 
    width: 66.66%; 
} 

.col-1-2, .col-6-12 { 
    width: 50%; 
} 

.col-1-3, .col-4-12 { 
    width: 33.33%; 
} 

.col-1-4, .col-3-12 { 
    width: 25%; 
} 

.col-1-5 { 
    width: 20%; 
} 

.col-1-6, .col-2-12 { 
    width: 16.667%; 
} 

.col-1-7 { 
    width: 14.28%; 
} 

.col-1-8 { 
    width: 12.5%; 
} 

.col-1-9 { 
    width: 11.1%; 
} 

.col-1-10 { 
    width: 10%; 
} 

.col-1-11 { 
    width: 9.09%; 
} 

.col-1-12 { 
    width: 8.33% 
} 

/* Layout Columns */ 

.col-11-12 { 
    width: 91.66% 
} 

.col-10-12 { 
    width: 83.333%; 
} 

.col-9-12 { 
    width: 75%; 
} 

.col-5-12 { 
    width: 41.66%; 
} 

.col-7-12 { 
    width: 58.33% 
} 



/* Pushing blocks */ 

.push-2-3, .push-8-12 { 
    margin-left: 66.66%; 
} 

.push-1-2, .push-6-12 { 
    margin-left: 50%; 
} 

.push-1-3, .push-4-12 { 
    margin-left: 33.33%; 
} 

.push-1-4, .push-3-12 { 
    margin-left: 25%; 
} 

.push-1-5 { 
    margin-left: 20%; 
} 

.push-1-6, .push-2-12 { 
    margin-left: 16.667%; 
} 

.push-1-7 { 
    margin-left: 14.28%; 
} 

.push-1-8 { 
    margin-left: 12.5%; 
} 

.push-1-9 { 
    margin-left: 11.1%; 
} 

.push-1-10 { 
    margin-left: 10%; 
} 

.push-1-11 { 
    margin-left: 9.09%; 
} 

.push-1-12 { 
    margin-left: 8.33% 
} 


@media handheld, only screen and (max-width: 767px) { 
    .grid { 
     width: 100%; 
     min-width: 0; 
     margin-left: 0px; 
     margin-right: 0px; 
     padding-left: 20px; /* grid-space to left */ 
     padding-right: 10px; /* grid-space to right: (grid-space-left - column-space) e.g. 20px-10px=10px */ 
    } 

    [class*='col-'] { 
     width: auto; 
     float: none; 
     margin-left: 0px; 
     margin-right: 0px; 
     margin-top: 10px; 
     margin-bottom: 10px; 
     padding-left: 0px; 
     padding-right: 10px; /* column-space */ 
    } 


    /* Mobile Layout */ 

    [class*='mobile-col-'] { 
     float: left; 
     margin-left: 0px; 
     margin-right: 0px; 
     margin-top: 0px; 
     margin-bottom: 10px; 
     padding-left: 0px; 
     padding-right: 10px; /* column-space */ 
     padding-bottom: 0px; 
    } 

    .mobile-col-1-1 { 
     width: 100%; 
    } 
    .mobile-col-2-3, .mobile-col-8-12 { 
     width: 66.66%; 
    } 

    .mobile-col-1-2, .mobile-col-6-12 { 
     width: 50%; 
    } 

    .mobile-col-1-3, .mobile-col-4-12 { 
     width: 33.33%; 
    } 

    .mobile-col-1-4, .mobile-col-3-12 { 
     width: 25%; 
    } 

    .mobile-col-1-5 { 
     width: 20%; 
    } 

    .mobile-col-1-6, .mobile-col-2-12 { 
     width: 16.667%; 
    } 

    .mobile-col-1-7 { 
     width: 14.28%; 
    } 

    .mobile-col-1-8 { 
     width: 12.5%; 
    } 

    .mobile-col-1-9 { 
     width: 11.1%; 
    } 

    .mobile-col-1-10 { 
     width: 10%; 
    } 

    .mobile-col-1-11 { 
     width: 9.09%; 
    } 

    .mobile-col-1-12 { 
     width: 8.33% 
    } 

    /* Layout Columns */ 

    .mobile-col-11-12 { 
     width: 91.66% 
    } 

    .mobile-col-10-12 { 
     width: 83.333%; 
    } 

    .mobile-col-9-12 { 
     width: 75%; 
    } 

    .mobile-col-5-12 { 
     width: 41.66%; 
    } 

    .mobile-col-7-12 { 
     width: 58.33% 
    } 

    .hide-on-mobile { 
     display: none !important; 
     width: 0; 
     height: 0; 
    } 
}

來源

2014-07-03 cphill

這裏的問題是，你給的元素的固定與400px。所以無論視口大小如何，瀏覽器都會將其渲染爲400。

要解決這個問題，我建議使用最大寬度來代替。基本上，div在視口內儘可能寬，直到達到400px - 然後停止。

還高興地注意到這個問題無關與電網框架您使用:)

#test { 
    background-color: green; 
    height: 400px; 
    max-width: 400px; 
    margin: 0 auto; 
    overflow: hidden; 
}

來源

2014-07-03 14:24:27 harelpls

大。這正是我正在尋找的。如果我想在較小的視口大小覆蓋20px的填充，我會爲該div設置填充爲0嗎？ – cphill

是的，在媒體內查詢爲小。也就是說，填充是在我相信的列或網格上，而不是#test元素。 – harelpls

使用簡單網格系統在移動大小上溢出容器內容

回答

相關問題