有没有办法改变不同屏幕尺寸的浮动？

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，那么 class 内容将不会有任何浮动。

Answer 3

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

你需要这样的东西：

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

有没有办法改变不同屏幕尺寸的浮动？

Is there a way to change float on different screen size?

html

css

css-float