我應該編碼什麼決議？

Question

我需要一個我應該編碼的桌面和移動解決方案的列表。

我想提出一個頁面no-scroll和overflow: hidden;所以我需要調整每個desktop resolution和mobile resolution的頁面，所以如果可能的話，請我只是需要一個列表。

Answer 1

您可以參考CSS Tricks爲Media Queries for Standard Devices。這包括縱向和橫向佈局。

/* Smartphones (portrait and landscape) ----------- */ 
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) { 
/* Styles */ 
} 

/* Smartphones (landscape) ----------- */ 
@media only screen 
and (min-width : 321px) { 
/* Styles */ 
} 

/* Smartphones (portrait) ----------- */ 
@media only screen 
and (max-width : 320px) { 
/* Styles */ 
} 

/* iPads (portrait and landscape) ----------- */ 
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) { 
/* Styles */ 
} 

/* iPads (landscape) ----------- */ 
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) { 
/* Styles */ 
} 

/* iPads (portrait) ----------- */ 
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) { 
/* Styles */ 
} 

/* Desktops and laptops ----------- */ 
@media only screen 
and (min-width : 1224px) { 
/* Styles */ 
} 

/* Large screens ----------- */ 
@media only screen 
and (min-width : 1824px) { 
/* Styles */ 
} 

/* iPhone 4 ----------- */ 
@media 
only screen and (-webkit-min-device-pixel-ratio : 1.5), 
only screen and (min-device-pixel-ratio : 1.5) { 
/* Styles */ 
} 

也有對同一利用許多線上片段：

1. Common @media queries
2. Media queries for common device breakpoints
3. Responsive Web Design: Layouts and Media Queries
4. Common CSS Media Queries Break Points

Answer 2

使用由@media查詢響應CSS ..這樣

@media only screen and (max-width: 320px) { 
    .container {width: 100%;} 
    .dropdown {height:35px;} 
    .dropdown p {line-height:35px;} 
    .header {height:40px; background:url(images/logoplastik.png) no-repeat 10px 90% left center ; } 
} 

@media only screen and (min-width: 321px) and (max-width: 480px) { 
    .container {width: 100%; } 
    .dropdown {height:35px;} 
    .dropdown p {line-height:35px;} 
    .header {height:40px; padding-left:10px;} 
}