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

Question

我是一个网页设计新手，如果我were放大或使用不同分辨率的屏幕，我还没有找到一种方法来处理我的页面如何变形。有什么技巧可以解决这个问题？

这是我正在使用的页面示例，因此你们也可以提供一些有针对性的建议。

该页面在设计时看起来像这样。

Answer 1

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

研究使用CSS3 媒体查询：

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

例子：

@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)">