Bootstrap的宽度和分辨率的差别

Posted 2020-06-17

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

Java代码  

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很聪明，他们直接转化了分辨率在手机上的，直接算成宽度来计算走的样式，这样就简单多了，我们不用担心在不同的分辨率下会跑偏，只需要针对屏幕的宽度来定义样式就好了，很好的做到了方便易懂。 

Java代码  

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

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

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

html5代码  

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

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