響應式佈局考慮從Chrome中

打印時，我做了materializecss一個很好的響應式佈局。現在，當我嘗試從Chrome的打印，佈局比在移動設備上是相同的。響應式佈局考慮從Chrome中

這意味着佈局看起來很可怕，因爲我的網頁（A4）是21釐米寬，而它雖然被周圍6釐米（用於手機）。

我沒有找到這個問題很多信息。有沒有辦法告訴瀏覽器，我的頁面，比如，1200個像素寬，使媒體被認爲是由CSS選擇大？

謝謝！

編輯：

更確切地說，我的佈局使用materializecss網格。所以，我有一個項目看起來像：

<div class="row"> 
<div class="col s12 m6">Item 1</div> 
<div class="col s12 m6">Item 2</div> 
</div>

這看起來應該是這樣的中型和更大的屏幕

Item1 | Item 2

而且這樣的小屏幕上

Item1 
Item2

顯然，一個頁面相當寬，所以它應該更多地被視爲中等屏幕而不是小屏幕。但是，在印刷時，我仍然可以看到與小屏幕相同的佈局。

2017-03-17 red

您可以通過使用「打印媒體查詢」設置打印樣式：

@media print { 
    /* your style goes here */ 
}

2017-03-17 13:11:14 lddz

是的，我知道，但我只是想用我的響應電網。看到我的額外編輯 – red

Materializecss似乎使用「移動第一」的方法。因此，默認樣式（不含媒體查詢）適用於小屏幕，媒體查詢適用於中型和大型屏幕。這就是爲什麼當你打印你的頁面時使用的樣式是小屏幕的樣式。 – lddz

好吧，我發現是什麼問題。

MaterializeCSS斷點看起來就像這樣：

@media only screen and (max-width: 992px) { ... }

所以，很顯然，他們只適用於屏幕的設備，而不是打印設備。我想知道他們爲什麼選擇添加這個。刪除所有only screen and OCCURENCES在物質化（.min）的.css的伎倆。

注意，我不得不添加此通過第一響應斷點

@page { 
/*size: 29.7cm 42cm; -> that would be a regular A4 page */ 
size: 35cm 49.5cm; 
}

2017-03-17 15:18:01 red

儘管如此，它並不理想，因爲一張普通的A4頁面（即使在肖像中）也應該超過第一個斷點。更大的頁面技巧使一切看起來太小... – red

回答