好吧问答库 > 现在手机分辨率已经达到1000px以上，接近电脑的分辨率，那么响应式网站如何区分手机和电脑来自适应宽度？

现在手机分辨率已经达到1000px以上，接近电脑的分辨率，那么响应式网站如何区分手机和电脑来自适应宽度？

如题，比如bootstrap，那么.col-xs-* 超小屏幕如手机（<768px）时使用； .col-sm-* 小屏幕如平板（768px ≤ 宽度＜992px）时使用； .col-md-* 中等屏幕如普通显示器（992px ≤ 宽度＜ 1200px）时使用； .col-lg-* 大屏幕如大显示器（≥1200px）时使用。以上，如何调用区分？

2026年09月25日 17:24

有5个网友回答

网友（1）：

显示分辨率（屏幕分辨率）是屏幕图像的精密度，是指显示器所能显示的像素有多少。由于屏幕上的点、线和面都是由像素组成的，显示器可显示的像素越多，画面就越精细，同样的屏幕区域内能显示的信息也越多，所以分辨率是个非常重要的性能指标之一。可以把整个图像想象成是一个大型的棋盘，而分辨率的表示方式就是所有经线和纬线交叉点的数目。显示分辨率一定的情况下，显示屏越小图像越清晰，反之，显示屏大小固定时，显示分辨率越高图像越清晰。

网友（2）：

响应式布局
响应式布局是Ethan Marcotte在2010年5月份提出的一个概念，一个网站能够兼容多个终端，而不是为每个终端做一个特定的版本，不需要分配子域名。
可以为不同终端的用户提供更加舒适的界面和更好的用户体验，而且随着目前大屏幕移动设备的普及，用大势所趋来形容也不为过。
响应式布局能够兼容不同屏幕分辨率、清晰度以及屏幕定向方式竖屏(portrait)、横屏(landscape)，不同尺寸下弹性显示不同的响应式内容（图片、多媒体）
设计思路：移动优先：一切从最小屏幕的手机端开始（比如 iPhone 的 320px ），先确定内容，然后逐级往大屏幕设计。不同于原来网页设计，总是从桌面电脑的 1024px 开始的。
响应式布局页面
自适应布局
自适应网页设计（Responsive Web Design）指能使网页自适应显示在不同大小终端设备上新网页设计方式及技术。
很多网站的解决方法，是为不同的设备提供不同的网页，比如专门提供一个mobile版本，或者iPhone / iPad版本。这样做固然保证了效果，但是比较麻烦，同时要维护好几个版本，而且如果一个网站有多个portal（入口），会大大增加架构设计的复杂度。
布局区别
理论上来说，响应式布局在任何情况下都比自适应布局好一些，但自适应布局有它自己的优势，因为它们实施起来代价更低，测试更容易，在资源有限的情况下这往往让他们成为更切实际的解决方案。自适应布局可以让你的设计更加可控，因为你只需要考虑了了几种状态就万事大吉了。
响应式布局中你可能需要面对非常多状态，大部分状态之间的区别很小，但它们又的确是不同的，这样一来就很难确切搞清你的设计会是什么样。
通过允许表面上的不确定因素存在，你可以获得更高层次上的确定。虽然你无法在精确到像素级别准确预知你的设计如何在943px×684px视觉区域汇中展示，但你能确定的是它们一定能展示的很好——不管是表层特征还是布局结构都有条不紊。
PC互联网加速向移动端迁移：2012年12月底我国网民规模达到5.64亿，互联网普及率为42.1%，手机用户占网民总数的74.5%。2015年，移动互联网的数据流量超越PC端的流量。
响应式布局优缺点

网友（3）：

研究这个干嘛

网友（4）：

.显示分辨率（屏幕分辨率）是屏幕图像的精密度，是指显示器所能显示的像素有多少。由于屏幕上的点、线和面都是由像素组成的，显示器可显示的像素越多，画面就越精细，同样的屏幕区域内能显示的信息也越多，所以分辨率是个非常重要的性能指标之一。可以把整个图像想象成是一个大型的棋盘，而分辨率的表示方式就是所有经线和纬线交叉点的数目。显示分辨率一定的情况下，显示屏越小图像越清晰

网友（5）：

响应式布局百度一下就行，CSDN或者博客园都有很详细的解释了