垂直移动页面和高分辨率

Question

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

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

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

您如何建议管理它？

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

}