各位观众老爷们，晚上好！今天咱们聊点接地气的，就是怎么用CSS的min-width、max-width配合orientation媒体查询，把咱们的网页在各种奇形怪状的设备上伺候得舒舒服服的。别担心，咱不搞那些高深莫测的理论，直接上代码，保证你听完就能上手。 一、 啥是min-width和max-width？ 首先，得弄清楚min-width和max-width是干嘛的。它们就像是给元素设置了一个“最小宽度”和“最大宽度”的限制器。 min-width: 元素宽度不能小于这个值。就算你内容再少，也得撑到这个宽度。 max-width: 元素宽度不能大于这个值。就算你内容再多，也撑不到这个宽度。 举个栗子： .container { min-width: 300px; max-width: 800px; } 这段代码的意思是，.container这个元素的宽度最小是300像素，最大是800像素。当屏幕宽度小于300像素时，.container的宽度会保持在300像素；当屏幕宽度大于800像素时，.container的宽度会保持在800像素。中间的情况，它会乖乖地适应屏幕宽度。 二、 ori …
继续阅读“CSS `min-width` / `max-width` 结合 `orientation` (`portrait`/`landscape`) 的设备适配”