OETY欧亿□□在响应式□□网站刚推□□□出时就开□□□始研究，为客户制□□□作，目前设计□□□和制作水□□□□平以及非□□常成熟，下面谈谈□□□在响应式□□□网站设计□□□过程中遇◤到的长宽□□比问题。

屏幕、图像和框□□架都具有□□□可识别的·形状，高宽比是□□用来描述◇这些形状□□□□的固定比·例的术语。简单地说，一个图像□□的高宽比□□□是它的宽▽度和高度□□之间的关□□□系。高宽比通□□□□常表示为☆两个数字，由冒号分□□□隔，如X:Y或4:3。

什么是高宽比?

首先，让我们介□□□绍一下基□□□□本知识：宽高比是□□指图像的◎宽度与高□□□□度的比较，不需要附◢加任何像□□素或单位。虽然图像□□□的高宽比□□□将帮助理□□□解其形状，但它并不□□决定图像□□□□的实际大□□小。对于X:Y长宽比，X是图像的□□宽度，Y是图像的★高度。
长宽比以♦宽高公式□□的形式写□□□出来，例如3:2。重要的是□□□要记住，虽然两个□□□□图像可以▽有相同的□□□长宽比，但它们可□□□□以有不同□□□的图像大●小。

因此，举例来说，1:1的正方形□□□□比例意味丨着图像的□□□□宽度和高□□□度是相同□□的。无论图像□□□□的尺寸是320 X 320像素还是1080 X 1080像素，长宽比仍□□□□然是1:1。另一个例□□□子，一个图像□□可以是1920 X 1080像素或1280 X 720像素，但两者都□□□有一个16:9的宽屏幕□□□□宽比。
这里是最常见的高宽比:
图像与1:1的长宽比□□□□有相同的□□□宽度和高□□□度，并且是正□□□方形。这种高宽△比通常用□□在智能手□□□□表上，你可能会□□注意到社□□□交媒体网□□□□站，如微博照□□□片上的高□□□□宽比是1:1。
3:2的高宽比◣是由35毫米电影▽普及的，它仍然在□□□今天的相◈机摄影流□□行。3:2的比例也◎在一些早□□□□期型号的iphone上使用。
4:3的比例会□□□□形成一个□□□长方形，这在一些□□□电脑显示□□器和电视□□□□显示器上★很常见。旧电视机□□通常是按□□□这个尺寸□□□制作的。
一个更长的矩形形状，你会发现16:9的高宽比在演示幻灯片，宽屏电视，电脑显示器。这是视频的标准宽屏比例。大多数智能手机和单反相机拍摄视频的分辨率都是1920 x 1080像素，也就是16:9的高宽比。

长宽比在设计中的应用

如前所述，长宽比在□□□□电影中最□□□□常用。然而，设计师可□□能偶尔会□□遇到这个□□□词。
虽然响应□□□式设计可❖以考虑组□□□件如何在□□□□不同大小▲的屏幕上•显示，但在某些□□情况下，响应式设◣计可能会□□□□切断静态□□图像(特别是那□□□□些带有文□□□本的图像)。因此，重要的是◈要注意具□□有特定长□□宽比的图◉像将如何★在不同屏□□□□幕尺寸上□□□□裁剪和显△示，并询问协▲作者响应□□□式设计将□□□如何影响·预期的使▼用。

许多常见□□设备具有□□相似的长□□□□宽比，即使它们□□□具有不同□□的尺寸。例如，苹果手表□□的屏幕宽□□高比为5:4，而ipad的屏幕宽△比为4:3,MacBook Pros根据不同▽版本的不★同，屏幕宽比◎为16:9和16:10。
综上所述，设计师在□□设计响应☆式网站的□□时候，需要使用✦特定的计□□□算器，结合像素✦来计算呈□□现的图像※的长宽比，只有这样，才能让响◢应式网站□□□获得更好□□□的展现。