CSSメディアクエリを使用すると、さまざまなデバイスや画面サイズに合わせてHTMLページのレイアウトを変更できます。メディアクエリを使用すると、デバイスの画面サイズや解像度に応じて異なるCSSスタイルを適用できます。

以下は、最大幅768pxのスクリーンをターゲットにしたメディアクエリの例です：

scss
Copy code
@media (max-width: 768px) {
  /* CSS styles for screens with a maximum width of 768px */
}

メディアクエリーブロックの中に、画面サイズが768px以下のデバイスにのみ適用されるCSSルールを記述することができます。異なる幅、高さ、マージン、パディング、表示プロパティの設定など、レイアウトを変更するために任意のCSSプロパティを使用できます。

また、複数のメディアクエリを使用して、異なる画面サイズや解像度をターゲットにすることもできます。例えば、最小幅768px、最大幅1024pxの画面を1つのメディアクエリでターゲットにし、最大幅767pxの画面を別のメディアクエリでターゲットにすることができます。

以下は、2つのメディアクエリを使用して、異なる画面サイズ用にナビゲーションメニューのレイアウトを変更する方法の例です：

```css
Copy code
/* CSS styles for screens with a maximum width of 767px */
@media (max-width: 767px) {
  .menu {
    display: none; /* hide the menu by default */
  }
  .toggle-menu {
    display: block; /* show a button to toggle the menu */
  }
}

/* CSS styles for screens with a minimum width of 768px */
@media (min-width: 768px) {
  .menu {
    display: block; /* show the menu by default */
  }
  .toggle-menu {
    display: none; /* hide the button to toggle the menu */
  }
}
```

この例では、最大幅767pxの画面では.menu要素がdisplay: noneに設定され、代わりに.toggle-menuボタンが表示されます。最小幅768pxの画面では、.menu要素はdisplay: blockに設定され、.toggle-menuボタンは非表示になります。これにより、ナビゲーションメニューはデスクトップとモバイルデバイスの両方で簡単にアクセスできるようになります。
You can use CSS media queries to change the layout of your HTML page for different devices and screen sizes. Media queries allow you to apply different CSS styles based on the device's screen size or resolution.

Here's an example of a media query that targets screens with a maximum width of 768px:

scss
Copy code
@media (max-width: 768px) {
  /* CSS styles for screens with a maximum width of 768px */
}
Inside the media query block, you can write CSS rules that will only apply to devices with a screen size of 768px or less. You can use any CSS property to change the layout, such as setting different widths, heights, margins, padding, or display properties.

You can also use multiple media queries to target different screen sizes or resolutions. For example, you might want to target screens with a minimum width of 768px and a maximum width of 1024px with one media query, and screens with a maximum width of 767px with another media query.

Here's an example of how you might use two media queries to change the layout of a navigation menu for different screen sizes:

css
Copy code
/* CSS styles for screens with a maximum width of 767px */
@media (max-width: 767px) {
  .menu {
    display: none; /* hide the menu by default */
  }
  .toggle-menu {
    display: block; /* show a button to toggle the menu */
  }
}

/* CSS styles for screens with a minimum width of 768px */
@media (min-width: 768px) {
  .menu {
    display: block; /* show the menu by default */
  }
  .toggle-menu {
    display: none; /* hide the button to toggle the menu */
  }
}
In this example, the .menu element is set to display: none for screens with a maximum width of 767px, and a .toggle-menu button is displayed instead. For screens with a minimum width of 768px, the .menu element is set to display: block and the .toggle-menu button is hidden. This allows the navigation menu to be easily accessible on both desktop and mobile devices.