首先在bootstrap里面所有的样式并在pc上是根据px的单位来判断的,就是我们说的分辨率,

  1. @media(min-width:1200px){
  2. ......里面的样式
  3. }

那么就是说当你的屏幕放大或者缩小是根据pc的分辨率来定的,当屏幕的缩小px也跟着缩小,在自动需找css里面有的样式

现在是手机里的bootstrap就有些特殊了,他们的单位还是算px但是却是不是走真的px走的是手机显示屏整个的宽度,这个时候比较大众的宽度有320-360的320的屏幕宽度比较单一,但是到了360的宽度的时候就比较的多样化了,路面会出现普通分辨率,和高清分辨率两种,如果还是走跟pc上显示器一样的话,那么我们这个360样式的就不会起效果,但是却不是,为什么,想想,在一个360宽度的屏幕里,有很多的分辨率,小到360*280 - 大到1920*800多的都有这么来的话,我们写样式的话,不是要写死,所以注意点bootstrap很聪明,他们直接转化了分辨率在手机上的,直接算成宽度来计算走的样式,这样就简单多了,我们不用担心在不同的分辨率下会跑偏,只需要针对屏幕的宽度来定义样式就好了,很好的做到了方便易懂。

  1. @media(min-width:360px){
  2. ......里面的样式
  3. }

所以在这里需要分辨清楚,pc端和手机端的区别,在这里为大家提供几个安卓比较通用的屏幕宽度给大家作为参考

320 360 400 480 这个手机端的屏幕宽度,这四个宽度几乎包含了目前的所有安卓智能机,在往小的基本就告别了自动机,往大了,还没发现,怎么判断一个手机的屏幕宽度呢,其实很简单

  1. //jQuery
  2. alert($(window).width());

上传到本地,然后通过手机的游览器打开你的页面地址,就可以直接跳出你需要知道的屏幕宽度了

Bootstrap的宽度和分辨率的差别的更多相关文章

  1. JS获取浏览器高宽度,屏幕分辨率和一些定位空隙等

    IE中: document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.d ...

  2. Bootstrap中宽度大于指定宽度时有空白的解决方法

    <div class="container-fluid"></div> 其中container-fluid的作用是占100%

  3. Bootstrap框架的学习(一)

    一.Bootstrap框架介绍 Bootstrap是一个非常优秀的前端UI框架,一个轻量级的UI前端框架,是基于HTML+CSS+JavaScript的框架. 二.简单介绍 Bootstrap框架是属 ...

  4. bootstrap scaffold框架

    这是一段典型的html typical HTML file: <!DOCTYPE html> <html> <head> <title>Bootstra ...

  5. Cocos2d-x 2.0 自适应多种分辨率

    转自:http://dualface.github.io/blog/2012/08/17/cocos2d-x-2-dot-0-multi-resolution/ cocos2d-x 2.0 提供一个极 ...

  6. container宽度

    bootstrap:宽度太宽时无需改变container的宽度大小,只需:.row{margin-left: 30px;margin-right: 30px;}

  7. html5移动端页面分辨率设置及相应字体大小设置的靠谱使用方式

    对于html5移动端网页编写CSS网上有很多介绍的文章,但在实际使用过程中还是会纠结. 网上的资料太多,且大多都是技术介绍型,特别是针对android上,网上写的各种麻烦,各种复杂,各种不接地气儿.. ...

  8. 理解android分辨率限定符 layout-sw360dp

    首先,我们来看看单位dp是怎么一回事,dp是一种单位,使用它,你可以在高.低分辨率上获得一样的空间表现,也就是说,它是像素无关的. dp计算公式:160*pix/ppi(pix是你要计算的高度或者宽度 ...

  9. 学习lofter 让图片适应各个分辨率的方法

    只要图片的分辨率足够大,那么可以任意的width,不用担心失真 那么就可以根据屏幕的分辨率给图片相应的宽度 大分辨率浏览 小分辨率浏览 两个分辨率的图片地址是一样的,排除了换图的可能 大分辨率下的代码 ...

随机推荐

  1. ASP.NET常用代码汇总

    1. 打开新的窗口并传送参数: 传送参数:response.write("<script>window.open('*.aspx?id="+this.DropDownL ...

  2. Objective-C中的self和super

    1.有过面向对象的人知道,self相当于this,super相当于调用父类的方法 2.self是类的隐藏的参数,指向当前调用方法的类,另一个隐藏参数是_cmd,代表当前类方法的selector. su ...

  3. laravel5.2 学习之服务提供者

    契约接口:app\Contracts\LanguageContract.php <?php namespace App\Contracts; interface LanguageContract ...

  4. Linux安全运维日志排查几个 tips

    运维日志排查记录 前言 记录一些排查常见日志的命令,方法wiki,欢迎补充(Markdown 语法). 常用命令 查找关键词并统计行数 cat 2015_7_25_test_access.log | ...

  5. STM32F4_USART配置及细节描述

    Ⅰ.概述 关于USART串口通信,可以说是MCU的标配.不管是在实际项目应用中,还是在开发过程中,它都起着很重要的作用. 在项目应用中我们常常使用UART串口进行通信,根据通信的距离及稳定性,还选择添 ...

  6. jquery.unobtrusive-ajax.js单独的用法

    (插件本身已经减少了人力,如果开始无脑开发,简直就是无能,@Ajax里面哪里帮助类生成的其实就是jquery.unobtrusive的一些特性) jquery.unobtrusive是MVC中出现的j ...

  7. 算法系列4《Luhn》

    Luhn算法由IBM的Hans Peter Luhn发明,又称为"模10"算法,是一种简单的校验和算法,用来验证识别号,一般会被用于身份证号码,信用卡号.IMEI号.社会保险号的验 ...

  8. 菜鸟学习Struts——国际化

    一.概念 国际化:界面上的语言可以根据用户所在的地区改变显示语言. 如图: 二.实例 下面就一步一步的教大家利用Struts实现国际化. 1.编写资源文件 这个资源文件就是界面上显示的字符,资源文件里 ...

  9. AppCan4.0:开发者要做有价值的APP

    在当今的移动盛世,谈论APP“生存”话题未免太过沉重.但面对百万级移动应用大军所产生的激烈竞争,且保证“立而不倒”,这样的探讨就显得格外重要了. 主打“价值牌”才能“一条龙” 有这样一组数据,在我国, ...

  10. ios中怎么样点击背景退出键盘

    //退出键盘 只需一句,药到病除 - (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event{ [self.view endEdi ...