爲什麼使用響應式css代碼堆疊項目？

我有一個在網格中構建的投資組合頁面。在普通尺寸的顯示器和大多數移動設備上，響應性效果良好。在某些移動設備（即Nexus 6P）上響應速度有所下降，內容堆疊的尺寸會減小，如俄羅斯娃娃。爲什麼使用響應式css代碼堆疊項目？

編輯：經過大量的故障排除和其他問題的閱讀後，我認爲它與原始設計者設置對em和px視口大小的響應性有關。這是正常的嗎？我在屏幕截圖和css文件下面添加了一個鏈接，因爲有很多不同的媒體查詢會影響這個。

編輯：只有這似乎是在40.063em和〜< 640像素，範圍媒體查詢重疊的非常小的尺寸窗口發生。另外，在模擬器中複製也很困難，因爲如果我先打開一個較小的視口，然後再打開Nexus6P尺寸（或其他尺寸爲641px或更小的其他尺寸），則它會正常加載。它僅在從較大的視口更改爲寬度爲641px或更小的視口時出錯。

Nexus 6P size, items stack oddly

我也跟着另一個類似的職位的建議，使用「白色空間：NOWRAP;」並在.work-item代碼和.work-item img中添加了該代碼。它改變了堆疊（不同的物品堆疊），但沒有解決問題。

已解決：此模塊的HTML文件聲明爲中等6和大3的網格大小，但留下少量未聲明的格式，導致格式尷尬。

<div class="medium-6 large-3 work-item">

我加小6類，並調整了媒體的質疑，使事情很好地適應。

<div class="medium-6 large-3 small-6 work-item">

感謝您的幫助！我學到了更多關於媒體查詢的知識，並在今天重新學習了更多關於網格的知識。

來源

2017-08-02 Sonya Iverson

鏈接到小提琴/筆/垃圾桶，儘可能地重現問題。這樣我們可以幫助你更好。 – SidTheBeard

你能否請你添加相關的HTML來重現你的問題？ –

@SidTheBeard，我試着用小提琴複製，無法得到響應錯誤。我現在最好的領導是原始設計師設置em和px單位的響應能力，他們似乎重疊並導致錯誤，但我無法追查到具體的罪魁禍首。它也只發生在模擬器上，當我從一個更大的屏幕尺寸到這個特定的尺寸。如果我先加載有問題的尺寸，或者加載正確的加載一個然後問題一，它加載罰款。 –

-1

使用明確：均爲屬性完成您的區域，在您的頁腳區域之前。爲了調整設備像素比例，您必須針對不同設備使用媒體查詢。

來源

2017-08-02 07:36:03

爲什麼使用響應式css代碼堆疊項目？

回答

相關問題