`

Bootstrap的宽度和分辨率的差别-20140514

 
阅读更多
首先在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()); 


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

相关推荐

    fixed-columns

    在网页设计和开发中,"fixed-columns"是一个常见的概念,特别是在处理数据密集型的应用场景,如数据表或者报表展示。这个特性允许用户在滚动浏览长表格时,将某些列(通常是列头)固定在屏幕的一侧,使得这些关键...

    bootstrap-layout-xl-xxl:2 大屏幕尺寸

    总之,`bootstrap-layout-xl-xxl` 是一个增强 Bootstrap 3 大屏幕布局能力的工具,通过添加 `xl` 和 `xxl` 两个断点,为开发者提供了更多的灵活性和自定义空间,以满足不断变化的设备需求。在实际开发中,结合其提供...

    bootstrap-3.3.0-source

    Bootstrap是世界上最受欢迎的前端开发框架之一,主要用于构建响应式布局和移动设备优先的Web项目。这个"bootstrap-3.3.0-source"压缩包显然包含了Bootstrap框架的源代码,版本为3.3.0,这使得开发者能够深入了解其...

    bootstrap-4.zip

    框架中的网格系统允许开发者轻松地调整元素的宽度,以在不同分辨率下保持良好的视觉效果。此外,Bootstrap 4 提供了一套预定义的断点,用于根据设备屏幕大小应用不同的样式。 HTML 和 CSS 组件是 Bootstrap 4 的...

    Bootstrap自动适应PC、平板、手机的Bootstrap栅格系统

    Bootstrap栅格系统的核心原理是通过预定义的CSS类来控制元素的宽度和排列方式,使得在不同分辨率的设备上,元素可以自动调整其尺寸和位置。 在Bootstrap中,栅格系统使用`.row`类定义一行,并使用`.col-*-*`类来...

    bootstrap 2.3.2源码包

    Bootstrap是世界上最流行的前端开发框架之一,它为开发者提供了丰富的组件和样式,用于快速构建响应式、移动优先的网站。在Bootstrap 2.3.2这个版本中,我们回到了一个更早的时代,那时对IE6-8的支持仍然是许多企业...

    bootstrap-2.3.1.源代码

    6. **字体图标**:Bootstrap 2.3.1引入了一套名为Glyphicons的字体图标库,这些图标是矢量图形,可以在所有分辨率下保持清晰,且可以改变大小和颜色,为网页设计增添了视觉吸引力。 7. **定制工具**:Bootstrap提供...

    Bootstrap响应式注册登录界面模板

    这个模板的特点在于其响应式设计,能够自动适应不同设备的屏幕分辨率,无论是大屏的个人电脑还是小屏的移动设备,都能保证良好的用户体验。 Bootstrap框架的核心在于其栅格系统,该系统通过12列的布局模式帮助...

    《响应式Web开发项目教程(HTML5+CSS3+Bootstrap)》-教学PPT.rar

    1. 响应式设计基础:解释响应式设计的概念,展示不同设备的屏幕尺寸和分辨率,以及如何通过流体布局和媒体查询实现响应式。 2. HTML5新特性:深入讲解HTML5的新标签、API和多媒体元素的用法,以及如何提升网页性能和...

    bootstrap3.3

    Bootstrap3.3是一款广泛使用的前端开发框架,由Twitter公司开源,旨在简化网页设计和开发流程。这个压缩包包含了Bootstrap 3.3版本的所有核心组件,包括CSS、JavaScript和可选的字体图标,使得开发者能够快速构建...

    Bootstrap 模板.md

    - **定义**:Bootstrap 是一个广泛使用的开源前端框架,它为开发者提供了大量的预定义样式和组件,能够帮助快速构建美观且响应式的网站及 Web 应用程序。 - **特性**: - **响应式设计**:内置对各种屏幕尺寸的支持...

    解决__让网页适应不同的浏览器和分辨率

    标题中的“解决__让网页适应不同的浏览器和分辨率”暗示了我们正在讨论网页的响应式设计和跨浏览器兼容性问题。响应式设计是现代网页开发的关键技术,它允许网站在不同设备和屏幕尺寸上提供一致且良好的用户体验。而...

    BootStrap入门教程.pdf

    自2011年诞生以来,Bootstrap迅速获得了广泛的关注和使用,其在GitHub上的活跃度和代码贡献量极高,社区非常活跃。Bootstrap基于HTML、CSS和JavaScript,支持响应式设计,并且拥有大量预定义的组件,可以帮助开发者...

    图片适应任何分辨率,任何浏览器(CSS)

    在网页设计中,确保图片能够适应各种分辨率和不同的浏览器是一项重要的任务。CSS(Cascading Style Sheets)提供了强大的工具来实现这一目标。本资源提供的"kk.htm"文件可能是一个示例网页,它演示了如何利用CSS使...

    Bootstrap中文文档

    2. **响应式布局:**Bootstrap的响应式设计意味着它能够适应不同分辨率的屏幕,无论是PC端、平板电脑还是移动设备,用户都可以获得良好的浏览体验。 3. **全面的组件:**Bootstrap为开发者提供了大量的组件,如导航...

    bootstrap响应式旅游网站

    响应式设计是现代网站开发的关键,它允许网站在不同分辨率和屏幕尺寸的设备上呈现出良好的视觉效果和可用性。Bootstrap通过媒体查询(Media Queries)和灵活的网格系统实现这一目标。媒体查询允许根据设备的特定宽度...

Global site tag (gtag.js) - Google Analytics