Question

我的网站（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

非常感谢!!

Answer 1

使用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中，在每个{}内，您可以根据设备宽度的尺寸更改元素。根据您所定位的设备，种类繁多，但这是广谱的。

浮动元素：不同屏幕上的不同最大宽度

1 个答案: