我的网站(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中,在每个
{}
内,您可以根据设备宽度的尺寸更改元素。根据您要定位的设备,种类繁多,但这是广泛的范围。