我做了一个简单的网站，其响应（或多或少）。 我已经使用媒体查询@media only screen and (max-width: 699.99px) 现在我知道，这将激活CSS里面当分辨率小于699.99px。 因此，它是精细与电脑，但它不能在移动工作，我知道是什么原因。 但我真的不明白怎么解决这个问题。 我想这个查询电脑屏幕（调整大小）以及移动设备和平板电脑上运行。
Answer 1:
您可以使用em或rem ，而不是px 。 这使得造型取决于有多少内容在屏幕上适合假设您同时使用em / rem来设置元素的大小。
Answer 2:
可能是与真正的屏幕宽度和实际尺寸之间的差异问题
<meta id="viewport" name="viewport" content ="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
或者您可以使用媒体设备宽度
@media only screen and (max-device-width: 700px) {
/* Style goes here */
}
但我建议你开始与移动先行的办法 ，肯定会解决这一问题。 基本上你首先为移动做的CSS，然后重写CSS与媒体查询，如桌面
@media only screen and (min-width: 700px){
/* Style goes here */
}
BTW您的设备是否支持699.99px？ 尝试使用700，而不是
Answer 3:
首先，如果你想使你的网站响应它更好地使用响应框架像引导或基础。
但是，如果你喜欢做没有框架。 尝试这个
你可以让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) {
}
我希望这可以帮助
文章来源: How to use media query for high resolution devices
