基本的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没有响应/移动友好

回答

相关问题