Question

我创建了一个响应（或多或少）的简单网站。我使用过媒体查询@media only screen and (max-width: 699.99px)。现在我知道当分辨率小于699.99px时，这将激活其中的css。所以它适用于计算机，但它不适用于手机，我知道原因。但我真的不明白如何解决这个问题。我希望此查询可以在计算机屏幕（调整大小）以及移动设备和平板电脑上运行。

Answer 1

您可以使用em或rem代替px。这使得样式取决于屏幕上适合的内容，假设您还使用em / rem来设置元素的大小。

Answer 2

首先，如果您想让您的网站响应，最好使用像Bootstrap或Foundation这样的响应式框架。

但是如果你更喜欢没有框架的话。试试这个

您可以制作4个媒体查询步骤

// Extra small devices (portrait phones, less than 544px)
// No media query since this is the default in Bootstrap

// Small devices (landscape phones, 544px and up)
@media (min-width: 544px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

和额外指南

/*==========  Mobile First Method  ==========*/

/* Custom, iPhone Retina */ 
@media only screen and (min-width : 320px) {

}

/* Extra Small Devices, Phones */ 
@media only screen and (min-width : 480px) {

}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {

}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {

}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {

}



/*==========  Non-Mobile First Method  ==========*/

/* Large Devices, Wide Screens */
@media only screen and (max-width : 1200px) {

}

/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {

}

/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {

}

/* Extra Small Devices, Phones */ 
@media only screen and (max-width : 480px) {

}

/* Custom, iPhone Retina */ 
@media only screen and (max-width : 320px) {

}

我希望这可以提供帮助

Answer 3

可能是实际屏幕宽度与实际尺寸之间存在差异的问题

<meta id="viewport" name="viewport" content ="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />

或者您可以使用media-device-width

@media only screen and (max-device-width: 700px) {
  /* Style goes here */
}

但是我建议你从移动优先方法开始，这肯定会解决问题。基本上首先你做移动设备的CSS，然后用媒体查询覆盖桌面的css，如

@media only screen and (min-width: 700px){
  /* Style goes here */
}

你的设备是否支持699.99px？尝试使用700而不是

如何使用媒体查询高分辨率设备

3 个答案: