Question

我不确定我是否能够清楚地解释它，如果可能的话。我只对HTML / CSS有基本的掌握。我正在寻找一种方法，当从较小的屏幕（移动设备）查看时，浮动元素不浮动。我有一个浮动在段落左侧的图像，但是从移动设备上看时，带有文本并排的图像太拥挤了。有没有办法使它正常浮动在左侧，但在较小的屏幕中查看时会出现在文本的顶部？谢谢！

Answer 1

您需要的是定义媒体查询。媒体查询就像css触发器，它定义了将应用某些规则的分辨率。

.div img {
    float: left;
}

/*This will cause the img receive float none rule when screen is smaller than 768px*/
@media only screen and (max-width: 768px) {
    .div img {
        float: none;
    }
}

有一个完整的指南，您可以查看右here。

Answer 2

使用media queries应该是您所需要的。

例如。

@media only screen and (max-width: 768px) {
    .content {
        float: none;
    }
}

基本上说，如果屏幕尺寸小于768px，则课程内容不会有任何浮动。

Answer 3

您正在寻找的是MediaQueries： http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

您将需要以下内容：

@media screen and (max-width: 400px){
     yourelementselector {
       ... your CSS... 
     }
}

有没有办法在不同的屏幕尺寸上更改浮动？

3 个答案: