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

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

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

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


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

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

@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; }
}

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


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

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

【热门文章】
【热门文章】