当互联网刚开始蓬勃发展时，网站访问者使用台式机或者宽屏笔记本电脑来访问网站。然后当智能手机出现时，手机用户不得不无休止地缩放和滚动才能访问和查看相同网站的不同部分。值得庆幸的是，由于响应式网页设计的革命性引入，如今情况已不再如此。在本文中，我将带您了解响应式网页设计的演变、使其成为可能的各种集成，以及如何开始在您的编码项目中使用它以获得更好的用户体验。
什么是响应式网页设计？
响应式网页设计使网页可以在各种设备屏幕尺寸上正确呈现，而不会缩短或扭曲内容。
例如，这并不意味着网站在手机上的显示方式与在笔记本电脑上的显示方式完全相同。相反，它意味着网页的内容适应不同的屏幕尺寸——从大屏幕（台式机和笔记本电脑）到中屏幕（平板电脑）再到移动屏幕（各种屏幕尺寸的手机）。
它在保留相同内容的同时做到了这一切（只是可能以不同的方式排列以适应每个屏幕）。
响应式网页设计的演变
过去，人们主要使用台式机和笔记本电脑在线查看内容，因为网站仅针对这些屏幕进行了优化。
但随着越来越多的人开始使用手机上网，人们开始抱怨他们所看到的糟糕的显示和布局。
这对网页设计师和开发人员意味着一件事：网站也需要针对移动设备进行优化！
在过去十年中，移动网站用户数量首次开始超过台式机和笔记本电脑。因此，从科技巨头到小型企业，每个人都开始采用响应式网页设计方法。
开发人员和设计师还创造了闪亮的新移动优先设计。这意味着开发人员首先为移动设备制作网站，然后是桌面。
这通常意味着移动设备和更大屏幕的单独网站，具有相同的服务器系统但不同的域。
例如，原始网站可能是examplewebsite.com，而移动版本可能是examplewebsite.mobi、 或m.examplewebsite.com。
用户的设备将被现成的脚本检测到，然后相应的域将被呈现。这种做法今天仍然存在。
除了双域方法，网页设计师和开发者可以先针对特定屏幕尺寸（可以是桌面、平板电脑或移动设备）创建一个网站，然后添加所谓的媒体查询，使网站适应不同的屏幕尺寸。这是移动优先的方法。
如何使您的网站响应
将响应式网页设计方法集成到项目中包括代码的每一部分——在 HTML<head>元素、HTML 结构、CSS 甚至 JavaScript 中。
我将尽可能清楚和详细地描述这些过程。
在头部设置视口
<meta name="viewport" content="width=device-width, initial-scale=1.0">
由于 HTML 在定义网页结构方面发挥着重要作用，因此它肯定与使网站响应（适应）不同屏幕尺寸有关。
您需要在要针对不同屏幕尺寸进行优化的任何网页的头部部分中包含元视口空元素。
这告诉浏览器将网页的宽度呈现为设备的确切宽度。因此，如果设备的宽度为 1200 像素，则网页宽度将为 1200 像素。如果设备的宽度为 720 像素，则网页宽度将为 720 像素，依此类推。
这可以防止手机用户过去遇到的烦人的放大和缩小，这对用户体验不利。
以下是网站在没有<meta>视口元素的小型手机上的外观：
以下是带有<meta>viewport 元素的同一个网站在小型手机上的显示效果：
最低0.47元/天 解锁文章
726
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
