一、什么是响应式网页设计
响应式 web 设计会让您的网页在所有设备上看起来都不错。
响应式 web 设计仅使用 HTML 和 CSS。
响应式 web 设计并不是程序或 JavaScript。
二、什么是视口
视口(viewport)是用户在网页上的可见区域。
视口随设备而异,在移动电话上会比在计算机屏幕上更小。
在平板电脑和手机之前,网页仅设计为用于计算机屏幕,并且网页拥有静态设计和固定大小是很常见的。
然后,当我们开始使用平板电脑和手机上网时,固定大小的网页太大了,无法适应视口。为了解决这个问题,这些设备上的浏览器会按比例缩小整个网页以适合屏幕大小。
三、把内容调整到视口的大小
用户习惯在台式机和移动设备上垂直滚动网站,而不是水平滚动!
因此,如果迫使用户水平滚动或缩小以查看整个网页,则会导致不佳的用户体验。
还需要遵循的一些附加规则:
1. 请勿使用较大的固定宽度元素 - 例如,如果图像的宽度大于视口的宽度,则可能导致视口水平滚动。请务必调整此内容以适合视口的宽度。
2. 不要让内容依赖于特定的视口宽度来呈现好的效果 - 由于以 CSS 像素计的屏幕尺寸和宽度在设备之间变化很大,因此内容不应依赖于特定的视口宽度来呈现良好的效果。
3. 使用 CSS 媒体查询为小屏幕和大屏幕应用不同的样式 - 为页面元素设置较大的 CSS 绝对宽度将导致该元素对于较小设备上的视口太宽。而是应该考虑使用相对宽度值,例如 width: 100%。另外,要小心使用较大的绝对定位值,这可能会导致元素滑落到小型设备的视口之外。
四、典型的设备断点
高度和宽度不同的屏幕和设备不计其数,因此很难为每个设备创建精确的断点。为了简单起见,您可以瞄准这五组:
/* 超小型设备(电话,600px 及以下) */ @media only screen and (max-width: 600px) {...} /* 小型设备(纵向平板电脑和大型手机,600 像素及以上) */ @media only screen and (min-width: 600px) {...} /* 中型设备(横向平板电脑,768 像素及以上) */ @media only screen and (min-width: 768px) {...} /* 大型设备(笔记本电脑/台式机,992px 及以上) */ @media only screen and (min-width: 992px) {...} /* 超大型设备(大型笔记本电脑和台式机,1200px 及以上) */ @media only screen and (min-width: 1200px) {...}