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小時內與您取得聯系。

整合營銷服務商