浏览器的地址栏尺寸是否会影响CSS媒体查询？

While I was writing media queries for my website, I though about this: Does the browser's address bar affect the CSS media queries?

当我在为我的网站编写媒体查询时,我对此有所了解:浏览器的地址栏是否会影响CSS媒体查询?

When I code this:

当我编码时:

/* Portrait */
@media screen 
  and (device-width: 320px) 
  and (device-height: 640px)  
  and (orientation: portrait) {

}

Am I considering the height of the address bar of the browsers? Does the address bar subtract pixels to screen viewport?

我在考虑浏览器地址栏的高度吗?地址栏是否将像素减去屏幕视口?

Do I have to consider this media query?

我是否必须考虑此媒体查询?

/* Portrait */
@media screen 
  and (device-width: 320px - <AddressBarHeight>) 
  and (device-height: 640px - <AddressBarHeight>)  
  and (orientation: portrait) {

}

3 个解决方案

#1

device-height and device-width have nothing to do with what is displayed on the screen. They only reflect the overall dimensions of the screen as a whole.

设备高度和设备宽度与屏幕上显示的内容无关。它们仅反映整个屏幕的整体尺寸。

device-width

The ‘device-width’ media feature describes the width of the rendering surface of the output device. For continuous media, this is the width of the screen. For paged media, this is the width of the page sheet size.

“设备宽度”媒体功能描述了输出设备的渲染表面的宽度。对于连续介质,这是屏幕的宽度。对于分页媒体,这是页面大小的宽度。

device-height

The ‘device-height’ media feature describes the height of the rendering surface of the output device. For continuous media, this is the height of the screen. For paged media, this is the height of the page sheet size.

“device-height”媒体功能描述了输出设备渲染表面的高度。对于连续媒体,这是屏幕的高度。对于分页媒体,这是页面大小的高度。

– Media Queries W3C Recommendation

- 媒体查询W3C建议书

Example

As an example, I'm using a 1920x1080px monitor. Using a media query which targets a device-width of exactly 1920px and a device-height of exactly 1080px, the below code snippet on my monitor will display a red background, even though the snippet itself is confined to a much smaller area (660x201px):

例如,我使用的是1920x1080px显示器。使用媒体查询,其目标设备宽度为1920px,设备高度为1080px,我的显示器上的下面代码片段将显示红色背景,即使片段本身仅限于更小的区域(660x201px) :

@media (device-width: 1920px) and (device-height: 1080px) {
  body {
    background: red;
  }
}

3 个解决方案

#1

device-width

device-height

Example

更多相关文章

随机推荐