html - CSS:如何根据不同的尺寸设置屏幕布局

Question

我设置了我的 css，以便对于每个 Apple 设备，模态的大小都会更改其最大大小，但不幸的是，使用 Google 控制台我发现这并不适用于所有设备，这是代码:

/* iPhone 4 and 4S */
/* Portrait */
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {
    .modalContent{
        margin:0px;
        min-width: 320px;
    }
    .pre-scrollable{
        max-height:350px;
    }
}
/* Landscape */
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {
    .modalContent{
        margin:0px;
        min-width: 480px;
    }
    .pre-scrollable{
        max-height:190px;
    }
}

/* iPhone 5 and 5S */
/* Portrait */
@media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {
    .modalContent{
        margin:0px;
        min-width: 320px;
    }
    .pre-scrollable{
        max-height:438px;
    }
}
/* Landscape */
@media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {
    .modalContent{
        margin:0px;
        min-width: 568px;
    }
    .pre-scrollable{
        max-height:190px;
    }
}

/* iPhone 6 */
/* Portrait */
@media only screen and (min-device-width: 375px) and (max-device-width: 627px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) { 
    .modalContent{
        margin:0px;
        min-width: 375px;
    }
    .pre-scrollable{
        max-height:497px;
    }
}
/* Landscape */
@media only screen and (min-device-width: 375px) and (max-device-width: 627px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) { 
    h1{
      font-size: 30pt;
    }
    h2{
      font-size: 15pt;
    }
    .modalContent{
        margin:0px;
        min-width: 627px;
    }
    .pre-scrollable{
        max-height:245px;
    }
}

/* iPhone 6+ */
/* Portrait */
@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: portrait) { 
    .modalContent{
        margin:0px;
        min-width: 414px;
    }
    .pre-scrollable{
        max-height:606px;
    }
}
/* Landscape */
@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: landscape) { 
    h1{
      font-size: 30pt;
    }
    h2{
      font-size: 15pt;
    }
    .modalContent{
        margin:0px;
        min-width: 736px;
    }
    .pre-scrollable{
        max-height:284px;
    }
}

在我的 .html 中，我将其命名为:

<link rel="stylesheet" href="css/file_name.css" type="text/css">

Answer 1

你可以有另一种简单的方法...... 首先，您必须找到设备的高度和宽度，每次都使用该高度并动态使用。如果你使用它，那么你不需要为不同尺寸的设备定义 css。你只需要为所有人定义一个CSS。尝试这种方式。希望这对您有所帮助....谢谢