23.HTML 媒体查询

着移动设备的普及，响应式网页设计变得越来越重要。响应式设计的核心理念是让网页能够适应不同的屏幕尺寸和分辨率。媒体查询是实现响应式设计的关键技术之一，它允许我们根据不同的设备特性来应用不同的CSS样式规则。

媒体查询基础

媒体查询由两部分组成：媒体类型（如 screen、print 等）和至少一个使用逻辑表达式的查询条件（如 min-width、orientation 等）。当媒体查询的条件返回真值时，相关的CSS样式则会被应用。

媒体查询的基本语法如下：

@media not|only mediatype and (expressions) {
  /* CSS 规则 */
}

not: 排除某种特定的媒体类型。
only: 指定某种特定的媒体类型，用于防止老旧浏览器不支持媒体查询的情况。
mediatype: 媒体类型，比如 screen、print。
expressions: 逻辑表达式，用于检测设备的特性，如宽度、高度等。

媒体查询实例

例子 1: 根据屏幕宽度改变背景颜色

/* 默认样式 */
body {
  background-color: lightblue;
}

/* 屏幕宽度至少为 600px */
@media screen and (min-width: 600px) {
  body {
    background-color: pink;
  }
}

/* 屏幕宽度至少为 900px */
@media screen and (min-width: 900px) {
  body {
    background-color: orange;
  }
}

在这个例子中，当屏幕宽度小于600px时，背景颜色为浅蓝色；宽度在600px到899px之间时，背景颜色变为粉色；宽度达到900px及以上时，背景颜色变为橙色。

例子 2: 根据屏幕宽度调整布局

.container {
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
}

/* 两列布局 */
@media screen and (min-width: 600px) {
  .column {
    float: left;
    width: 50%;
  }
}

/* 三列布局 */
@media screen and (min-width: 900px) {
  .column {
    width: 33.3333%;
  }
}

在这个例子中，.container 默认是一个宽度为100%的容器。当屏幕宽度至少为600px时，.column 类的元素会并排排列成两列布局；当屏幕宽度至少为900px时，变为三列布局。

例子 3: 针对不同设备调整字体大小

/* 默认字体大小 */
body {
  font-size: 14px;
}

/* 平板设备 */
@media screen and (min-device-width: 768px) and (max-device-width: 1024px) {
  body {
    font-size: 16px;
  }
}

/* 横屏显示 */
@media screen and (orientation: landscape) {
  body {
    font-size: 18px;
  }
}

在这个例子中，字体大小根据设备宽度和方向进行调整。平板设备在宽度介于768px到1024px之间时，字体大小增加到16px；当设备处于横屏模式时，字体大小增加到18px。

示例

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Layout with Media Query</title>
<style>
  body {
    font-family: 'Arial', sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
  }

  .header {
    background-color: #333;
    color: #fff;
    padding: 20px;
    text-align: center;
  }

  .sidebar {
    background-color: #f9f9f9;
    padding: 15px;
    border-bottom: 1px solid #ddd;
  }

  .main-content {
    padding: 15px;
  }

  .footer {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 10px;
  }

  /* Responsive layout for screens wider than 600px */
  @media (min-width: 600px) {
    .container {
      display: flex;
    }

    .sidebar {
      flex: 1;
      order: 1;
      border-bottom: none;
      border-right: 1px solid #ddd;
    }

    .main-content {
      flex: 3;
      order: 2;
    }
  }
</style>
</head>
<body>

<div class="header">
  <h1>Responsive Page</h1>
</div>

<div class="container">
  <div class="sidebar">
    <h2>Sidebar</h2>
    <p>This is the sidebar area, which contains navigation links and other information.</p>
  </div>

  <div class="main-content">
    <h2>Main Content</h2>
    <p>This is the main content area. It will display the primary information of the page.</p>
  </div>
</div>

<div class="footer">
  <p>Footer Content © 2023</p>
</div>

</body>
</html>

结语

媒体查询是实现响应式设计的强大工具。通过合理使用媒体查询，我们可以确保网页在各种设备上都能提供良好的用户体验。随着技术的发展，我们还可以利用更多高级的媒体查询特性，如检测分辨率、设备方向等，来进一步优化响应式设计。

anvas绘图尺寸莫名其妙的缩放，让我困惑很久的问题

我一定要弄明白为什么？

本文会告诉你，canvas有两个尺寸，绘图尺寸和显示尺寸

背景

请先仔细看看这个图片，彩色部分和黑色部分，图片缩放了

上面图片整体大小： 192×108

我本来希望通过drawImage我将一个图片1920×1080，缩小到：192×108

代码如下：

this.width=192；this.height=108； 
canvas.drawImage(img,0,0,this.width,this.height);

而且我的canvas 样式：

<canvas style="width: 192px; height: 108px;“ ></canvas>

我希望绘图一个： 192，108 尺寸的 canvas

然后我就： this.ctx.drawImage(img,0,0,192,108);

哈哈，结果就是上面这个图片的样子了

实际上就是你上面看到到的效果，这个并不是我要的，图片显然缺少一大块

我期望的样子：

为什么呢？两个尺寸问题

原因：元素大小与绘图区域大小不一致的问题

可以通过一下代码你可以看出来

//绘画区域

console.log(canvas.width + "---" +canvas.height)

// 300---150

//元素区域

var box = canvas.getBoundingClientRect(); //canvas元素的边界框

console.log(box.width + "---" + box.height); /

//192---108

这个俩个值不一致，导致了图片的自动缩放，这个自动也导致了我的困惑；

我查询了canvas相关资料：300---150 这个是默认值，我的老天

进一步理解这些内容？

1、canvas元素指html中用css设置的尺寸，用于界面显示

2、绘图区域尺寸需要在js中设置，用于画图；

3、如果这个两个值一致，那么图片不会自动缩放了，你画多少显示就是多少大了；

解决的思路和方法

1、不要用css去设置他们的样式，采用js直接设置canvas的大小；（方案1：实际上基本采用这个方式）

2、绘图时候目标绘图大小进行转换，抵消自动缩放带来的后果 （方案2）

方案1：讨论

将原来的： <canvas style="width: 192px; height: 108px;“ ></canvas>

修改成： <canvas width=”192px“ height=”108px“ ></canvas>

通过以上可以看出，这两个设置是不一样的；

方案二：讨论

自动缩放规律

结果尺寸 = 绘画尺寸（canvas元素/ 绘图表面）

如果要保证自动缩放后还是你期望的结果，那么就采用下面绘图公式（方案二）

那么：实际绘画尺寸 = 绘画尺寸（绘图表面 / canvas元素）

我实际项目做法：

this.$el 是一个canvas对象

//显示尺寸

 this.$el.style.width = width + 'px';
 this.$el.style.height = this.height + 'px';
 //绘图尺寸=画布尺 这两个值一定是要一样的
 this.$el.width = width;//注意没有尺寸单位
 this.$el.height = this.height;//注意没有尺寸单位

总结：

canvas 有两个尺寸：显示区域尺寸和绘图尺寸，请确保他们一样；

　用HTML怎么制作网页呢?静态网站的编写主要是用HTML DIV+CSS JS等来完成页面的排版设计 ‍ ,常用的网页设计软件有Dreamweaver、EditPlus、HBuilderX、VScode 、Webstorm、Animate等等，用的最多的还是DW，当然不同软件写出的前端Html5代码都是一致的。

　　一、网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。

　　二、网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。

　　三、网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。

　　四、网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件;

　　五、网页编辑方面：网页作品代码简单，可使用任意HTML编辑软件(如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作)。其中： (1) html文件包含：其中index.html是首页、其他html为二级页面; (2) css文件包含：css全部页面样式,文字滚动, 图片放大等; (3) js文件包含：js实现动态轮播特效, 表单提交, 点击事件等等(个别网页中运用到js代码)。

在线咨询

上一篇：直播源码网页版-网页直播源码开发搭建
下一篇：如何在浏览器账中查看网页的HTML源代码？

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商