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。試試這種方式。希望這將幫助你....感謝