带有图片的自定义网格 - 响应式问题

Question

我在joomla中创建了一个自定义模块，在我目前正在工作的网站的主页上显示一个图库：http://www.francescaleso.com/it/

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

对于横向模式下的ipads和手机，它会弄乱一切。

以下是代码，您也可以使用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);
}

正如你所看到的，在这样的“中级”移动视图中，整个结构搞砸了：我希望手机有2列项目（我已经实现了），其他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并使用网格布局就可以轻松实现干净和标准的布局。