Question

我有一个简单的css flexbox布局。当min-width为750px时，我编写了两个媒体查询，用于将最低的包装器布局设置为列。它在桌面浏览器上完美运行，但是当我在chrome-developer-tools设备部分或物理设备上显示我的布局时，最低层包装器的行为并不像我期望的那样。

样式文件：

桌面：

@media (min-width:750px) {
html{
    font-family: 'Raleway', sans-serif;
    background-color: #E74C3C;
}

body{
    color: #ecf0f1;
    margin:0;
}
.alican_img{
    width: 300px;
    height: 300px;
    background-size: 100%;
    border-radius: 150px;
    border-radius: 150px;
    background: url(../img/alican_resim.png) no-repeat;
    box-shadow: 0 0 8px rgba(0, 0, 0, .8);
    box-shadow: 0 0 8px rgba(0, 0, 0, .8);
    shadow: 0 0 8px rgba(0, 0, 0, .8);
    margin: 5px 0;
}

.bodydiv{
    display: flex;
    flex-flow: column;
}

.alican_img{
    align-self: center;
}

.img_alt_yazi{
    font-size: 100px;
    background-color:#b83c30 ;
    text-align: center;
}

.img_alt_banners{
    background-color: #A1362A;
    font-size:20px;
    text-align: center;
    margin: 3px 0;
    padding: 20px 50px;
}

.social{
    width: 100%;
    background-color: #8a2d24;
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
}


.social img{
    width: 110px;
    height: 110px;
    padding: 15px 50px;
}
.powered    {
    display: none;
}

}

移动：

@media (max-width: 750px) {


html{
    font-family: 'Raleway', sans-serif;
    background-color: #E74C3C;
}

body{
    color: #ecf0f1;
    margin:0;

}
.alican_img {
    width: 300px;
    height: 300px;
    background-size: 100%;
    border-radius: 150px;
    border-radius: 150px;
    background: url(../img/alican_resim.png) no-repeat;
    box-shadow: 0 0 8px rgba(0, 0, 0, .8);
    box-shadow: 0 0 8px rgba(0, 0, 0, .8);
    shadow: 0 0 8px rgba(0, 0, 0, .8);
    margin: 5px 0;
}

.bodydiv{
    display: flex;
    flex-flow: column;
}

.alican_img{
   align-self: center;
}

.img_alt_yazi{
    font-size: 100px;
    background-color:#b83c30 ;
    text-align: center;
}

.img_alt_banners{
    background-color: #A1362A;
    font-size:20px;
    text-align: center;
    margin: 3px 0;
    padding: 20px 50px;
}

.social{
    background-color: #8a2d24;
    display: -webkit-flex;

    -webkit-flex-flow: column;
    -webkit-align-items: center;
}
.social img{
    width: 110px;
    height: 110px;
    padding: 10px 0;
}
.powered    {
    display: none;
}

}

这张照片是预期的行为。社交资料的包装就像列一样。

在这里，它在750px的宽度上表现得像预期的那样：

但是当我在移动浏览器中打开我的布局时，它的表现就像是不期望的。

我希望社交事物的布局必须是第一张照片。

谢谢大家

jsfiddle但无法设置样式：http://jsfiddle.net/8684uoko/4/

Answer 1

这是一个专门针对iPhone 6的媒体查询。这可能会让您的问题消失。

@media only screen 
    and (min-device-width : 375px) // or 213.4375em or 3in or 9cm
    and (max-device-width : 667px) // or 41.6875em
    and (width : 667px) // or 41.6875em
    and (height : 375px) // or 23.4375em
    and (orientation : landscape) 
    and (color : 8)
    and (device-aspect-ratio : 375/667)
    and (aspect-ratio : 667/375)
    and (device-pixel-ratio : 2)
    and (-webkit-min-device-pixel-ratio : 2)
{ }

为什么我的flexbox布局在移动浏览器上无法正常工作？

1 个答案: