Question

我完全是响应式设计的新手。我的媒体查询不起作用。当我调整窗口大小时，我猜不会重新确定断点。我制作了两个div，其中一个用于桌面视图，另一个用于平板电脑视图。我使用display：none属性来创建桌面和移动版本。

另一个问题是，有没有办法为所有移动设备配置媒体查询？或者我应该为每个方便的团体inviduel写css？（比如iphone5，iphone6，nexus等......）

.tablet-view{
    display: none;
}

.desktop-view{
    display: inline;
}
/* ----------- iPad mini ----------- */

/* Portrait and Landscape */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (-webkit-min-device-pixel-ratio: 1) {
    .desktop-view{
        display:none;
    }.tablet-view {

         display: inline;
     }
}

/* Portrait */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 1) {
    .desktop-view{
        display:none;
    }.tablet-view {

         display: inline;
     }
}

/* Landscape */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 1) {
    .desktop-view{
        display:none;
    }.tablet-view {

         display: inline;
     }
}

/* ----------- iPad 1 and 2 ----------- */
/* Portrait and Landscape */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (-webkit-min-device-pixel-ratio: 1) {
    .desktop-view{
        display:none;
    }.tablet-view {

         display: inline;
     }
}

/* Portrait */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 1) {
    .desktop-view{
        display:none;
    }.tablet-view {

         display: inline;
     }
}

/* Landscape */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 1) {
    .desktop-view{
        display:none;
    }.tablet-view {

         display: inline;
     }
}

/* ----------- iPad 3 and 4 ----------- */
/* Portrait and Landscape */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (-webkit-min-device-pixel-ratio: 2) {
    .desktop-view{
        display:none;
    }.tablet-view {

         display: inline;
     }
}

/* Portrait */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 2) {
    .desktop-view{
        display:none;
    }.tablet-view {

         display: inline;
     }
}

/* Landscape */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 2) {
    .desktop-view{
display:none;
    }.tablet-view {

         display: inline;
     }

}

Answer 1

您正在使用device-width。当您调整浏览器窗口的大小时，您不会更改设备的宽度，因此媒体查询不适用。尝试使用DevTools中的不同设备或Chrome 设备模式。

Answer 2

仅在没有＆＃39;设备＆＃39;的情况下尝试使用private String getMapsApiDirectionsUrl() { String origin = "origin=" + mCurrentLocation.getLatitude() + "," + mCurrentLocation.getLongitude(); String destination = "destination=" + mDestLocation.latitude + "," + mDestLocation.longitude; /*String origin = mCurrentLocation.getLatitude() + "," + mCurrentLocation.getLongitude(); String destination =mDestLocation.latitude + "," + mDestLocation.longitude;*/ String waypoints = "waypoints=optimize:true|" + mCurrentLocation.getLatitude() + "," + mCurrentLocation.getLongitude() + "|" + "|" + mDestLocation.latitude + "," + mDestLocation.longitude; String sensor = "sensor=false"; String params = origin + "&" + destination + "&" + waypoints + "&" + sensor; String output = "json"; String url = "https://maps.googleapis.com/maps/api/directions/" + output + "?" + params; return url; }和max-width。

媒体查询不起作用？

2 个答案: