垂直移动页面和高分辨率

Question

我使用 Bootstrap 创建响应式页面，并使用 CSS'es：

@media (max-width:991px;) {} etc.

我在手机上以垂直位置打开页面，这是我没想到的 它的分辨率大于 768 像素，因此我对较低移动分辨率的格式不适用，而且它不可读，另一方面，如果我更改它，它将在平板电脑等其他设备上变得很大。

您建议如何管理？

Answer 1

您可以在媒体查询中使用更多断点来更好地管理不同设备上的显示：

/* Mobile First Method */

    // add stuff here for mobile

@media only screen and (min-width: 768px) {

    // add stuff here for tablet

}

@media only screen and (min-width: 1366px) {

    // add stuff here for desktop

}

// you can modify the device pixel ratio according to your needs
@media only screen and (-webkit-min-device-pixel-ratio: 2),
       only screen and ( min--moz-device-pixel-ratio: 2),
       only screen and ( -o-min-device-pixel-ratio: 2/1),
       only screen and ( min-device-pixel-ratio: 2),
       only screen and ( min-resolution: 192dpi),
       only screen and ( min-resolution: 2dppx) {

    // add stuff here for retina devices

    /* you can use the breakpoints used above:
     * @media only screen and (min-width: 768px) {
     * 
     *  // add stuff here for retina tablet
     * 
     * }
     * 
     * @media only screen and (min-width: 1366px) {
     * 
     *  // add stuff here for retina desktop
     * 
     * }
     */

}

@media print {

    // add stuff here for print

}