如何处理不同分辨率的屏幕设计，和/或我的网页在放大时变形？

Question

我是一名网页设计新手，如果我were放大或使用不同的分辨率屏幕，我还没有办法处理我的网页变形情况。处理这个有哪些提示？

我正在与之合作的页面的Here's an example，所以你们也可以提供一些有针对性的建议。

该网页在设计时看起来像this。

Answer 1

  

如何处理不同分辨率屏幕的设计？

使用 CSS3 Media queries ：

  

“媒体查询由媒体类型和零个或多个表达式组成   检查特定媒体功能的条件。之间   可以在媒体查询中使用的媒体功能是“宽度”，   '身高'和'颜色'。通过使用媒体查询，演示文稿可以   针对特定范围的输出设备量身定制，无需更改   内容本身。“

示例：

@media screen and (min-device-width: 768px) and (max-device-width: 1024px){
  /* Media query targetting tablets */
}

@media only screen and (min-device-width: 560px) and (max-device-width: 1136px) and (-webkit-min-device-pixel-ratio: 2) {
  /* This media query will target the iPhone 5 only */
}

当然最好单独放置查询而不是内联，因此您可以将其导入外部，如下所示：

<link href="aMediaQuery.css" rel="stylesheet" media="only screen and (max-width:500px)">