如何在html css布局中使用媒体查询[重复]

Question

请告诉我如何使用 iPhone 的媒体查询。我不明白如何为 321 到 479 等两个设备以及其他设备编写媒体查询。

请告诉我如何更改其他设备中的响应式媒体查询。

Answer 1

就这么简单，不管你在测试哪部手机

@media(max-width:767px) {
  Here you can define all the responsive styles for mobile view. You can 
  resize the screen to the smallest screen resolution i.e iphone 4 320 * 
  480. So according to whatever the size is required, you can just define 
  it once. It will be applicable to all the devices.
}

Answer 2

使用：@media all and (max-width:200px){

}

当宽度小于您指定的最大宽度时，您放入其中的内容将生效。 因此，例如在笔记本电脑上，如果 somone 将浏览器的大小调整到小于 200 像素，则里面的样式将应用，如果手机屏幕的宽度小于您指定的最大宽度，则样式将自动应用。

Answer 3

媒体查询不针对特定设备（例如 iPhone），它们针对屏幕宽度（例如 min-width: 767px 和 max-width: 1024px）以及设备和显示器类别（打印、屏幕）。

这里有一个方便的教程：

https://www.w3schools.com/css/css3_mediaqueries.asp

@media screen and (max-width: 479px) and (min-width: 321px) {
    div.page {
       padding: 0.5em;
     }
}