固定的
此类网站布局在不同设备上的外观如下:
固定布局
此选项的主要特点是绝对所有互联网资源的块和页面都具有严格固定的高度和宽度,并且不依赖于屏幕尺寸。
优点:
在所有屏幕上均相同且正确地显示网络 越南号码数据 资源,无论其尺寸如何;
实施起来简单(因此成本更优惠)。
表壳:VT-metall
了解我们如何为莫斯科一家金属加工公司 将招聘成本降低 13 倍
了解如何
缺点:
缩放电子页面会导致其扩大并超出屏幕的宽度和高度;
在宽屏上显示时,侧面有空白(特别是页面较窄时 - 不超过 900 像素);
在小屏幕上,网站会被缩放,即,它是网站的缩小版。因此,要阅读信息,您需要放大页面。而且由于如今大量用户通过移动设备访问互联网,这种解决方案并不是最好的。
通常,使用固定网站布局来创建登录页面。
可拉伸(橡胶)
此类布局在不同屏幕上的显示方式如下:
橡胶布局
“流动”网页的特点是,开发人员以百分比(而不是像素)设置网页上所有视觉元素的大小。因此,在对角线不同的屏幕上,同一个块会有不同的大小,甚至显示略有不同。
优点:
自动调整至页面大小;
在任何显示器上看起来都很棒。
缺点:
在移动设备上查看时,页面的某些视觉元素被压缩得非常严重,以至于很难使用。通常这发生在反馈表和菜单中;
由于屏幕宽度上的块的压缩和拉伸,某些元素在智能手机和平板电脑上可能看起来不太好看;
更难实施(因此也更昂贵)。
流体布局最适合用于开发将所有视觉元素放在一列中的页面,或与固定布局结合使用的页面。
自适应
目前,这是最常见的布局类型。有了它,您可以创建最“实时”的互联网资源,重建其视觉元素并根据所使用的设备类型改变其大小。
显示此类网站布局的示例:
自适应布局
自适应解决方案的基础是橡胶布局与媒体查询或特殊脚本的结合,使您能够确定显示器的尺寸,并根据它们为视觉元素(颜色、图像和字体大小、块位置、元素宽度)分配适当的样式。
优点:
通过在缩放网页时重组视觉元素,其显示效果不会变差;
无需放大,方便在移动设备上查看;
由于自动调整屏幕尺寸,页面可以在任何类型的设备上完美显示。