媒体查询之一物理像素的设置

最新推荐文章于 2025-06-25 11:39:50 发布

原创最新推荐文章于 2025-06-25 11:39:50 发布 · 1.4k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#响应式 #浏览器 #布局

html基础知识点专栏收录该内容

8 篇文章

订阅专栏

本文深入探讨了响应式布局中的媒体查询，解释了如何利用@media设置不同屏幕尺寸下的样式，以实现页面在不同终端上的适应性渲染。内容详细介绍了媒体查询的语法，包括媒体类型如all、print、screen等，以及width、min-width和max-width等媒体特性。此外，文章还提出了在不同像素密度屏幕下创建一物理像素边框的设计需求，展示了如何在HTML和CSS中应用这些概念。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

响应式布局

响应式布局
- 媒体查询
- 媒体查询的应用一物理像素

媒体查询

使用 @media 查询，你可以针对不同的媒体类型定义不同的样式，使页面在不同在终端设备下达到不同的渲染效果；
@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的；
当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面；
媒体查询的语法：
```
@media 媒体类型 and （媒体特性）{包含正常的css样式内容}；
@media only 媒体类型 and （媒体特性）{}
```
- 示例：
```
@media only tv{
    #test{
            background: yellow;
        }
    }
```
- 使用媒体查询必须要使用“@media”开头，然后指定媒体类型（也可以称为设备类型），随后是指定媒体特性（也可以称之为设备特性）；
- 媒体特性的书写方式和样式的书写方式非常相似，主要分为两个部分，第一个部分指的是媒体特性，第二部分为媒体特性所指定的值，而且这两个部分之间使用冒号分隔；
- 但与CSS属性不同的是，媒体特性是通过min/max来表示大于等于或小于做为逻辑判断，而不是使用小于（<）和大于（>）这样的符号来判断。
媒体类型
- all，用于所有设备
- print，用于打印机和打印预览
- screen，用于电脑屏幕，平板电脑，智能手机等。
- speech，应用于屏幕阅读器等发声设备
媒体特性
- width：当前的宽度等于某个值时，样式生效；
- min-width：最小宽度，指的是媒体类型大于或等于指定宽度时，样式生效；
- max-width：最大宽度，是媒体特性中最常用的一个特性，其意思是指媒体类型小于或等于指定的宽度时，样式生效。
```
//意思：当屏幕宽度小于200px时，执行代码块中的逻辑；
@media only screen and (max-width:200px ){
    #test{
        background: yellow;
    }
}
```
关键字
- and关键词，用于合并多个媒体属性或合并媒体属性与媒体类型。
- not关键词，使用关键词“not”是用来排除某种制定的媒体类型，也就是用来排除符合表达式的设备。换句话说，not关键词表示对后面的表达式执行取反操作。
- only关键词，用来指定某种特定的媒体类型，可以用来排除不支持媒体查询的浏览器。

媒体查询的应用：一物理像素

需求：设计出一物理像素的边框，适用于像素密度比为2，或者像素密度比为3的屏幕；

html框架：

<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"/>
        <link rel="stylesheet" type="text/css" href="css/mixin.css"/>
        <title></title> 
    </head>
    <body>
        <div id="wrap">
        </div>
    </body>
</html>

less文件：只写出上边框，下边框同理

*{
    margin: 0;
    padding: 0;
}
//设置公共混入样式
.onePX(@_,@bgc:black){
    position: relative;
    &:before{
        position: absolute;
        content: "";
        display: block;
        width: 100%;
        height: 1px;
        //使用媒体查询，进行像素比2和3的屏幕适配。
        @media only screen and (-webkit-min-device-pixel-ratio:2){
            transform: scaleY(.5);
        }
        @media only screen and (-webkit-min-device-pixel-ratio:3){
            transform: scaleY(.3333333);
        }
    }
}
.onePX(top,@bgc:black){
    &:before{
        background-color: @bgc;
        top: 0;
    }
}

#wrap{

    width: 100px;
    height: 100px;
    background-color: pink;
    .onePX(top,red)
}

css文件

* {
  margin: 0;
  padding: 0;
}

#wrap {

  width: 100px;
  height: 100px;
  background-color: pink;
  position: relative;
}

#wrap:before {

  position: absolute;
  content: "";
  display: block;
  width: 100%;
  height: 1px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
  #wrap:before {
    transform: scaleY(0.5);
  }
}
@media only screen and (-webkit-min-device-pixel-ratio: 3) {
  #wrap:before {
    transform: scaleY(0.3333333);
  }
}

#wrap:before {

  background-color: #ff0000;
  top: 0;
}