css – bootstrap如何在全高清(1920×1080)手机上工作？

Bootstrap tutorial表示,包括移动设备的.col-xs- *(< 768px).我的问题是,如果我使用.col-xs- *类为小型移动设备制作一个网站,那么CSS规则将仅适用于宽度小于768px的那些设备.现在有全高清移动电话在5寸显示屏上有宽1080px.那么这些移动设备是否可以作为桌面计算机(≥992px)用于我的引导css？我希望我的css对于任何5英寸屏幕移动设备是一样的,无论是高清还是全高清.

解决方法

TL; DR

CSS像素不等于物理像素.让每个设备/浏览器知道应该如何显示您的内容,很可能他们会正确的.

游览：引导媒体查询

首先,我们来看看Bootstrap如何工作.在某个标准的bootstrap.css中,你会发现这个代码(为了简单起见,稍作修改和缩短)：

/* Extra small devices (phones,less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets,768px and up) */
@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops,992px and up) */
@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops,1200px and up) */
@media (min-width: @screen-lg-min) { ... }

代码从official bootstrap docs年直接借来.

你的屏幕有什么分辨率？

那么您的浏览器如何确定哪些媒体查询是相关的？我们假设它现在有一个我想称之为magicalWidth的属性.

您的浏览器比magicalWidth与@media(min-width：@ screen-sm-min)进行比较,如果magicalWidth大于或等于@ screen-sm-min,则将{…}中的所有定义考虑在内,否则它只是忽略它们.所有其他媒体查询也是一样.

现在,什么是magicalWidth？我可以告诉你,(物理)像素的屏幕或浏览器窗口的宽度很可能不是. CSS使用逻辑像素的概念来计算任何测量值,我们的上面的magicalWidth就是逻辑像素中设备或浏览器窗口的宽度.你可以很容易地自己测试一下,看下面的例子：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<div class="container">
  <div class="col-sm-6 col-md-4 col-lg-3" style="background-color:#f00;">Test 1</div>
  <div class="col-sm-6 col-md-4 col-lg-3" style="background-color:#ff0;">Test 2</div>
  <div class="col-sm-6 col-md-4 col-lg-3" style="background-color:#0f0;">Test 3</div>
  <div class="col-sm-6 col-md-4 col-lg-3" style="background-color:#0ff;">Test 4</div>
</div>

如果您在计算机上完全看这个并放大,您会注意到布局如何更改,直到所有列都堆叠(即小尺寸显示器的默认行为),即使您没有更改屏幕分辨率或浏览器窗口的大小.

同样的情况也适用于您的手机：渲染内容时,您的浏览器不会使用物理像素,而是使用逻辑像素来确定屏幕的大小.

视口元标记

要做到这一点,它将创建一个虚拟视口,在那里渲染内容,之后将其缩放到屏幕的大小.现在您可以决定该视口的大小

<Meta name="viewport" content="width=...">

…可以是一个固定的大小,例如

<Meta name="viewport" content="width=600">

将导致所有呈现的虚拟视口为600像素宽. …也可以是特殊尺寸的设备宽度,这意味着视口与逻辑像素中的屏幕一样宽. Bootstrap建议使用以下视口标签：

<Meta name="viewport" content="width=device-width,initial-scale=1">

所以我们有width = device-width.另一部分initial-scale = 1表示您的页面最初应以100％的缩放级别呈现.

有关更深入的解释,请参阅MDN article on viewport.

物理和逻辑之间的比率

还有一个名为device-pixel-ratio的东西可以决定物理和逻辑像素之间的比例.因此,例如,如果您的手机具有全高清屏幕,并且设备像素比为3,则其逻辑分辨率将为(1920/3)x(1080/3)= 640×360,并且远低于Bootstraps最低断点.如果设备像素比为2,则逻辑分辨率为960×540.

btw：您也可以在媒体查询中使用device-pixel-ratio：

@media (min-device-pixel-ratio:2) { ... }

底线

使用Bootstrap或一些其他响应框架或您自己的媒体查询,但您希望,让每个设备/浏览器了解应如何显示您的内容,很可能他们会正确的(但这并不意味着你不应该运行测试以确保)

原文地址：https://www.jb51.cc/css/217094.html