如何对高分辨率设备使用媒体查询 [英] How to use media query for high resolution devices

问题描述

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

I have made a simple website which is responsive (more or less). I have used media query @media only screen and (max-width: 699.99px). Now I know that this will activate the css inside it when resolution is less than 699.99px. So it is fine with computer but it doesn't work in mobiles and I know why. But I don't really understand how to solve this. I want this query to work on computer screen (resizing) as well as mobile devices and tablets.

推荐答案

首先，如果要使网站具有响应能力，最好使用Bootstrap或Foundation等响应框架.

First of all if you want make your website responsive it's better to use responsive framework like Bootstrap or foundation.

但是如果您更喜欢在没有框架的情况下进行操作.试试这个

but if you prefer to do it without framework. try this

您可以执行4个媒体查询步骤

you can make 4 media query steps

// 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) {

}

我希望这可以帮助

这篇关于如何对高分辨率设备使用媒体查询的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！