如何设计一个响应式网站？

响应式网站是在所有设备（例如台式机，平板电脑和手机）上看起来都很棒的网站。网站应具有响应式设计，以使其具有响应性。这一切都是为了使用HTML和CSS来改变大小，隐藏或放大屏幕。

让我们看一个示例，在调整网站大小时响应式意味着什么，

桌面

桌面上的网站设计-

片剂

网站设计在平板电脑上看起来像这样。您可以轻松地将更改与上面显示的桌面屏幕截图进行比较-

移动

网站设计在Mobile上看起来像这样-

要开发一个响应性网站，无论设备大小如何，它都看起来不错，您需要研究以下概念-

视口

视口用于控制移动浏览器上的布局。它用于<meta>标记内，以向浏览器提供有关如何控制网页尺寸和缩放比例的说明。

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

这里， 

width = device-width设置页面的宽度，以便跟随设备的屏幕宽度。initial-scale = 1.0用于设置初始缩放级别。这在第一次通过Web浏览器加载页面时会有所帮助。

媒体查询

使用Media查询，添加一个断点，其中设计的某些部分在断点的每一侧表现不同。 

图片宽度和高度属性

为了使图像响应，您需要将width属性设置为100％，将height设置为auto。