CSS技术网页设计

HTML布局的类型

设计HTML页面最重要的方面之一是网站的宽度和高度,以及元素如何与布局相适应。多年来,网页设计师一直在寻找解决一种或另一种选择或混合它们的好处和缺点之间的平衡。简而言之,布局有几种类型,所以让我们在下面几行深入了解,但首先让我们看看什么是视口。视口表示一个矩形,它定义了渲染区域的大小(换句话说,就是专门用于显示网页内容的网页浏览器的表面的大小)。

html-viewport

1.相对布局-它的大小根据视口或访问者的屏幕分辨率自行调整。这种布局依赖于百分比值。

2.绝对(固定)布局-是基于页面的绝对尺寸(以英寸、厘米或毫米为单位)。由于不同的屏幕尺寸和视口,这种布局在过去几年慢慢被抛弃,现在几乎全部用于印刷报纸。

3.按比例缩小的布局-是CSS3引入的一种技术,假设视口根据其大小和方向进行操作。缩放布局只用于移动版本的网页,那些为移动设备(平板电脑,智能手机等)制作的,具有纵向和横向屏幕方向。这种类型的布局不是基于测量单位,而是基于移动设备强加的特定特性。

4.弹性布局-实际上代表了最常用的网页设计方法。这样的布局可以适应内容的大小,缩放图像和文本,以获得最佳的在线体验。尽管它是一个非常灵活的结构,但viewport的这种问题可能会出现,导致小屏幕上不希望看到的水平滚动。

5.流体(或液体)布局-使用百分比作为测量单位;它们与绝对布局相反,填充了视口上的所有可用空间。它们非常受欢迎,被包括谷歌在内的主要网站使用。

6.将布局-表示一个基于CSS3“calc”函数的新规范,这个函数还没有完全实现。这种类型依赖于由calc函数(即。钙(10% -100 px)).

7.混合布局-表示前面定义的类型的混合;它们被广泛使用是因为能够使网页在视口和屏幕分辨率方面更加灵活。

基达尔D. (5616个帖子

基达尔·d是LeraBlog的作者。作者的观点完全是他们自己的,可能不反映LeraBlog员工的观点和意见。

留下你的评论