响应式设计的CSS问题

我最近为我的旧格式网站添加了mobile.css，使它在高端移动设备上看起来没什么问题。响应式设计的CSS问题

几乎所有页面在帖子开始时都有一个图像，只有属性float：left。

.field-type-image img 
    { 
    float: left; 
    }

它在正常屏幕上看起来没问题。我用@media屏幕和（最大宽度：1024）添加了一个新的css，并调整了几个值，使其在手持设备上看起来不错。我希望在每篇文章开头的时候让图片变得小小一点，几乎是实际分辨率的一半。因此我尝试了这个。

.field-type-image img 
    { 
    float: left; 
    width: 46%; 
    height: 32%; 
    }

图像的宽度似乎减少了我的ipad，手机等等的方式应该是，但高度仍然是原来的一样。所以它看起来非常糟糕。但是，如果我在计算机的普通浏览器上缩小屏幕宽度，那么确实会产生“高度：32％”的效果。并且看起来不错。但在手机浏览器中，它看起来像是高度：32％;不管用。例如。 http://www.rakeshmondal.info/IR-object-detection

如何降低在移动设备上工作的图像的CSS高度？由于我网站上的每个帖子都有不同分辨率的图片，因此我无法使用固定值来减小高度。像width：300px;高度：300像素;.

我希望我很清楚。在此先感谢:)

来源

2014-02-13 Rakesh

有很多很好的例子并回答这个问题，但在尝试复杂的事情之前，试试这个小小的修改并看看。使高度自动，清除缓存并运行玉米，然后从你的ipad中检查。

.field-type-image img 
{ 
    float: left; 
    width: 46%; 
    height: auto; 
}

来源

2014-02-14 02:12:02 Sanju

对不起，评论有点晚。是的，你是对的。我只是把高度做成：auto;只是响应式设计中的一行代码，它开始像魅力一样工作。谢谢三聚......谢谢。 – Rakesh

您需要在您的html文档的<head>标记中包含<meta name="viewport" content="width=device-width, initial-scale=1.0;">。

这样做会检测到正在使用的设备，然后如果检测到该设备将遵循媒体查询。

如果没有该代码，网站将在桌面上响应，但不在移动设备上响应。

这是一个有益的article from smashing magazine.

来源

2014-02-13 14:28:05

试着改变你的CSS到什么如下。

.field-type-image img 
{ 
    float: left; 
    max-width: 100%; /* keeps perspective for media queries */ 
}

如果你想要的形象“开始”小的一定尺寸的屏幕，我建议在可管理大小的容器包装是img。

例如，您的样式表“可以”像这样的事情（只是举个例子，你的HTML和CSS会有所不同，但概念是相同的）：

@media (max-width: 767px) { 
    .field-type-image 
    { 
    width: 300px; 
    float: left; 
    } 
    .field-type-image img 
    { 
    max-width: 100%; /* keeps perspective for media queries */ 
    } 
}

来源

2014-02-13 14:35:54 dward

响应式设计的CSS问题

回答

相关问题