我的网站 ( http://kawaiiface.net ) 的主要功能对 float 和最大宽度的运行情况非常严格。我的侧边栏插槽是 float: left;
和 float: right;
,我的内容按钮是 margins: auto;
。在桌面屏幕尺寸上,所有内容都会根据彼此的关系进行响应定位——但在移动上,侧边栏显示在内容的上方。
考虑到算法更新,我已经开始为所有内容添加响应式容器:我的侧边栏运行 max-width: 160px;
和 width: 100%;
到 1. 将它们保持在应有的位置和 2. 允许它们在较小的屏幕上响应。不过,这导致了一个问题——最大宽度允许我的容器很好地适应并在桌面上提供适当的 UE,它们会阻止插槽扩展到足以填满移动设备上的整个屏幕!
当我的左浮动元素位于它自己的 block 中时(也就是在较小的屏幕上高于其他所有内容),我如何删除我的最大宽度参数? Here is an image to help .
非常感谢!!
最佳答案
使用媒体
查询的例子
有用的网站: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 顶部,在每个 {}
内,您可以根据设备宽度的尺寸更改元素。根据您的目标设备,种类繁多,但范围很广。
关于css - float 元素 : Different Max-Widths on Different Screens,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29332317/