响应式网页设计视口


目录

    显示目录


什么是视口?

视口是网页的用户可见区域。

视口因设备而异,并且在手机上会比在计算机屏幕上小。

在平板电脑和手机出现之前,网页仅针对计算机屏幕而设计,并且常见于 网页具有静态设计和固定尺寸。

然后,当我们开始使用平板电脑和手机上网时,固定 size 网页太大,无法适应视口。 为了解决这个问题,这些设备上的浏览器缩小了整个网页以适应屏幕。

这并不完美!但要快速解决。


设置视口

HTML5 引入了一种让网页设计者通过以下方式控制视口的方法: 标签。

您应该在所有网页中包含以下 视口元素:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

这为浏览器提供了如何操作的说明 控制页面的尺寸和缩放比例。

width=device-width 部分设置页面的宽度以遵循设备的屏幕宽度(根据设备的不同而有所不同)。

initial-scale=1.0 部分设置浏览器首次加载页面时的初始缩放级别。

下面是一个没有视口元标记的网页示例,以及带有视口元标记的同一网页:


提示:如果您使用手机或平板电脑浏览此页面,可以点击上面的两个链接查看区别。


根据视口调整内容大小

用户习惯在桌面和移动设备上垂直滚动网站 设备 - 但不是水平的!

因此,如果用户被迫水平滚动或缩小才能看到 整个网页会导致糟糕的用户体验。

需要遵循的一些附加规则:

1.不要使用大的固定宽度元素 - 例如,如果 图像以比视口更宽的宽度显示,可能会导致 视口水平滚动。请记住调整此内容以适应 视口的宽度。

2.不要让内容依赖于特定的视口宽度 渲染良好 - 由于屏幕尺寸和 CSS 像素宽度各不相同 在设备之间广泛使用,内容不应依赖于特定的视口宽度 渲染得很好。

3.使用 CSS 媒体查询为小型和小型应用应用不同的样式 大屏幕 - 为页面元素设置大的绝对 CSS 宽度 将导致元素对于较小设备上的视口来说太宽。 相反,请考虑使用相对宽度值,例如 width: 100%。也是 小心使用大的绝对定位值。它可能会导致该元素 在小型设备上落在视口之外。