基本的CSS沒有響應/移動友好

我想弄清楚如何使這個基本的CSS移動友好/響應瀏覽器窗口的變化。目前，除橫向平板電腦以外，所有尺寸的代碼均可正常顯示通常圖片和代碼會下拉到不同的行，但由於某種原因，所有內容都會顯示在一行上並延伸到頁面邊界之外。我已經嘗試了從max/min-width和padding到position和overflow，但我無法得到這個工作。基本的CSS沒有響應/移動友好

這裏是重要的代碼，其餘的只是文本格式和效果。在HTML是基本的，只是調用.view

.view { 
    margin-left: auto; 
    margin-right: auto; 
    width: 300px; 
    height: 300px; 
    float: center; 
    overflow: hidden; 
    position: relative; 
    text-align: center; 
    box-shadow: 1px 1px 2px #e6e6e6; 
    cursor: default; 
    background: #fff 
} 
.view .mask, .view .content { 
    width: 300px; 
    height: 300px; 
    position: absolute; 
    overflow: hidden; 
    top: 0; 
} 
.view img { 
    display: block; 
    position: relative; 
}

這一切都是通過Squarespace完成，他們向我保證，這是我的代碼引起的問題，而不是他們的模板代碼。

我所指的是this page上的圖片。改變頁面的大小，當你打到4-6英寸寬時，你會看到我指的是什麼。圖片重疊並形成滾動條。單張照片之間沒有間距。

來源

2015-04-22 Nicholas

你看過@media查詢CSS嗎？ – ochi

你可以只增加圖像重新組織的頁面寬度（即800px而不是640px）？ – AboutTime

將.view更改爲max-width：250px;和.view img {width：100％;身高：汽車;}讓我知道如果它的工作，我會做出答案。 – SuperVeetz

由於.sqs-col-12和.sqs-col-4設置爲33.3333％，因此您的圖片正在重新調整大小。如果你給它們一個固定的寬度（比如說320px），它們不會自行摺疊，但會在調整大小時浮動到下一行。

.sqs-col-12 .sqs-col-4 { 
    width: 320px; 
}

來源

2015-04-22 19:38:43 SRing

感謝您的快速響應！不幸的是，當高度和寬度限制被刪除時，圖像會縮放，但文本覆蓋不會。有沒有解決這個問題的方法？類.view .mask，.view。內容將不得不被改變以允許縮小尺寸，或者文本框必須以某種方式限制可見字符。如果圖像始終保持全尺寸，我仍然會更喜歡，但如果可能的話，移動到不同的行。 – Nicholas

我剛剛更新了答案，嘗試將您的需求改善一點。 – SRing

你無法相信我現在有多開心。先生，你是英雄。 – Nicholas

基本的CSS沒有響應/移動友好

回答

相關問題