网页设计布局最常见的是流体网格，灵活调整大小的站点布局技术，确保用户在使用的幕上获得完整的体验。如何展示富媒体图像，用户代理识别用户是从PC还是移动设备访问网站，媒体查询会将用户重定向到具有不同布局和信息设计的网站。但重定向这种方法针对屏幕布局进行优化，用户提供良好的体验，通过媒体查询CSS可以处理不同维度的布局。

媒体查询是编写CSS3样式表，是UI元素声明样式的一种方式，这些UI元素以屏幕大小，媒体类型为条件。使用媒体查询，可以通过向浏览器询问相关因素，例如设备宽度，设备像素密度和设备方向来标记声明不同的样式。使用CSS3构建不同的固定宽度布局，为设备提供最佳体验。媒体查询是真正响应式Web布局的解决方案的一部分，按比例缩放以填充屏幕的内容。像素是实现布局的基本单位，用于声明网页的各个元素的尺寸以及排版，在当代Web设计中像素不再是可以由屏幕呈现的单个最小点。

 媒体查询响应参考像素，硬件像素与CSS像素的比率称设备像素比率，高设备像素比率每个CSS像素由更多硬件像素渲染，文本和布局看起来更清晰。按像素密度，包括设备像素比率。可以使用CSS3媒体查询来识别设备像素比率，代码如下所示：

网页设计优化图像，不使用设备像素比来定义页面和内容布局，为用户提供更好的体验，从实际角度来看，向用户提供高质量的图像数据，设备像素比率最为重要。响应地扩展站点布局，基于网格的布局是网站设计的关键组成部分。大多数网站都可显示页面组件的一系列矩形，例如标题，网站导航，内容，侧边栏，页脚等。当设计时，使网格布局与用户的屏幕大小无关，布局和内容可以扩展到尽可能多的屏幕空间。采用移动优先的方法进行网站设计是基本原则，可以在站点的移动版本上提供优先级，然后逐步增强大型设备的站点布局。通过这种方式，可以确保用户在其移动设备上获得好的体验，可以利用额外的空间来提供更具视觉吸引力的体验。