HTML使用媒体查询语法控制从多个选项中显示的图像。

元素HTML使用媒体查询语法控制从多个选项中显示的图像。这通常用于艺术指导，以显示适合设备视角的图像。例如：

CSS视口单位

CSS列

CSS Flexbox和网格

Flexbox用于一维布局。主要区别：

可用于创建内部布局。本质上，无需视媒体查询即可根据视口尺寸调整元素的大小。例如：

.grid-container{display: grid;grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));grid-gap: 1rem;}

JavaScript也可用于确定视口尺寸并做出相应反应。例如：

// get viewport width and heightconstvw = window.innerWidth,vh = window.innerHeight;

尽管如此getBoundingClientRect()方法可以返回包括像素分数在内的更多信息，但是可以用offsetWidth和offsetHeight检查单个元素的尺寸：

const element = document.getElementById('myelement'),rect = element.getBoundingClientRect(),ew = rect.width,eh = rect.height;

随着设备的旋转或调整浏览器窗口的大小，以改变窗口和元素的大小。该matchMediaAPI可以解析CSS媒体查询并触发变更：

// media queryconst mql = window.matchMedia('(min-width: 600px)');// initial check mqTest(mql); // call mqTest when media query changes mql.addListener(mqTest); // media query testing function function mqTest(e){ if (e.matches){ console.log('viewport is at least 600px width'); }else{ console.log('viewport is less than 600px width'); }}浏览器支持首先，RWD该技术为浏览器提供了良好的支持。近95%的最新浏览器支持最新浏览器CSS网格选项。近95%的最新浏览器支持最新浏览器CSS网格选项。然而，在各种设备、分辨率和浏览器上测试您的网站仍然是必要的……在浏览器内进行测试调整浏览器窗口的大小是几个小时的合理测试策略，但很快就变得不准确和麻烦。大多数浏览器提供响应式设计模式，使您可以选择设备和用户代理来旋转、选择分辨率、更改像素密度、调整带宽、模拟触摸和拍摄屏幕截图。

在Firefox中，从Web Developer菜单中选择菜单中选择响应式设计模式”或按Ctrl|Cmd Shift M。在基于Chromium从

菜单打开菜单打开开发人员工具，或按Ctrl|Cmd Shift I，然后单击切换设备工具栏图标，切换回浏览器选项卡，查看调整大小的站点。在Safari从浏览器偏好设置的“高级”在标签中使用开发菜单显示在菜单栏中

。加载页面，然后从

菜单中选择菜单中选择进入响应设计模式”。

但是，请注意，这些工具只模仿设备的屏幕尺寸和用户代理。不能准确模拟以下内容：

渲染能力

浏览器将使用自己的呈现引擎，而不是模拟设备的呈现引擎。Firefox的CSS它可以模拟功能iPhone在没有实际支持的情况下，视图上工作。也就是说，Chrome桌面将显示和Android Chrome相当的近似值，而macOS Safari将类似于iPhone，因为它们基于相同的渲染引擎。

较旧的设备

最新版本Safari上测试iPhone浏览器视图不能正确表示旧操作系统和软件的旧设备。

高密度显示器

您仅限于PC物理像素显示器，所以网站在实际设备上看起来可能更好或更糟。

触摸

鼠标或触摸板比有小显示屏的触摸屏设备控制得更好。悬停效果可能无法检查。

您的PC网络和处理速度可能比移动设备快。

在设备上运行Android或iOS虚拟机允许您安装和操作真正的移动浏览器，并使用其实际渲染引擎。

Android模拟器包括：

Chrome是Android有明显的浏览器选择，但也可以安装Opera Mini，这在低功率功能手机上非常显眼。

iOS选项更有限：

这些仿真器仍有缺点：

Apple Xcode：商业，macOSElectric Mobile Studio：商业，WindowsiPadian模拟器：商业，Windows

该软件需要一定的技术知识，并占用大量的系统资源。iOS所有的选项都是模拟器。它们将使用其他渲染引擎，并不总是准确的。在线测试服务