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

有了这个代码，我解决了这个问题：

/* ----------- iPhone 4 and 4S ----------- */ 
/* Portrait */ 
@media only screen and (max-device-height: 480px) 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 !important; 
    } 
} 
/* Landscape */ 
@media only screen and (max-device-height: 480px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) { 
    .modalContent{ 
     margin:0px; 
     min-width: 480px !important; 
    } 
    .pre-scrollable{ 
     max-height:190px; 
    } 
} 

/* ----------- iPhone 5 and 5S ----------- */ 
/* Portrait */ 
@media only screen and (max-device-height: 568px) 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 (max-device-height: 568px) 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 (max-device-height: 667px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) { 
    .modalContent{ 
     margin:0px; 
     min-width: 375px; 
    } 
    .pre-scrollable{ 
     max-height:537px; 
    } 
} 
/* Landscape */ 
@media only screen and (max-device-height: 667px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) { 
    .modalContent{ 
     margin:0px; 
     min-width: 667px; 
    } 
    .pre-scrollable{ 
     max-height:245px; 
    } 
} 

/* ----------- iPhone 6+ ----------- */ 
/* Portrait */ 
@media only screen and (max-device-height: 736px) 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:616px; 
    } 
} 
/* Landscape */ 
@media only screen and (max-device-height: 736px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: landscape) { 
    .modalContent{ 
     margin:0px; 
     min-width: 736px; 
    } 
    .pre-scrollable{ 
     max-height:284px; 
    } 
} 

Answer 2

你可以在第一个有这个另外一个简单的方法.... 你必须找到高度和宽度的设备使用该高度和动态每次。如果你使用这个，那么你不需要为不同大小的设备定义css。你只需要为所有人定义一个CSS。试试这种方式。希望这将帮助你....感谢