【发布时间】：2013-11-11 17:30:54
【问题描述】：
对于所有类型的屏幕分辨率和设备（台式机或移动设备），您很难为您的网站选择合适的宽度。就我而言，该网站要展示摄影师的作品，因此我选择了以下宽度：
- 1340像素
- 1180像素
- 1000像素
- 480像素
但是假设 iphone 4S（原生分辨率为 960 x 640）垂直放置，设备会显示什么包装？它会将 1000px 包装器的大小调整为 640px 还是选择 480px？
【问题讨论】：
-
不要根据设备选择包装器尺寸。当您缩小屏幕时，根据实际设计中断的时间来设置断点。
-
你了解媒体查询吗？
-
@Danko：不，你是什么意思？
-
通过媒体查询，您可以使用设备的宽度。并为每个尺寸制定最小和最大条件。示例：960 宽度可以使用 1000 像素到 800 像素之间的条件。
-
你只需要知道你想要工作的最大屏幕的宽度。从那时起，正如 Danko 所说，您可以使用媒体查询来调整 HTML 以适应屏幕需求。例如，iPhone 4-5 纵向，宽度为 320px，所以你可以说 @media ( max-width: 320 ) {
} 。这个 if 中定义的 css 样式仅在屏幕是 iPhone 时适用（或者像 iPhone，我想其他手机或多或少具有相同的宽度）。
标签： iphone css responsive-design screen-resolution