响应式web设计

https://www.w3schools.com/html/html_responsive.asp

设置viewport meta

参考 demo-responsive-design/demo-setting-the-viewport

响应式图片

参考 demo-responsive-design/demo-responsive-image

响应式文本

参考 demo-responsive-design/demo-responsive-text

根据浏览器宽度显示不同的图片

参考 demo-responsive-design/demo-show-different-image-depending-on-browser-width

自适应和响应式区别

https://answer.baidu.com/answer/land?params=2pYqV2dFvx1ITq44PzikNEKfsp%2B5%2BHhj%2FesMN9eVgdr5pUNi0t1d87a4dqi4uJGdIGQMev5escaVyMS3IiMTD%2Biv347YglgAXMZx5kK3fb%2FKTvd3r%2BvHBcIgXHL3TJt7qwipUX6VzeB8RMsGVTssnMG0jisEf%2BYsEP1Zo3Kh83%2BgCwExVW86e6BL45uww4v9&from=dqa&lid=c309cf4e00036f62&word=自适应和响应式区别

自适应设计通常涉及为不同设备的不同屏幕尺寸设计多个不同的布局。这包括手机端、平板端和电脑端的布局。

响应式设计则是创建一套页面，并通过媒体查询（media queries）和可能的JavaScript和CSS控制，根据用户的设备和屏幕尺寸动态地调整布局和内容。