自适应页面安卓版，应该根据像素来定还是手机本身的宽度来定

Question

我用的是用Bootstrap相适应框架在写的，通过@media (min-width: 320px)来判断他们的宽度，但是我发现在这些取出来的都是手机自身的宽度，而不是他们的像素多少，那么走样式的话，也是根据手机自身的宽度来定的，而不是走手机的像素，请问，这问题要怎么解决，能不能获取到安卓的像素来定样式，还是说只能根据安卓手机自身的宽度来定样式。

举个例子，就是@media (min-width: 1080px)是这个屏幕自身的宽度，那么在这个宽度里面分辨率可以是600 800 920 1080，那么安卓手机也是这样，在360的宽度里面分辨率也可以是320 480 720 等等，那么像这个情况的话我应该根据像素来定样式，还是自身的宽度来定样式，那么在
Bootstrap响应式的框架里面，我只是会通过自身宽度来定要是，如果要根据分辨率来定样式的话，需要怎么来写？

Answer 1

首先，看不懂你说的像素跟手机宽度的意思。

介绍下语法吧,很简单的,简直就是一目了然:

@media screen and (max-width: 768px) {/*样式*/}

很明显 上面一条查询的 结果就是在最大分辨率为768px宽度的设备下应用以下样式.

很容易吧.

介绍几种常用的,方便大家应用到实际中:

/***** Standard 960px *****/
@media only screen and (min-width:960px) and (max-width:1200px) {
    .row { margin:0 auto; width:960px; }
}
/***** iPad Smaller than 959px *****/
@media only screen and (min-width: 768px) and (max-width: 959px) {
    .row { margin:0 auto; width:768px; }
}
/***** iPhone (portrait) *****/
@media only screen and (max-width: 767px) {
    .row { margin:0 auto; width:300px; }
}

@media only screen and (min-width: 480px) and (max-width: 767px) {
    .row { margin:0 auto; width:456px; }
}

基本上,上面几种分辨率的设置就涵盖了目前的主流设备了.

Answer 2

boostrap 里 viewport 被设置为device-width了，所以采用 @media (min-width: 320px) 这类的移动设备实际像素值来设定样式，这是没错的，也是推荐的使用方法

@Skyfei 给出的数值看起来是默认的viewport宽度下遵守的，min-width是大于等于，max-width是小于等于，bootstrap自身的css应该有很好的终端宽度设定，直接参考就可以了，你想要改什么？