Bootstrap的宽度和分辨率的差别
首先在bootstrap里面所有的样式并在pc上是根据px的单位来判断的,就是我们说的分辨率,
- @media(min-width:1200px){
- ......里面的样式
- }
那么就是说当你的屏幕放大或者缩小是根据pc的分辨率来定的,当屏幕的缩小px也跟着缩小,在自动需找css里面有的样式
现在是手机里的bootstrap就有些特殊了,他们的单位还是算px但是却是不是走真的px走的是手机显示屏整个的宽度,这个时候比较大众的宽度有320-360的320的屏幕宽度比较单一,但是到了360的宽度的时候就比较的多样化了,路面会出现普通分辨率,和高清分辨率两种,如果还是走跟pc上显示器一样的话,那么我们这个360样式的就不会起效果,但是却不是,为什么,想想,在一个360宽度的屏幕里,有很多的分辨率,小到360*280 - 大到1920*800多的都有这么来的话,我们写样式的话,不是要写死,所以注意点bootstrap很聪明,他们直接转化了分辨率在手机上的,直接算成宽度来计算走的样式,这样就简单多了,我们不用担心在不同的分辨率下会跑偏,只需要针对屏幕的宽度来定义样式就好了,很好的做到了方便易懂。
- @media(min-width:360px){
- ......里面的样式
- }
所以在这里需要分辨清楚,pc端和手机端的区别,在这里为大家提供几个安卓比较通用的屏幕宽度给大家作为参考
320 360 400 480 这个手机端的屏幕宽度,这四个宽度几乎包含了目前的所有安卓智能机,在往小的基本就告别了自动机,往大了,还没发现,怎么判断一个手机的屏幕宽度呢,其实很简单
- //jQuery
- alert($(window).width());
上传到本地,然后通过手机的游览器打开你的页面地址,就可以直接跳出你需要知道的屏幕宽度了
Bootstrap的宽度和分辨率的差别的更多相关文章
- JS获取浏览器高宽度,屏幕分辨率和一些定位空隙等
IE中: document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.d ...
- Bootstrap中宽度大于指定宽度时有空白的解决方法
<div class="container-fluid"></div> 其中container-fluid的作用是占100%
- Bootstrap框架的学习(一)
一.Bootstrap框架介绍 Bootstrap是一个非常优秀的前端UI框架,一个轻量级的UI前端框架,是基于HTML+CSS+JavaScript的框架. 二.简单介绍 Bootstrap框架是属 ...
- bootstrap scaffold框架
这是一段典型的html typical HTML file: <!DOCTYPE html> <html> <head> <title>Bootstra ...
- Cocos2d-x 2.0 自适应多种分辨率
转自:http://dualface.github.io/blog/2012/08/17/cocos2d-x-2-dot-0-multi-resolution/ cocos2d-x 2.0 提供一个极 ...
- container宽度
bootstrap:宽度太宽时无需改变container的宽度大小,只需:.row{margin-left: 30px;margin-right: 30px;}
- html5移动端页面分辨率设置及相应字体大小设置的靠谱使用方式
对于html5移动端网页编写CSS网上有很多介绍的文章,但在实际使用过程中还是会纠结. 网上的资料太多,且大多都是技术介绍型,特别是针对android上,网上写的各种麻烦,各种复杂,各种不接地气儿.. ...
- 理解android分辨率限定符 layout-sw360dp
首先,我们来看看单位dp是怎么一回事,dp是一种单位,使用它,你可以在高.低分辨率上获得一样的空间表现,也就是说,它是像素无关的. dp计算公式:160*pix/ppi(pix是你要计算的高度或者宽度 ...
- 学习lofter 让图片适应各个分辨率的方法
只要图片的分辨率足够大,那么可以任意的width,不用担心失真 那么就可以根据屏幕的分辨率给图片相应的宽度 大分辨率浏览 小分辨率浏览 两个分辨率的图片地址是一样的,排除了换图的可能 大分辨率下的代码 ...
随机推荐
- [原]Django慢请求分析工具--dogslow
当你的网站突然变慢了,你怎么办? 先看监控,查看系统的资源消耗,CPU?IO?磁盘? 然后看日志,查看第一个出现慢请求的接口是哪个? 然后看依赖的服务,是第三方服务还是DB瓶颈,还是redis变慢,还 ...
- python 解析XML python模块xml.dom解析xml实例代码
分享下python中使用模块xml.dom解析xml文件的实例代码,学习下python解析xml文件的方法. 原文转自:http://www.jbxue.com/article/16587.html ...
- C-链表的一些基本操作【创建-删除-打印-插入】
#include <stdio.h> #include <stdlib.h> #include <malloc.h> #define LEN sizeof(stru ...
- Android触摸屏配置调试
前几天搞乐蛙时,进入后是鼠标模式,好坑爹的模式有木有~~ 但是大蛋给出了解决方法,我不怕不怕啦~让我们向大牛致敬!!! 首先输入Command查看你的input配置~ adb shell dumpsy ...
- WPF:定制Checkbox样式,让“正确”绿得好看,让“错误”红的显眼
WPF提供了样式.模板.触发器.状态管理.矢量形状等方式,让我们不需要背景图片,也可以轻松定制控件的风格样式.下面是笔者针对Checkbox进行的样式定制,让“正确”绿得好看,让“错误”红的显眼. ...
- 使用Telerik控件搭建Doubanfm频道部分
今天感觉好累啊..还是坚持记录下. 收集的API: https://github.com/HakurouKen/douban.fm-api https://github.com/zonyitoo/do ...
- hdu 4941 Magical Forest
题目连接 http://acm.hdu.edu.cn/showproblem.php?pid=4941 Magical Forest Description There is a forest can ...
- hdu 4585 Shaolin
原题链接:http://acm.hust.edu.cn/vjudge/problem/viewProblem.action?id=46093 #include<algorithm> #in ...
- ios中用drawRect方法绘图的时候设置颜色
设置画笔颜色可以直接 [[UIColor grayColor] set];就可以设置颜色.
- qu
离骚 (3481人评分) 8.5 朝代:先秦 作者:屈原 原文: 帝高阳之苗裔兮,朕皇考曰伯庸.摄提贞于孟陬兮,惟庚寅吾以降.皇览揆余初度兮,肇锡余以嘉名:名余曰正则兮,字余曰灵均.纷吾既有此内美 ...