html - 我应该编码什么分辨率？

Question

我需要一个我应该编码的桌面和移动分辨率列表。

我正在制作一个页面，no-scroll所以overflow: hidden;我需要为每个desktop resolution和调整页面mobile resolution，所以如果可能的话，我只需要一个列表。

Answer 1

您可以参考CSS Tricks for 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. 常见的@media 查询
2. 常见设备断点的媒体查询
3. 响应式网页设计：布局和媒体查询
4. 常见的 CSS 媒体查询断点

Answer 2

通过@media query 使用响应式 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;}
}