适应性设计和响应性设计之间的斗争已经存在了很长一段时间，这两种技术都已崭露头角。但随着时间的推移，互联网在移动设备中的普及率越来越高，对响应式设计的重视也越来越高。响应式设计已经成为当今网页设计界的需要，设计师们需要学习响应式设计的基本准则和原则，以使网站具有现代感。

早些时候，当屏幕尺寸很大时，不管是笔记本电脑屏幕还是电脑显示器，有一个适合这些屏幕的网站就可以帮你完成这项工作。但随着移动计算的发展，从智能手表到平板电脑，屏幕尺寸从几英寸到几英寸不等，情况也发生了变化。因此，为了保证所有设备的统一用户体验，像Mind Metricks这样的流行网站设计公司开始使用设计原则，在这些原则下，设备进行动态渲染工作。这是响应式设计的基础。

什么是响应式设计？
响应式设计是一个由设备决定网站显示方式的术语。“移动优先”的概念在这里起着至关重要的作用，因为体验是在智能手机和平板电脑等移动平台上确定的，然后扩展到更大的屏幕。
因此，当加载图像时，它们会根据移动设备屏幕大小的包装进行缩放。随着屏幕尺寸的增大，包装器的尺寸会增大，但图像只会扩展到其最大分辨率，从而避免了大屏幕上的图像失真。其结果是在所有设备上实现统一的图形渲染。
与传统的设计不同，响应式设计将无法容纳侧边栏和广告，这是典型的桌面网站所共有的。然而，它们的不可用使布局更简单、更干净，从而增强了吸引力。因此，响应式设计已成为流行的这些天。
响应式设计的主要原则：
由于响应性设计是在浏览器而不是服务器上呈现的，因此浏览器必须精确地使用CSS参数来完成工作。要获得正确的渲染效果，需要遵循3个响应性设计原则：

流体网格系统：
打印图形根据显示器的大小进行设计。同样的思想也在互联网上使用像素。但是响应性设计原则回避了这一点，因为没有机器渲染的空间。相反，它使用了相对大小的概念。最好用以下公式来描述：
目标大小/上下文=相对大小
因此，如果网站包装器设计为显示最大宽度为960像素的网站，而最大浏览器窗口宽度为1280像素，则相对大小计算为960/1280=75%
因此，在CSS脚本中，必须使用百分比来表示宽度，而不是像素，浏览器将为您完成这项工作。
流体图像：
响应性设计需要使用占据屏幕的流体图像。最好使用CSS命令：
img{最大宽度：100%；}
这只是告诉浏览器图像宽度应该是像素值的100%。因此，即使屏幕变大，图像也保持不变，这样可以避免退化。对于较小的屏幕大小，CSS命令放在一个容器中，并根据其规格进行收缩。但是，在缩小的同时，您可能会观察到像素密度的增加。为了防止这种情况，建议对图像使用SVG格式。

媒体查询：
这是聪明的使用CSS来改变网站的布局，只要满足一定的条件。例如，两列方法不会在大屏幕上显示。因此，基于屏幕大小，CSS呈现是有计划的，每个部分都使用一系列的“断点”激活。这样，你的网站就可以针对不同的屏幕，而无需你做任何事情。
因此，这些都是响应性设计原则，使设计变得简单和智能，并将其交给机器渲染，从而使设备为您完成设计工作。

本文地址：https://www.grwy.net/wangzhanjianshe/24-469.html