我的网站(http://kawaiiface.net)的主要功能是严格的浮动和最大宽度功能。我的侧边栏插槽是float: left;float: right;,内容按钮是margins: auto;。在桌面屏幕尺寸上,所有内容都将彼此相对定位,但是在移动设备上,侧边栏显示在内容上方。

在期待算法更新的过程中,我继续前进,并向所有内容添加了响应容器:我的侧边栏运行max-width: 160px;,其中width: 100%;为1.将它们放在应有的位置,并2.允许它们响应较小的屏幕。但是,这引起了一个问题-最大宽度允许我的容器很好地适合并在台式机上提供适当的UE,但它们会阻止插槽扩展到足以填满移动设备的整个屏幕!

当我的左浮动元素位于其自己的块中(又位于小屏幕上的所有其他元素之上)时,如何删除max-width参数? Here is an image to help

非常感谢!!

最佳答案

使用Media查询的示例

有用的网站:https://css-tricks.com/css-media-queries/

例:

/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles for smartphones here */
}

/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles for smartphones here */
}

/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles for smartphones here */
}

/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {

/* Styles for ipad here */
}

/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {

/* Styles for ipad landscape here */
}

/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles for upad here */
}

/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
      /* desktops and laptops style goes here */
}

/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
/* Styles for large screen here *?
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {}


将此元素添加到顶部的CSS中,在每个{}内,您可以根据设备宽度的尺寸更改元素。根据您要定位的设备,种类繁多,但这是广泛的范围。

09-10 11:06
查看更多