.container {
  width: 100%; /* Контейнер занимает всю ширину */
  max-width: 1200px; /* Но не больше 1200px */
  margin: auto; /* Центрирование */
}

.container {
  display: flex;
  flex-wrap: wrap; /* Перенос элементов, если не влезают */
  justify-content: space-between;
}

.item {
  width: 48%; /* Два элемента в ряд */
}

@media (max-width: 768px) {
  .item {
    width: 100%; /* Один элемент в ряд на маленьких экранах */
  }
}

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

/* Десктоп (от 1024px) */
body {
  font-size: 18px;
}

/* Планшеты (768px – 1023px) */
@media (max-width: 1023px) {
  body {
    font-size: 16px;
  }
}

/* Телефоны (до 767px) */
@media (max-width: 767px) {
  body {
    font-size: 14px;
  }
}

<img 
  src="image-400.jpg" 
  srcset="image-800.jpg 800w, image-1200.jpg 1200w" 
  sizes="(max-width: 600px) 400px, (max-width: 1200px) 800px, 1200px" 
  alt="Адаптивное изображение">

<meta name="viewport" content="width=device-width, initial-scale=1">

<div class="container">
  <div class="row">
    <div class="col-md-6 col-sm-12">Контент</div>
    <div class="col-md-6 col-sm-12">Контент</div>
  </div>
</div>

<div class="grid grid-cols-2 md:grid-cols-3 sm:grid-cols-1 gap-4">
  <div class="bg-blue-500">1</div>
  <div class="bg-green-500">2</div>
  <div class="bg-red-500">3</div>
</div>

const data = fetch("https://api.example.com/users"); // ❌ Ожидание ответа
console.log("Данные загружены:", data);

fetch("https://api.example.com/users")
  .then(response => response.json())
  .then(data => console.log("Данные загружены:", data));

console.log("Этот код выполнится сразу! 🚀");

async function getData() {
    try {
        let response = await fetch("https://api.example.com/users");
        let data = await response.json();
        console.log("Данные:", data);
    } catch (error) {
        console.error("Ошибка загрузки:", error);
    }
}

getData();
console.log("Этот код выполняется, пока ждём данные!");

export default {
  created() {
    console.log("🌍 Миксин: created");
  }
};

<script>
import myMixin from "./myMixin.js";

export default {
  mixins: [myMixin],
  created() {
    console.log("📦 Компонент: created");
  }
};
</script>

Миксин: created
Компонент: created

import { onMounted } from "vue";
export default {
  mixins: [myMixin],
  setup() {
    console.log("🚀 setup()");
  },
  mounted() {
    console.log("📦 Компонент: mounted");
  }
};

Миксин: mounted
setup()
Компонент: mounted

<meta name="viewport" content="width=device-width, initial-scale=1">

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

GET /users HTTP/1.1
Host: api.example.com

[
  { "id": 1, "name": "Alice" },
  { "id": 2, "name": "Bob" }
]

POST /users HTTP/1.1
Host: api.example.com
Content-Type: application/json

{
  "name": "Charlie",
  "email": "charlie@example.com"
}

{
  "id": 3,
  "name": "Charlie",
  "email": "charlie@example.com"
}

PUT /users/1 HTTP/1.1
Host: api.example.com
Content-Type: application/json

{
  "name": "Alice Smith",
  "email": "alice.smith@example.com"
}

PATCH /users/1 HTTP/1.1
Host: api.example.com
Content-Type: application/json

{
  "name": "Alice Johnson"
}

DELETE /users/2 HTTP/1.1
Host: api.example.com

HTTP/1.1 200 OK
Cache-Control: max-age=3600, public
ETag: "abc123"

Cache-Control: max-age=86400, public

Expires: Wed, 26 Feb 2025 12:00:00 GMT

ETag: "abc123"

If-None-Match: "abc123"

Last-Modified: Tue, 25 Feb 2025 15:30:00 GMT

If-Modified-Since: Tue, 25 Feb 2025 15:30:00 GMT