twitter bootstrap 有屏和无屏的区别

Posted 2023-03-06

【中文标题】twitter bootstrap 有屏和无屏的区别

【英文标题】：the difference between screen and no screen in twitter bootstrap

【发布时间】：2013-08-23 10:20:43

【问题描述】：

我正在使用 Twitter Bootstrap 来响应式网站，但我不明白两者之间的区别

@media screen and (min-width: 768px)

@media（最小宽度：768px）

“屏幕”与否？有什么帮助吗？

【问题讨论】：

可能重复***.com/questions/8549529/…

【参考方案1】：

http://www.w3.org/TR/CSS21/media.html#at-media-rule

@media screen 是电脑屏幕，所以

第一条规则仅适用于分辨率宽度至少为 768 像素的计算机屏幕。

第二条规则仅适用于宽度 >=768px 的设备，包括具有足够高分辨率的平板电脑、手机、打印机等。

【参考方案2】：

screen 是一种媒体类型，表示该规则将在计算机屏幕上使用。没有它，这只是一般规则，适用于所有媒体类型。

【参考方案3】：

浏览器将自己标识为“屏幕”类别。

规格 适用于特定媒体类型（“屏幕”）的设备，屏幕主要用于彩色计算机屏幕。所以它大致识别现代设备桌面智能手机等

因此它适用于不同分辨率的彩色计算机屏幕，例如

移动

仅屏幕和（最小宽度：480px）

平板电脑

只有屏幕和（最小宽度：768px）

桌面

仅屏幕和（最小宽度：992px）

巨大

只有屏幕和（最小宽度：1280px）