简析香港响应式网页设计中的纵横比问题
香港的网页设计在刚建立响应式网站时就开始研究,为顾客制作,与目前的设计和制作水平非常成熟,下面就谈谈响应式网页设计过程中遇到的纵横比问题。
屏幕、图像、帧都具有可识别的形状,纵横比是表示表示这些形状的固定比率的术语。简而言之,图像的纵横比是其宽度和高度的关系。纵横比通常用两个数字表示,如X:Y或4:3,用冒号分隔。
什么是纵横比
首先,我来介绍一下基本知识。纵横比是指图像的宽度和高度的比较,不需要附加像素和单位。图像的纵横比有助于理解形状,但并不决定图像的实际大小。对于X:Y纵横比,X是图像的宽度,Y是图像的高度。纵横比以纵横式的形式书写,例如3:2。重要的是记住,两个图像可以是相同的纵横比,也可以是不同的图像尺寸。
因此,例如,1:1的正方形比率意味着图像的宽度和高度相同。图像大小为320× 即使是320像素1080× 即使是1080像素,纵横比也保持1:1。在另一个例子中,图像是1920× 1080像素或1280× 720像素,但两者都具有16:9的宽屏幕纵横比。
这是一般的宽高比
图像是与1:1的纵横比相同的宽度和高度,是正方形。这个纵横比一般在智能手表中使用,但是微博的照片的纵横比是1:1。
3:2的长宽比是35毫米的电影普及的,今天照相机摄影也很受欢迎。3:2在iphone的早期模型中也被使用
4:3的比例形成矩形。这在一些电脑显示器和电视显示器上很常见。旧电视机通常是按这个尺寸制作的。
它是一个更长的长方形形状。可以看到幻灯片放映的宽高比16:9。这是视频的标准宽屏,大多数智能手机和单反相机都是1920× 1080像素,即16:9的纵横比拍摄视频。
纵横比在设计中的应用
如前所述,纵横比在电影中经常被使用。但香港的网页设计师可能偶尔会遇到这句话。
响应设计可考虑组件如何显示在不同尺寸的屏幕上,但在某些情况下,香港的响应设计可切断静态图像(特别是包含文本的图像)因此,注意具有特定纵横比的图像如何以不同的屏幕尺寸被剪切和显示是重要的,并且可以询问合作者响应设计如何影响预期的使用。
许多常见的装置具有相似的纵横比,即使尺寸不同。例如,苹果手表的画面纵横比为5:4,ipad为4:3,MacBook Pros根据版本不同为16:9和16:10。
综上所述,香港的网页设计师需要使用特定的计算器来计算与像素组合显示的图像的纵横比,这样才能使响应站点得到更好的显示。