首先在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());
上传到本地,然后通过手机的游览器打开你的页面地址,就可以直接跳出你需要知道的屏幕宽度了
分享到:
相关推荐
赠送jar包:swagger-bootstrap-ui-1.9.6.jar; 赠送原API文档:swagger-bootstrap-ui-1.9.6-javadoc.jar; 赠送源代码:swagger-...人性化翻译,文档中的代码和结构保持不变,注释和说明精准翻译,请放心使用。
fastadmin 表格添加固定表头 bootstrap-table-fixed-columns所需插件
bootstrap-table-zh-CN.js,有需要就下载吧
如有使用疑问,联系博主 bootstrap-table-fixed-columns.css固定列 冻结列
在原bootstrap-table-fixed-columns的基础上,解决了冻结列后,排序失效、列宽错位和合并行失效问题
startbootstrap-sb-admin-gh-pages 免费模板 ,可以根据模板搭建自己的页面
FastAdmin使用bootstrap-table作为前端表格的基础组件库,通常列表交互展示已经够用了,包括通用搜索、排序、分页、导出、合并相同行/列等等。最近需要对表头进行冻结,找到了bootstrap-table-fixed-columns组件(也...
如有使用疑问,联系本人,如有使用疑问,
bootstrap-table样式固定列js插件,在网上看到下载资源比较少,免费提供给大家下载使用,方便开发进度。
bootstrap-table实现 行拖拽 插件 jquery.tablednd.js bootstrap-table-reorder-rows.js bootstrap-table-reorder-rows.css
startbootstrap-clean-blog-jekyll, 一个全新的博客主题 Jekyll Bootstrap 启动 Bootstrap 博客官方版本博客是一个时尚的,反应性的博客主题,为 Bootstrap 创建,由启动 Bootstrap 。 这个主题有一个博客主页,关于...
BootStrapTable行内编辑;压缩包内包含行内编辑所需要的js+css; BootStrapTable行内编辑;压缩包内包含行内编辑所需要的js+css;
bootstrap-table-reorder-rows.js ,bootstraptable行拖动
angulr-bootstrap-admin-web-app-with-angularjs 2.0版本来拉。由于最近比较忙所有没有持续更新这个版本。在此特地发一下2.0.1版本的。如果有需要我之前版本的请查看我的资源,移驾之前的资源。绝对官网下载的完整包...
解决bootstrap时间控件显示中文问题~~~~~~~~~~~~~~~~~~~~~~~~~~~~
bootstrap table实现合并单元格效果,切换第二页也合并单元格效果,需要依赖于bootstrap-table.js,bootstrap table.css
bootstrap-table-fixed-columnsbootstrap-table-fixed-columnsbootstrap-table-fixed-columns
赠送jar包:swagger-bootstrap-ui-1.9.6.jar; 赠送原API文档:swagger-bootstrap-ui-1.9.6-javadoc.jar...人性化翻译,文档中的代码和结构保持不变,注释和说明精准翻译,请放心使用。 双语对照,边学技术、边学英语。
bootstrap-wpf-style-master 样式代码 。。。。。。。。