CSS RWD视口

  • 响应式网页设计 - 视口

    什么是视口?视口是用户在网页上的可见区域。视口因设备而异,在手机上比在计算机屏幕上小。在平板电脑和移动电话之前,网页仅设计用于计算机屏幕,并且网页通常具有静态设计和固定大小。然后,当我们开始使用平板电脑和手机上网时,固定大小的网页太大而无法容纳视口。为了解决这个问题,这些设备上的浏览器按比例缩小整个网页以适应屏幕。这不完美!! 但快速修复。

  • 设置视口

    HTML5引入了一种方法,让Web设计人员通过<meta>标记控制视口 。您应该在所有网页中包含以下视口元素:

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

    一个<meta>视元素对如何控制网页的尺寸和缩放浏览器的说明:
    width=device-width部分将页面宽度设置为遵循设备的屏幕宽度(具体取决于设备)。
    initial-scale=1.0部分设置浏览器首次加载页面时的初始缩放级别。
    这里是一个网页的一个例子:

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

    使用视口设置》》》》

    没有使用视口设置》》》》

  • 视口大小内容

    用户用于在桌面和移动设备上垂直滚动网站 - 但不是横向滚动!因此,如果用户被迫水平滚动或缩小,以查看整个网页,则会导致糟糕的用户体验。一些额外的规则要遵循:
    1.不要使用大的固定宽度元素 - 例如,如果图像的宽度比视口宽,则可能导致视口水平滚动。请记住调整此内容以适合视口的宽度。
    2.不要让内容依赖于特定的视口宽度来渲染 - 由于CSS像素中的屏幕尺寸和宽度在设备之间变化很大,因此内容不应依赖于特定的视口宽度来渲染。
    3.使用CSS媒体查询为小屏幕和大屏幕应用不同的样式 - 为页面元素设置较大的绝对CSS宽度将导致元素对于较小设备上的视口而言太宽。相反,请考虑使用相对宽度值,例如宽度:100%。另外,请注意使用较大的绝对定位值。它可能导致元素落在小型设备上的视口之外。