零基础html5+div+css+js网页开发教程第037期 如何让网页自适应各个屏幕?
目录:
早期网站开发人员不必担心设计网站,因为用户可以在计算机上查看它们,并且这些计算机具有固定的屏幕分辨率。随着移动革命,越来越多的人在他们的移动设备 - 平板电脑或手机上寻找信息。因此,网站开发人员有必要创建一个网站,满足从Windows PC到移动设备的所有需求。本文解释了 自适应网页设计与响应式网页设计 之间的区别,并允许您决定哪一个更适合您和您的组织。
有两种方法可以创建网站,以便迎合不同的屏幕分辨率:从个人电脑到手机。这些方法是自适应网页设计和响应式网页设计。在这两种情况下,最终的目标都是制作一个可以在任何类型的屏幕分辨率上查看的网站。旨在介绍各种设备的信息 - 从个人电脑到平板电脑到手机。
响应式网页设计
响应式网页设计涉及额外的编码并采用所谓的“流体网格”。数字以“百分比”而不是确切的像素数量指定。这会使相同的网站代码在PC屏幕和手机屏幕上正确呈现。因此,无论您如何调整屏幕大小,都会以易于阅读的方式呈现相同的网站。对于较小的网站,文本和图像很容易随屏幕空间流动并融入网站,而不会破坏网站或不切断网站的某些部分。
响应式网页设计方法使得强制使用CSS3而不仅仅是CSS。它还利用了可扩展的图像和流体网格,这些代码有点难以编码。
自适应网页设计
自适应网页设计还专注于在平板电脑和手机上呈现可视网站以及PC屏幕。这种方法虽然有点不同。在响应式网页设计中,灵活性允许自由文本流和图像大小调整以适应不同的屏幕。
在自适应网页设计中,开发人员利用相应的预定屏幕大小和代码。也就是说,当用户登录网站时,网站确定正在使用的设备类型,并呈现为该特定设备屏幕尺寸设计的网站。在某些情况下,各种设备的内容可能会有所不同。
例如,开发人员会考虑PC的1280×800像素,平板电脑的8英寸和移动设备的5英寸。自适应网页设计的早期代码包含屏幕识别。如果是PC,请显示该网站的PC版本。如果是8“的平板电脑,则显示该网站的平板电脑版本,同样,如果该设备是手机,则显示该网站的移动版本。通过使用”IF“语句,然后指定不同尺寸精确地以像素为单位,而不是以百分比表示
如果新设备以不同的屏幕分辨率结束,开发人员将不得不重新编码以整合新的屏幕分辨率,因此,自适应网页设计有一些裁剪机会
与响应式网页设计相比,自适应网页设计更易于编写代码,大多数开发人员在响应式网页设计中选择后者。
响应与自适应网页设计
响应式网站很难编码,代码复杂,并且使用的是百分比值而不是固定的像素值,需要大量的精力来建立一个能够根据设备的屏幕尺寸进行缩放的网站,相反,更容易为不同的设备创建不同的网站,就像自适应网页设计中的情况一样。虽然开发人员可以针对不同的设备尺寸创建不同的网站,但工作更适合于自适应网页设计,与响应式网页设计相比,它仍然更容易
由于市场上的移动设备太多,开发人员不一定包含所有类型的屏幕分辨率。这会导致在使用自适应网页设计方法时在较小的屏幕上裁剪网站。
自适应网站的加载速度有点慢,因为网站首先要弄清楚使用的设备和屏幕分辨率。基于此,相关版本的网站将加载到设备的屏幕上。在使用响应式网页设计的情况下,使用单一代码并自动收缩以适应手机屏幕。
您也可以在MSDN上看到这篇文章,标题为 为什么我更喜欢自适应网页设计而不是响应式网页设计 。