当前位置： 首页 > news >正文

CSS - 响应式布局（一）媒体查询

news 来源：原创 2024/5/19 15:01:14

目录

响应式布局

引子

理解响应式网页和响应式布局原理

媒体查询

什么是媒体查询？

什么是媒体类型？

什么是媒体特性？

媒体查询语法

仿三星官网首页

响应式布局

引子

通过前面两节的学习

CSS - 移动端布局（一）关键的前置知识_伏城之外的博客-CSDN博客

CSS - 移动端布局（二）移动端适配_伏城之外的博客-CSDN博客

我们已经了解如何开发能够适配移动端屏幕的网页，普适策略是使用meta viewport + rem布局 或 vw布局，但是这样开发出来的网页也仅仅只能适配移动端屏幕

 而无法适配PC端屏幕，当我们在PC端屏幕查看移动WEB网页时，实际效果如下：

导致移动网页在PC端显示效果不佳的原因是因为：

  • 移动WEB网页的宽度一般取移动浏览器视觉视口的宽度，当移动WEB网页在PC浏览器显示时，则其宽度也是取PC浏览器视觉视口的宽度，因此移动WEB网页在PC浏览器显示时会占满全屏
  • 移动WEB网页的布局尺寸一般都是动态尺寸，比如rem尺寸，vw尺寸，这些尺寸都与浏览器的视觉视口的宽度正相关，因此当浏览器从移动端的窄视口变为PC端的宽视口时，移动WEB网页的布局尺寸将同比放大，用户最直观的感受就是在PC浏览器上，移动WEB网页被放大了

因此，网站一般会避免用户在PC端访问移动WEB网页，同理，网站也会避免将PC网页放在移动端设备上展示，处理策略是：

  • 设计两套网页，一套PC WEB网页，一套移动WEB网页
  • 当用户访问网站网页时，网站服务器会判断用户发送的请求是来自PC浏览器，还是移动浏览器（根据HTTP请求头中的User-Agent），如果是移动浏览器，则响应移动WEB网页，如果是PC浏览器，则响应PC WEB网页

当请求来自PC浏览器时，请求头中User-Agent信息如下

当请求来自移动浏览器时，请求头中User-Agent信息如下 

但是这种处理策略，需要网站维护两套网页，甚至维护两套网站，在设计、开发和运维成本上都是double的，这是缺点。当然烧钱的东西，肯定是有优点的，如果维护两套网站的话，即一套服务于PC端用户的网站，一套服务于移动端用户的网站，公司就可以根据用户流量来合理安排服务器资源，避免资源浪费或资源竞争，另外对于前端开发来说不需要在一个网页中同时实现适配PC浏览器和移动浏览器，开发难度也会大大降低。

当然，上面这种策略是大公司、大网站才需要玩的，对于小公司，小网站来说，这种烧钱的策略是没必要的。因此，一套网页同时支持适配PC和移动端的技术是有必要研究的，而我们将同时能够适配PC端和移动端的网页称为响应式网页。

理解响应式网页和响应式布局原理

三星电子 中国 | 三星手机 | 电视 | 显示器 固态硬盘 | 冰箱 洗衣机等产品官网 (samsung.com)

三星的官网首页就是一个响应式网页，即该网页既支持适配PC端，又支持适配移动端。

如下是该网页在PC端1920x1080分辨率下的显示效果

如下是该网页在平板768x1024分辨率下的显示效果

如下是该网页在手机375x812分辨率下的显示效果

我们可以发现，响应式网页无论在PC端，还是在平板、手机这些移动端设备上都能够实现良好适配，并且这种适配并不需要改变网页的内容结构（HTML），只需要改变网页内容的布局（CSS），比如上面三个截图中网页的内容并未发生改变，只是网页内容的布局发生了改变。

而我们将可以随着浏览器视觉视口分辨率的改变而改变的网页布局，称为响应式布局。

因此响应式布局的原理很简单，那就是监听浏览器视觉视口宽度的变化，当浏览器视觉视口宽度变化到一定程度或一定范围内时，网页的布局就改变，即网页采用另一套样式。

而监听浏览器视觉视口宽度的变化，我们最先想到的就是通过JS的事件，如window.onload和window.onresize，下面我们来通过JS实现一个简单的响应式布局

JS事件监听触发响应式布局-Javascript文档类资源-CSDN文库

HTML部分

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
    </style>
    <link rel="stylesheet" id="responsive" />
    <script>
      const selectStyle = () => {
        const viewportWidth = document.documentElement.clientWidth;
        const stylesheet = document.querySelector("#responsive");

        if (viewportWidth >= 1440) {
          stylesheet.href = "./min1440.css";
        } else if (viewportWidth >= 768) {
          stylesheet.href = "./min768.css";
        } else {
          stylesheet.href = "./max768.css";
        }
      };

      window.onload = selectStyle;
      window.onresize = selectStyle;
    </script>
  </head>
  <body>
    <br />
    <div class="w">
      <div class="footer-nav">
        <input type="checkbox" id="product-service" style="display: none" />
        <dl>
          <dt><label for="product-service">产品与服务</label></dt>
          <dd>智能手机</dd>
          <dd>智能平板</dd>
          <dd>音频设配</dd>
          <dd>智能手表</dd>
          <dd>S 换机助手</dd>
          <dd>智能产品配件</dd>
          <dd>电视</dd>
          <dd>冰箱</dd>
          <dd>洗衣机</dd>
          <dd>空调</dd>
          <dd>显示器</dd>
          <dd>存储产品</dd>
        </dl>
        <input type="checkbox" id="purchase-channels" style="display: none" />
        <dl>
          <dt><label for="purchase-channels">购买渠道</label></dt>
          <dd>最新活动</dd>
          <dd>网上商城</dd>
          <dd>三星Galaxy授权体验店</dd>
          <dd>电视/影音产品门店查询</dd>
          <dd>冰箱/洗衣机产品门店查询</dd>
          <dd>非全新机</dd>
          <dd>官方翻新机</dd>
        </dl>
        <input type="checkbox" id="service-support" style="display: none" />
        <dl>
          <dt><label for="service-support">服务支持</label></dt>
          <dd>在线服务</dd>
          <dd>邮件咨询</dd>
          <dd>联系我们</dd>
          <dd>服务中心查询</dd>
          <dd>体验反馈</dd>
          <dd>ECO信息</dd>
          <dd>三星中国开发者</dd>
          <dd>专属管家服务</dd>
          <dd>尊贵管家服务</dd>
        </dl>
        <input type="checkbox" id="about-us" style="display: none" />
        <dl>
          <dt><label for="about-us">关于我们</label></dt>
          <dd>公司介绍</dd>
          <dd>业务范围</dd>
          <dd>品牌标识</dd>
          <dd>人才招聘</dd>
          <dd>投资者关系</dd>
          <dd>新闻中心</dd>
          <dd>伦理道德</dd>
        </dl>
      </div>
    </div>
  </body>
</html>

min1440.css

/* 当浏览器视觉视口宽度 >= 1440 时，采用如下样式 */

.w {
  width: 1440px;
  margin: 0 auto;
}

.footer-nav {
  width: 100%;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;

  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 1fr;
}

.footer-nav > dl:not(:last-child) {
  padding-bottom: 32px;

  border-right: 1px solid #ddd;
}

.footer-nav > dl > dt {
  padding: 16px 24px;

  font-size: 18px;
  font-weight: bold;
}

.footer-nav > dl > dd {
  padding: 7px 24px;

  font-size: 14px;
  cursor: pointer;
}

.footer-nav > dl > dd:hover {
  text-decoration: underline;
  color: #1428a0;
}

min768.css

/* 当浏览器视觉视口宽度在 [768, 1440) 时，采用如下样式 */

.w {
  width: 100%;
}

.footer-nav {
  width: 100%;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;

  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 1fr;
}

.footer-nav>dl:not(:last-child) {
  padding-bottom: calc(100vw / 1440 * 32);

  border-right: 1px solid #ddd;
}

.footer-nav>dl>dt {
  padding: calc(100vw / 1440 * 16) calc(100vw / 1440 * 24);

  font-size: calc(100vw / 1440 * 18);
  font-weight: bold;
}

.footer-nav>dl>dd {
  padding: calc(100vw / 1440 * 7) calc(100vw / 1440 * 24);

  font-size: calc(100vw / 1440 * 14);
  cursor: pointer;
}

.footer-nav>dl>dd:hover {
  text-decoration: underline;
  color: #1428a0;
}

 max768.css

/* 当浏览器视觉视口宽度 < 768 时，采用如下样式 */

.w {
  width: 100%;
}

.footer-nav {
  width: 100%;
  border-top: 1px solid #ddd;
}

.footer-nav > dl > dt {
  margin: 0 calc(100vw / 767 * 25);
  padding: calc(100vw / 767 * 36) calc(100vw / 767 * 25);
  border-bottom: 1px solid #ddd;

  font-size: calc(100vw / 767 * 34);
  font-weight: 700;
}

.footer-nav > dl > dt > label {
  cursor: pointer;
  user-select: none;
}

.footer-nav > dl > dd {
  display: none;

  padding: calc(100vw / 767 * 21) calc(100vw / 767 * 59.6) calc(100vw / 767 * 21) calc(100vw / 767 * 68);

  font-size: calc(100vw / 767 * 29.8);
  cursor: pointer;
}

.footer-nav > dl > dd:hover {
  text-decoration: underline;
  color: #1428a0;
}

#product-service:checked + dl > dd,
#purchase-channels:checked + dl > dd,
#service-support:checked + dl > dd,
#about-us:checked + dl > dd {
  display: block;
}

#product-service:checked + dl > dt,
#purchase-channels:checked + dl > dt,
#service-support:checked + dl > dt,
#about-us:checked + dl > dt {
  border-bottom: none;
}

实现效果如下：

当浏览器视觉视口宽度 >= 1440 时

当浏览器视觉视口宽度在 [768, 1440) 时 

 

当浏览器视觉视口宽度 < 768 时 

 通过上面的实操，我们可以总结出响应式布局的实现原理，其实就是为一个网页结构设计多套样式，这里的多套样式需要能够使网页适配不同分辨率的屏幕。

但是，上面通过JS监听浏览器视觉视口宽度变化的方式促发响应式布局，非常不优雅，而当我们使浏览器视觉视口resize时，网页布局会出现抖动，这里的抖动其实是：JS监听到了视觉视口的宽度变化，然后触发onresize事件回调，卸载当前样式文件，然后加载新的样式文件。

而闪动的原因就是JS卸载样式文件时，网页会处于无样式的裸奔状态，虽然时间很短，但是也会出现，而后加载完新的样式文件后，网页有了样式，当视觉视口不断地resize时，网页就会不断卸载样式、加载样式，此时我们就可以看到明显的布局抖动。

 因此，通过JS来触发响应式布局，并不是一种好的方式。

为了实现平滑、顺畅、无抖动的响应式布局，CSS3推出了媒体查询。

媒体查询

什么是媒体查询？

媒体查询，即media query，它是一种CSS语法，支持：

  • 针对不同的媒体类型（media type）定义不同的样式
  • 针对某媒体类型下不同的媒体特性（media feature）定义不同的样式

什么是媒体类型？

早期，网页不仅可以在电脑浏览器上显示，还可以在打印机中打印，还可以在投影仪上投影，以及在电视上显示等等，而这里的电脑、打印机、投影仪、电视就是媒体，后期，网页越来越多地在手机、平板等移动端设备上显示，而这里地手机、平板也是媒体，为了更好的区分这些媒体，CSS将它们划分为了以下几个媒体类型：

  • screen ：屏幕媒体，包括电脑、手机、平板
  • print：打印媒体，如打印机
  • projection：投影媒体，如投影仪
  • tv：电视媒体，如电视
  • all：所有媒体

但是，上述几个媒体类型中投影媒体和电视媒体几乎已经不用了，因此主要的媒体类型就三个 screen、print、all，其中screen是最最常用的媒体类型。

什么是媒体特性？

我们大多只关注screen媒体类型的媒体特性，screen媒体类型的常用特性有如下三个：

min-width视觉视口的最小宽度
max-width视觉视口的最大宽度
orientation屏幕处于横屏（landscape）还是竖屏（portrait）

媒体查询语法

媒体查询可以定义在三个地方：

  • link标签属性中
  • @import url语法中
  • @media语法中

link标签属性中定义媒体查询的语法如下：

<link rel="stylesheet" href="./min1440.css" media="screen and (min-width: 1440px)">
<link rel="stylesheet" href="./min768.css" media="screen and (min-width: 768px) and (max-width: 1439px)">
<link rel="stylesheet" href="./max768.css" media="screen and (max-width: 767px)">

将媒体查询定义在link标签的media属性中，如上三个link标签的含义分别为：

  • 当媒体类型为screen时（即电脑、手机、平板），且(and语义) 浏览器视觉视口宽度最小不低于1440px时（即≥1440px），应用./min1440.css到网页中
  • 当媒体类型为screen时，且浏览器视觉视口宽度范围在  [768px, 1439px] 时，应用./min768.css到网页中
  • 当媒体类型为screen时，且浏览器视觉视口宽度最大不超过 767px时（即≤767px），应用./max768.css到网页中

link标签定义媒体查询不是一种推荐方式，当存在大量媒体查询时，会产生大量link标签，这样不仅不美观，还会阻塞JS的加载执行，进而影响整体网页的渲染速度。

@import url语法定义媒体查询的语法如下：

@import url可以定义在HTML的style标签中，也可以定义在css文件中

<style>
  @import url(./min1440.css) screen and (min-width: 1440px);
  @import url(./min768.css) screen and (min-width: 768px) and (max-width: 1439px);
  @import url(./max768.css) screen and (max-width: 767px);
</style>

上面三句@import中添加的媒体查询含义和前面一致

由于@import会等到所有JS加载执行完毕后，才会加载css文件，因此不会阻塞网页的渲染，因此我们推荐在@import语法中定义媒体查询。但是@import只能针对样式文件进行操作，不能针对单个样式或局部样式进行操作，因此我们还需要借助第三种媒体查询定义方式@media。

@media定义媒体查询的语法如下：

<style>
  @media screen and (min-width: 1440px) {
    .w {
      width: 1440px;
      margin: 0 auto;
    }

    .footer-nav {
      width: 100%;
      border-top: 1px solid #ddd;
      border-bottom: 1px solid #ddd;

      display: grid;
      grid-template-columns: repeat(4, 1fr);
      grid-template-rows: 1fr;
    }

    .footer-nav > dl:not(:last-child) {
      padding-bottom: 32px;

      border-right: 1px solid #ddd;
    }

    .footer-nav > dl > dt {
      padding: 16px 24px;

      font-size: 18px;
      font-weight: bold;
    }

    .footer-nav > dl > dd {
      padding: 7px 24px;

      font-size: 14px;
      cursor: pointer;
    }

    .footer-nav > dl > dd:hover {
      text-decoration: underline;
      color: #1428a0;
    }
  }

  @media screen and (min-width: 768px) and (max-width: 1439px) {
    .w {
      width: 100%;
    }

    .footer-nav {
      width: 100%;
      border-top: 1px solid #ddd;
      border-bottom: 1px solid #ddd;

      display: grid;
      grid-template-columns: repeat(4, 1fr);
      grid-template-rows: 1fr;
    }

    .footer-nav > dl:not(:last-child) {
      padding-bottom: calc(100vw / 1440 * 32);

      border-right: 1px solid #ddd;
    }

    .footer-nav > dl > dt {
      padding: calc(100vw / 1440 * 16) calc(100vw / 1440 * 24);

      font-size: calc(100vw / 1440 * 18);
      font-weight: bold;
    }

    .footer-nav > dl > dd {
      padding: calc(100vw / 1440 * 7) calc(100vw / 1440 * 24);

      font-size: calc(100vw / 1440 * 14);
      cursor: pointer;
    }

    .footer-nav > dl > dd:hover {
      text-decoration: underline;
      color: #1428a0;
    }
  }

  @media screen and (max-width: 767px) {
    .w {
      width: 100%;
    }

    .footer-nav {
      width: 100%;
      border-top: 1px solid #ddd;
    }

    .footer-nav > dl > dt {
      margin: 0 calc(100vw / 767 * 25);
      padding: calc(100vw / 767 * 36) calc(100vw / 767 * 25);
      border-bottom: 1px solid #ddd;

      font-size: calc(100vw / 767 * 34);
      font-weight: 700;
    }

    .footer-nav > dl > dt > label {
      cursor: pointer;
      user-select: none;
    }

    .footer-nav > dl > dd {
      display: none;

      padding: calc(100vw / 767 * 21) calc(100vw / 767 * 59.6)
        calc(100vw / 767 * 21) calc(100vw / 767 * 68);

      font-size: calc(100vw / 767 * 29.8);
      cursor: pointer;
    }

    .footer-nav > dl > dd:hover {
      text-decoration: underline;
      color: #1428a0;
    }

    #product-service:checked + dl > dd,
    #purchase-channels:checked + dl > dd,
    #service-support:checked + dl > dd,
    #about-us:checked + dl > dd {
      display: block;
    }

    #product-service:checked + dl > dt,
    #purchase-channels:checked + dl > dt,
    #service-support:checked + dl > dt,
    #about-us:checked + dl > dt {
      border-bottom: none;
    }
  }
</style>

在@media中，我们可以为某些媒体类型、媒体特性定义单个或多个样式，灵活性更高。

无论使用哪种方式定义媒体查询，我们需要注意如下几点：

  • 媒体查询中，媒体类型是必要条件，必须定义
  • 媒体查询中，媒体特性是次要条件，可以不定义，如果定义的话，则必须用小括号括起来，且一个小括号中只能定义一个媒体特性
  • 媒体查询中，媒体类型和媒体类型之间，媒体类型和媒体特性之间、媒体特性与媒体特性之间需要使用逻辑操作符用关联，逻辑操作符即常用的“与”、“或”、“非”、“仅”

媒体查询中的逻辑操作符介绍：

  • “与”：and
  • "或"：，
  • “非”：not
  • "仅"：only

我们通过几个实例来理解媒体查询中的逻辑操作符：

@import url(./min768.css) screen and (min-width: 768px) and (max-width: 1439px);

上面媒体查询含义是：当  “媒体类型为screen 且 视觉视口宽度≥768px 且 视觉视口宽度≤1439px” 时，才应用min768.css到网页。

@import url(./min768.css) screen,print;

上面媒体查询含义是：当  “媒体类型为screen 或 print ，才应用min768.css到网页。

@import url(./min768.css) screen and (max-width: 768px), screen and (min-width: 1439px);

上面媒体查询含义是：当 “媒体类型为screen 且 视觉视口宽度≤768px“  或者   “媒体类型为screen 且 视觉视口宽度≥1439px“

我们需要注意的是，”或“逻辑操作符，如果在媒体特性后面加逗号，表示媒体查询结束，逗号后面将定义一个新的媒体查询。

@import url(./min768.css) not screen;

上面媒体查询含义是：如果媒体类型为screen，则不应用样式。

@import url(./min768.css) not screen and  (min-width: 768px) and (max-width: 1439px);

上面媒体查询含义是：如果媒体类型为screen，且视觉视口宽度≥768px， 且视觉视口宽度≤1439px 时，则不应用样式，其余情况则应用样式。

我们需要注意的是not目前只能用于否定整个媒体查询的条件，不能用于否定单个媒体功能表达式，因此not一般写在媒体类型前面。

@import url(./min768.css) only screen and  (min-width: 768px) and (max-width: 1439px);

上面媒体查询含义是：仅在“媒体类型为screen 且 视觉视口宽度≥768px 且 视觉视口宽度≤1439px”时，应用min768.css样式文件到网页。

我们需要注意的是，only只能用于限制整个媒体查询，不能用于限制单个媒体功能表达式，因此only的逻辑操作功能很鸡肋，但是only还有一个妙用，那就是当浏览器不支持媒体功能时，浏览器会忽略除媒体类型之外的媒体查询条件

@import url(./min768.css) screen and  (min-width: 768px) and (max-width: 1439px);

对于上面的媒体查询，低版本浏览器会理解为 @import url(./min768.css) screen，即只要媒体类型是screen，即应用min768.css，显然这是不对的。但是如果我们加上only限定，

@import url(./min768.css) only screen and  (min-width: 768px) and (max-width: 1439px);

则此时低版本浏览器就会被排除在外，无法使用媒体查询暴露的样式。

如果想要制定复杂的媒体查询，可以参考MDN的使用媒体查询 - CSS（层叠样式表） | MDN (mozilla.org)

仿三星官网首页

响应式网页布局-仿三星官网首页-HTML5文档类资源-CSDN文库

在进行响应式网页开发过程中，我们会面临如下问题：

  • 媒体查询的粒度问题

所谓媒体查询的粒度，即媒体查询成功匹配后，加载给网页的样式的是作用于整个网页的，还是作用于网页中某个局部组件的，比如：

上面例子中每个媒体查询的对应样式就是作用于整个网页的。

 上面例子中，媒体查询只针对网页中某个局部组件。

如果从可维护性上来说，媒体查询的粒度越小越好，针对组件定义媒体查询，可以实现分工合作开发，并且发生问题时，可以根据问题所在组件来缩小问题范围，加速问题定位和解决。

如果代码复杂度上来说，媒体查询的粒度越小，则需要的媒体查询就越多，比如前面例子中，针对整个网页的媒体查询只需要4个，而针对组件的媒体查询可能需要 组件个数 x 4，这不仅浪费性能，而且非常容器造成各组件之间媒体查询条件定义不一致，产生混乱。

 因此，媒体查询的粒度大小选择，需要根据实际情况来定。

  • 媒体查询的样式复用问题

无论是针对整体网页的媒体查询，还是针对网页局部组件的媒体查询，都存在样式是否需要复用的问题。

比如三星官网首页的响应式布局中，视觉视口宽度≥1440px  和 视觉视口在[768px, 1439px]范围时，除了尺寸样式的尺寸等比例缩小外，其余样式均不变，这意味着两个媒体查询中存在大量重复的样式定义。

如果[768px, 1439px]媒体查询  复用了 [1440px, +∞)媒体查询 的样式，那么一旦 [1440px, ∞)媒体查询 的样式改变，则会直接影响[768px, 1439px]媒体查询 的样式。

如果不复用的话，媒体查询中则又会产生大量重复定义的样式，但是没有了耦合影响。

此时，我们其实需要关注两个媒体查询对应样式的关联程度，如果关联度高的话，则可以复用；如果关联度低的话，则不要复用。

什么是关联度？

即网页布局的变化是否很大，比如三星官网首页 [1440px, +∞)，变为[768px, 1439px]时，网页布局并未发生较大变化，只是网页内容等比例缩小了而已，此时媒体查询之间就可以复用样式。但是三星官网首页从[768px, 1439px] 变为 [0, 767px] 时，网页布局发生了较大变化，差不多是从PC网页布局变为了移动端网页布局，此时，媒体查询之间就没有了样式复用的必要。

相关文章：

  • 【JAVA预备】课程目录
  • 2022年0902Maven的依赖学习＜第四课＞
  • Android 11 上的文件读写权限(MANAGE_EXTERNAL_STORAGE)
  • Vue模板语法（01）
  • 世界第一台通用计算机：ENIAC
  • JAVA学习----HashSet类
  • 文章组合生成-免费文章组合生成软件
  • 华为面试应该怎么准备？
  • JDBC如何记忆
  • C语言之预处理
  • Flutter 系列---入门篇
  • 全球与中国汽车多楔带行业发展趋向分析及投资前景预测报告2022-2028年
  • Java IO流详解
  • 迷宫_Sarsa算法_边做边学深度强化学习：PyTorch程序设计实践（2）
  • iOS视频捕获入门篇
  • [笔记] php常见简单功能及函数
  • 2019.2.20 c++ 知识梳理
  • 3.7、@ResponseBody 和 @RestController
  • 30天自制操作系统-2
  • Cumulo 的 ClojureScript 模块已经成型
  • Git初体验
  • input的行数自动增减
  • Python学习之路16-使用API
  • STAR法则
  • Theano - 导数
  • 使用 Node.js 的 nodemailer 模块发送邮件（支持 QQ、163 等、支持附件）
  • 译自由幺半群
  • ​【已解决】npm install​卡主不动的情况
  • ​LeetCode解法汇总1276. 不浪费原料的汉堡制作方案
  • ​secrets --- 生成管理密码的安全随机数​
  • ​决定德拉瓦州地区版图的关键历史事件
  • ​如何在iOS手机上查看应用日志
  • #android不同版本废弃api，新api。
  • #QT（智能家居界面-界面切换）
  • (1)Map集合 (2)异常机制 (3)File类 (4)I/O流
  • （4）事件处理——（7）简单事件（Simple events）
  • （二）什么是Vite——Vite 和 Webpack 区别（冷启动）
  • （附源码）ssm基于web技术的医务志愿者管理系统 毕业设计 100910
  • （三）centos7案例实战—vmware虚拟机硬盘挂载与卸载
  • (三分钟了解debug)SLAM研究方向-Debug总结
  • (轉貼) VS2005 快捷键 (初級) (.NET) (Visual Studio)
  • .Net 6.0 处理跨域的方式
  • .Net Attribute详解(上)-Attribute本质以及一个简单示例
  • .net 后台导出excel ,word
  • .NET/C# 反射的的性能数据，以及高性能开发建议（反射获取 Attribute 和反射调用方法）
  • .net生成的类，跨工程调用显示注释
  • @data注解_SpringBoot 使用WebSocket打造在线聊天室（基于注解）
  • [100天算法】-二叉树剪枝（day 48）
  • [ABC294Ex] K-Coloring
  • [AIGC] 使用Curl进行网络请求的常见用法
  • [AutoSar]BSW_Com07 CAN报文接收流程的函数调用
  • [EULAR文摘] 利用蛋白组学技术开发一项蛋白评分用于预测TNFi疗效
  • [GXYCTF2019]禁止套娃
  • [ICCV2017]Neural Person Search Machines
  • [IE编程] 多页面基于IE内核浏览器的代码示例