css - 带有图像的自定义网格 - 响应问题

Question

我在 joomla 中创建了一个自定义模块，以在我当前工作的网站的主页中显示一个画廊:http://www.francescaleso.com/it/

问题是我的媒体查询仅适用于纵向模式下的桌面或小型移动设备。

对于横屏模式下的 ipad 和手机，它会搞砸一切。

这是代码，您也可以使用 F12 工具检查它:

/* the container of the whole gallery, for desktop */
.home-container {
    padding-top: 5%;
    margin-bottom: -2%;
}

@media screen and (max-device-width: 990px) {
    .home-container {
        display: none;
}
}

/* the container of the whole gallery, for mobile devices */
.home-container-mobile {
    padding-top: 0%;
    margin-bottom: -2%;
    margin-top: -10%;
}

@media screen and (min-device-width: 990px) {
    .home-container-mobile {
        display: none;
}
}

/* the container of a single row of items in the gallery */

.grid-container {
    display: table;
    margin: 0 auto;
}

@media screen and (max-device-width: 990px) {
    .grid-container {
    width: 100%;
}
}

/* the gallery single item */

.grid {
    float: left;
    position: relative;
    border-radius: 50%;
    margin: 10px;
}

@media screen and (max-device-width: 990px) {
    .grid {
    width: 43%;
    float: left !important;
    position: relative;
    border-radius: 50%;
    margin: 10px;
}
}

/* the gallery single item image */

.grid img {
    border-radius: 50%;
    transition: .4s -webkit-filter linear;
}

.grid:hover img {
  filter: url(filters.svg#grayscale);
     /* Firefox 3.5+ */
  filter: gray;
  /* IE6-9 */
  -webkit-filter: grayscale(1);
}


/* the gallery single item description */

.desc {
    /* display: block; */
    /* position: absolute; */
    left: 26%;
    width: 87%;
    height: 100%;
    top: 0%;
    left: 0%;
    border-radius: 50%;
}

.desc span {
width: 100%;
    height: 100%;
    text-align: center;
    margin-top: 37%;
    position: absolute;
    left: 0;
    bottom: 0%;
    font-size: 16px;
    opacity: 0;
    -webkit-transition: opacity .8s ease 50ms;
    transition: opacity .8s ease 50ms;
    -webkit-transition: background-color ease-in-out 200ms;
    transition: background-color .3s ease-in-out 200ms;
    color: #fff !important;
    border-radius: 50%;
}

@media screen and (max-device-width: 767px) {
    .desc span {
        opacity: 1;
        /* background: rgba(178,189,167,0.7) */
        /* first gradient darker - background: radial-gradient(rgba(72,67,67,0.644444) 20%, rgba(72,67,67,0.37) 77%) !important; */
        background: radial-gradient(rgba(72,67,67,0.444444) 20%, rgba(72,67,67,0.37) 34%) !important
}
}

@media only screen and
(min-device-width: 767px)
(max-device-width: 1025px){
    .desc span {
        width: 68% !important;
        opacity: 1;
        /* background: rgba(178,189,167,0.7) */
        /* first gradient darker - background: radial-gradient(rgba(72,67,67,0.644444) 20%, rgba(72,67,67,0.37) 77%) !important; */
        background: radial-gradient(rgba(72,67,67,0.444444) 20%, rgba(72,67,67,0.37) 34%) !important;
}
}

.grid:hover .desc span {
  opacity: 1;
    /* background: rgba(168,202,217,0.6); */
    /* background: rgba(186, 212, 106, 0.6); */
    /* background: rgba(201, 220, 135, 0.6); */
    /* background: rgba(197, 225, 165, 0.6); */
    /* background: rgba(230, 238, 156, 0.6); */
    background: rgba( 178, 189, 167, 0.7);
}

如您所见，在这种“中级”移动 View 中，整个结构都搞砸了:我想为手机设置 2 列元素(我已经实现)，为其他 View 设置 4 列，例如桌面版。

我怎样才能做到这一点？

有没有其他方法可以在不设置定义的宽度和高度的情况下使描述 div 覆盖整个图像区域？这似乎是不能正常工作的东西......

感谢您的关注，这真是一个很棒的社区!

Answer 1

有两种方法可以达到你想要的效果

首先:为所有标准屏幕尺寸定义媒体查询，例如

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

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

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

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

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

/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
/* Styles */
}
/**********
iPad 3
**********/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}
/* Desktops and laptops ----------- */
@media only screen  and (min-width : 1224px) {
/* Styles */
}

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

/* iPhone 4 ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

/* iPhone 5 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* iPhone 6 ----------- */
@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* iPhone 6+ ----------- */
@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* Samsung Galaxy S3 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* Samsung Galaxy S4 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

/* Samsung Galaxy S5 ----------- */
@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

或者您可以使用任何 css 移动优先框架，例如 Bootstrap、Foundation 3、Foundation 等只需添加CSS并使用网格布局即可轻松实现干净标准的布局。