{"id":4026,"date":"2024-05-29T19:38:01","date_gmt":"2024-05-29T12:38:01","guid":{"rendered":"https:\/\/www.marketenterprise.vn\/blog\/?p=4026"},"modified":"2024-05-29T19:38:01","modified_gmt":"2024-05-29T12:38:01","slug":"css-container-queries","status":"publish","type":"post","link":"https:\/\/www.marketenterprise.vn\/blog\/css-container-queries.html","title":{"rendered":"CSS Container Queries: \u0110\u1ec3 responsive 1 website ho\u00e0n h\u1ea3o"},"content":{"rendered":"<p>Thi\u1ebft k\u1ebf web hi\u1ec7n \u0111\u1ea1i \u0111\u00f2i h\u1ecfi s\u1ef1 linh ho\u1ea1t v\u00e0 \u0111\u00e1p \u1ee9ng nhanh ch\u00f3ng v\u1edbi c\u00e1c k\u00edch th\u01b0\u1edbc m\u00e0n h\u00ecnh v\u00e0 thi\u1ebft b\u1ecb kh\u00e1c nhau. \u0110\u00f3 l\u00e0 l\u00fac <a href=\"https:\/\/www.marketenterprise.vn\/blog\/?s=CSS\">CSS<\/a> Container Queries xu\u1ea5t hi\u1ec7n nh\u01b0 m\u1ed9t s\u1ef1 l\u1ef1a ch\u1ecdn m\u1edbi. Th\u00f4ng th\u01b0\u1eddng ch\u00fang ta th\u01b0\u1eddng s\u1eed d\u1ee5ng media queries \u0111\u1ec3 \u0111i\u1ec1u ch\u1ec9nh c\u00e1c th\u00e0nh ph\u1ea7n d\u1ef1a tr\u00ean k\u00edch th\u01b0\u1edbc c\u1ee7a c\u1eeda s\u1ed5 tr\u00ecnh duy\u1ec7t. Tuy nhi\u00ean, media queries kh\u00f4ng ph\u1ea3i l\u00fac n\u00e0o c\u0169ng \u0111\u1ee7 \u0111\u1ec3 gi\u1ea3i quy\u1ebft c\u00e1c th\u00e1ch th\u1ee9c trong thi\u1ebft k\u1ebf giao di\u1ec7n ng\u01b0\u1eddi d\u00f9ng.<\/p>\n<h2>T\u00ecm hi\u1ec3u CSS Container Queries: Th\u1ebf n\u00e0o \u0111\u1ec3 responsive ho\u00e0n h\u1ea3o<\/h2>\n<p>CSS Container Queries cho ph\u00e9p developer \u00e1p d\u1ee5ng c\u00e1c ki\u1ec3u d\u1ef1a tr\u00ean k\u00edch th\u01b0\u1edbc c\u1ee7a m\u1ed9t ph\u1ea7n t\u1eed ch\u1ee9a (container) thay v\u00ec k\u00edch th\u01b0\u1edbc c\u1ee7a c\u1eeda s\u1ed5 tr\u00ecnh duy\u1ec7t. \u0110i\u1ec1u n\u00e0y mang l\u1ea1i kh\u1ea3 n\u0103ng ki\u1ec3m so\u00e1t linh ho\u1ea1t h\u01a1n \u0111\u1ed1i v\u1edbi thi\u1ebft k\u1ebf v\u00e0 b\u1ed1 c\u1ee5c c\u1ee7a c\u00e1c th\u00e0nh ph\u1ea7n b\u00ean trong m\u1ed9t container c\u1ee5 th\u1ec3. T\u1eeb \u0111\u00f3 gi\u00fap c\u1ea3i thi\u1ec7n t\u00ednh linh ho\u1ea1t v\u00e0 kh\u1ea3 n\u0103ng \u0111\u00e1p \u1ee9ng c\u1ee7a giao di\u1ec7n.<\/p>\n<ul>\n<li><span style=\"text-decoration: underline;\">Thi\u1ebft k\u1ebf linh ho\u1ea1t<\/span>: CSS Container cho ph\u00e9p thay \u0111\u1ed5i ki\u1ec3u d\u00e1ng c\u1ee7a c\u00e1c th\u00e0nh ph\u1ea7n d\u1ef1a tr\u00ean k\u00edch th\u01b0\u1edbc c\u1ee7a container ch\u1ee9a ch\u00fang, ch\u1ee9 kh\u00f4ng ph\u1ea3i k\u00edch th\u01b0\u1edbc c\u1ee7a to\u00e0n b\u1ed9 c\u1eeda s\u1ed5 tr\u00ecnh duy\u1ec7t. \u0110i\u1ec1u n\u00e0y r\u1ea5t h\u1eefu \u00edch khi b\u1ea1n c\u00f3 c\u00e1c th\u00e0nh ph\u1ea7n trong c\u00e1c b\u1ed1 c\u1ee5c ph\u1ee9c t\u1ea1p.<\/li>\n<li><span style=\"text-decoration: underline;\">B\u1ea3o tr\u00ec d\u1ec5 d\u00e0ng h\u01a1n:<\/span> V\u1edbi CSS Container ta c\u00f3 th\u1ec3 vi\u1ebft c\u00e1c quy t\u1eafc css c\u1ee5 th\u1ec3 cho t\u1eebng container, gi\u00fap css d\u1ec5 hi\u1ec3u v\u00e0 d\u1ec5 b\u1ea3o tr\u00ec h\u01a1n. T\u1eeb \u0111\u00f3 l\u00e0m gi\u1ea3m s\u1ef1 ph\u1ee5 thu\u1ed9c v\u00e0o c\u00e1c media queries ph\u1ee9c t\u1ea1p.<\/li>\n<li><span style=\"text-decoration: underline;\">T\u0103ng t\u00ednh module ho\u00e1:<\/span> C\u00f3 th\u1ec3 s\u1eed d\u1ee5ng l\u1ea1i trong c\u00e1c ng\u1eef c\u1ea3nh kh\u00e1c nhau m\u00e0 kh\u00f4ng c\u1ea7n ph\u1ea3i \u0111i\u1ec1u ch\u1ec9nh css.<\/li>\n<\/ul>\n<h3>V\u00ed d\u1ee5 \u00e1p d\u1ee5ng CSS Container Queries: Thay \u0111\u1ed5i b\u1ed1 c\u1ee5c d\u1ef1a tr\u00ean k\u00edch th\u01b0\u1edbc Container<\/h3>\n<p>Gi\u1ea3 s\u1eed b\u1ea1n c\u00f3 m\u1ed9t th\u1ebb article ch\u01b0a m\u1ed9t ti\u00eau \u0111\u1ec1 v\u00e0 m\u1ed9t \u0111o\u1ea1n v\u0103n b\u1ea3n. B\u1ea1n mu\u1ed1n thay \u0111\u1ed5i b\u1ed1 c\u1ee5c c\u1ee7a th\u1ebb n\u00e0y khi k\u00edch th\u01b0\u1edbc c\u1ee7a n\u00f3 thay \u0111\u1ed5i. D\u01b0\u1edbi \u0111\u00e2y l\u00e0 c\u00e1ch b\u1ea1n c\u00f3 th\u1ec3 l\u00e0m \u0111i\u1ec1u n\u00e0y v\u1edbi CSS Container Queries.<\/p>\n<div class=\"hcb_wrap\">\n<pre class=\"prism line-numbers lang-html\" data-lang=\"HTML\"><code>&lt;div class=\"container\"&gt;\r\n   &lt;article&gt;\r\n      &lt;h2&gt;\u0110\u00e2y l\u00e0 ti\u00eau \u0111\u1ec1 b\u00e0i vi\u1ebft&lt;\/h2&gt;\r\n      &lt;p&gt;\u0110\u00e2y l\u00e0 n\u1ed9i dung b\u00e0i vi\u1ebft ...&lt;\/p&gt;\r\n   &lt;\/article&gt;\r\n&lt;\/div&gt;<\/code><\/pre>\n<\/div>\n<div class=\"hcb_wrap\">\n<pre class=\"prism line-numbers lang-css\" data-lang=\"CSS\"><code>.container {\r\n   container: layout \/ inline-size;\r\n   padding: 16px;\r\n}\r\n\r\narticle {\r\n   display: flex;\r\n   gap: 16px;\r\n   align-items: center;\r\n}\r\n\r\n@container layout (width &lt; 600px) {\r\n   .container article {\r\n      flex-direction: column;\r\n   }\r\n\r\n   .container article h2 {\r\n      flex: 1;\r\n   }\r\n\r\n   .container article p {\r\n      flex: 2;\r\n   }\r\n}<\/code><\/pre>\n<\/div>\n<ul>\n<li><span style=\"text-decoration: underline;\"><strong>Responsive<\/strong><\/span><\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/mevn-public.s3-ap-southeast-1.amazonaws.com\/marketenterprise.vn\/wp-images\/2024\/05\/28193542\/Screenshot-2024-05-28-at-19.34.23.png\" alt=\"css container queries - vd1.3\" width=\"2946\" height=\"928\" class=\"alignnone size-full wp-image-4015\" srcset=\"https:\/\/mevn-public.s3-ap-southeast-1.amazonaws.com\/marketenterprise.vn\/wp-images\/2024\/05\/28193542\/Screenshot-2024-05-28-at-19.34.23.png 2946w, https:\/\/mevn-public.s3-ap-southeast-1.amazonaws.com\/marketenterprise.vn\/wp-images\/2024\/05\/28193542\/Screenshot-2024-05-28-at-19.34.23-300x95.png 300w, https:\/\/mevn-public.s3-ap-southeast-1.amazonaws.com\/marketenterprise.vn\/wp-images\/2024\/05\/28193542\/Screenshot-2024-05-28-at-19.34.23-1024x323.png 1024w, https:\/\/mevn-public.s3-ap-southeast-1.amazonaws.com\/marketenterprise.vn\/wp-images\/2024\/05\/28193542\/Screenshot-2024-05-28-at-19.34.23-768x242.png 768w, https:\/\/mevn-public.s3-ap-southeast-1.amazonaws.com\/marketenterprise.vn\/wp-images\/2024\/05\/28193542\/Screenshot-2024-05-28-at-19.34.23-1536x484.png 1536w, https:\/\/mevn-public.s3-ap-southeast-1.amazonaws.com\/marketenterprise.vn\/wp-images\/2024\/05\/28193542\/Screenshot-2024-05-28-at-19.34.23-2048x645.png 2048w, https:\/\/mevn-public.s3-ap-southeast-1.amazonaws.com\/marketenterprise.vn\/wp-images\/2024\/05\/28193542\/Screenshot-2024-05-28-at-19.34.23-1568x494.png 1568w\" sizes=\"auto, (max-width: 2946px) 100vw, 2946px\" \/> <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/mevn-public.s3-ap-southeast-1.amazonaws.com\/marketenterprise.vn\/wp-images\/2024\/05\/28193547\/Screenshot-2024-05-28-at-19.35.10.png\" alt=\"css container queries - vd1.4\" width=\"2946\" height=\"934\" class=\"alignnone size-full wp-image-4016\" srcset=\"https:\/\/mevn-public.s3-ap-southeast-1.amazonaws.com\/marketenterprise.vn\/wp-images\/2024\/05\/28193547\/Screenshot-2024-05-28-at-19.35.10.png 2946w, https:\/\/mevn-public.s3-ap-southeast-1.amazonaws.com\/marketenterprise.vn\/wp-images\/2024\/05\/28193547\/Screenshot-2024-05-28-at-19.35.10-300x95.png 300w, https:\/\/mevn-public.s3-ap-southeast-1.amazonaws.com\/marketenterprise.vn\/wp-images\/2024\/05\/28193547\/Screenshot-2024-05-28-at-19.35.10-1024x325.png 1024w, https:\/\/mevn-public.s3-ap-southeast-1.amazonaws.com\/marketenterprise.vn\/wp-images\/2024\/05\/28193547\/Screenshot-2024-05-28-at-19.35.10-768x243.png 768w, https:\/\/mevn-public.s3-ap-southeast-1.amazonaws.com\/marketenterprise.vn\/wp-images\/2024\/05\/28193547\/Screenshot-2024-05-28-at-19.35.10-1536x487.png 1536w, https:\/\/mevn-public.s3-ap-southeast-1.amazonaws.com\/marketenterprise.vn\/wp-images\/2024\/05\/28193547\/Screenshot-2024-05-28-at-19.35.10-2048x649.png 2048w, https:\/\/mevn-public.s3-ap-southeast-1.amazonaws.com\/marketenterprise.vn\/wp-images\/2024\/05\/28193547\/Screenshot-2024-05-28-at-19.35.10-1568x497.png 1568w\" sizes=\"auto, (max-width: 2946px) 100vw, 2946px\" \/><\/p>\n<p>Trong v\u00ed d\u1ee5 n\u00e0y, khi k\u00edch th\u01b0\u1edbc c\u1ee7a container nh\u1ecf h\u01a1n 600px, b\u1ed1 c\u1ee5c c\u1ee7a b\u00e0i vi\u1ebft s\u1ebd thay \u0111\u1ed5i t\u1eeb d\u1ea1ng h\u00e0ng sang c\u1ed9t, v\u1edbi ti\u00eau \u0111\u1ec1 v\u00e0 n\u1ed9i dung n\u1eb1m c\u00f9ng m\u1ed9t c\u1ed9t.<\/p>\n<h3>V\u00ed d\u1ee5 \u00e1p d\u1ee5ng CSS Container Queries: Thay \u0111\u1ed5i ki\u1ec3u ch\u1eef d\u1ef1a tr\u00ean k\u00edch th\u01b0\u1edbc Container<\/h3>\n<p>Trong m\u1ed9t v\u00ed d\u1ee5 kh\u00e1c, b\u1ea1n c\u00f3 th\u1ec3 mu\u1ed1n thay \u0111\u1ed5i ki\u1ec3u ch\u1eef c\u1ee7a c\u00e1c \u0111o\u1ea1n v\u0103n b\u1ea3n d\u1ef1a tr\u00ean k\u00edch th\u01b0\u1edbc c\u1ee7a container ch\u1ee9a ch\u00fang.<\/p>\n<div class=\"hcb_wrap\">\n<pre class=\"prism line-numbers lang-html\" data-lang=\"HTML\"><code><span>&lt;<\/span><span>div<\/span><span> <\/span><span>class<\/span><span>=<\/span><span>\"text-container\"<\/span><span>&gt;<\/span>\r\n   <span>&lt;<\/span><span>p<\/span><span>&gt;<\/span><span>\u0110\u00e2y l\u00e0 \u0111o\u1ea1n v\u0103n b\u1ea3n ...<\/span><span>&lt;\/<\/span><span>p<\/span><span>&gt;<\/span>\r\n<span>&lt;\/<\/span><span>div<\/span><span>&gt;\r\n\r\n&lt;div class=\"text-container-small\"&gt;\r\n   &lt;p&gt;\u0110\u00e2y l\u00e0 \u0111o\u1ea1n v\u0103n b\u1ea3n small ...&lt;\/p&gt;\r\n&lt;\/div&gt;<\/span>\r\n<\/code><\/pre>\n<\/div>\n<div>\n<div><\/div>\n<\/div>\n<div class=\"hcb_wrap\">\n<pre class=\"prism line-numbers lang-css\" data-lang=\"CSS\"><code><span>.text-container<\/span><span> {\r\n   container: text \/ inline-size;\r\n   padding: 16px;\r\n   margin: 16px;\r\n   background-color: #f0f0f0;\r\n}\r\n\r\n.text-container-small {\r\n   container: text-small \/ inline-size;\r\n   padding: 16px;\r\n   margin: 16px;\r\n   background-color: #c1c1c1;\r\n}\r\n\r\n@container text (width &lt; 800px) {\r\n   .text-container {\r\n      background-color: red;\r\n   }\r\n\r\n   .text-container p {\r\n      font-size: 2.25rem\r\n   }\r\n}\r\n\r\n@container text (width &gt;= 800px) {\r\n   .text-container {\r\n      background-color: blue;\r\n   }\r\n\r\n   .text-container p {\r\n      font-size: 3.25rem\r\n   }\r\n}\r\n\r\n@container text-small (width &lt; 800px) {\r\n   .text-container-small {\r\n      background-color: red;\r\n   }\r\n\r\n   .text-container-small p {\r\n      font-size: 1.25rem\r\n   }\r\n}\r\n\r\n@container text-small (width &gt;= 800px) {\r\n   .text-container-small {\r\n      background-color: blue;\r\n   }\r\n\r\n   .text-container-small p {\r\n      font-size: 2.25rem\r\n   }\r\n}<\/span><\/code><\/pre>\n<\/div>\n<ul>\n<li><span style=\"text-decoration: underline;\"><strong>Responsive<\/strong><\/span><\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/mevn-public.s3-ap-southeast-1.amazonaws.com\/marketenterprise.vn\/wp-images\/2024\/05\/28194742\/Screenshot-2024-05-28-at-19.46.43.png\" alt=\"css container queries - vd2.3\" width=\"2808\" height=\"1558\" class=\"alignnone size-full wp-image-4019\" srcset=\"https:\/\/mevn-public.s3-ap-southeast-1.amazonaws.com\/marketenterprise.vn\/wp-images\/2024\/05\/28194742\/Screenshot-2024-05-28-at-19.46.43.png 2808w, https:\/\/mevn-public.s3-ap-southeast-1.amazonaws.com\/marketenterprise.vn\/wp-images\/2024\/05\/28194742\/Screenshot-2024-05-28-at-19.46.43-300x166.png 300w, https:\/\/mevn-public.s3-ap-southeast-1.amazonaws.com\/marketenterprise.vn\/wp-images\/2024\/05\/28194742\/Screenshot-2024-05-28-at-19.46.43-1024x568.png 1024w, https:\/\/mevn-public.s3-ap-southeast-1.amazonaws.com\/marketenterprise.vn\/wp-images\/2024\/05\/28194742\/Screenshot-2024-05-28-at-19.46.43-768x426.png 768w, https:\/\/mevn-public.s3-ap-southeast-1.amazonaws.com\/marketenterprise.vn\/wp-images\/2024\/05\/28194742\/Screenshot-2024-05-28-at-19.46.43-1536x852.png 1536w, https:\/\/mevn-public.s3-ap-southeast-1.amazonaws.com\/marketenterprise.vn\/wp-images\/2024\/05\/28194742\/Screenshot-2024-05-28-at-19.46.43-2048x1136.png 2048w, https:\/\/mevn-public.s3-ap-southeast-1.amazonaws.com\/marketenterprise.vn\/wp-images\/2024\/05\/28194742\/Screenshot-2024-05-28-at-19.46.43-1568x870.png 1568w\" sizes=\"auto, (max-width: 2808px) 100vw, 2808px\" \/> <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/mevn-public.s3-ap-southeast-1.amazonaws.com\/marketenterprise.vn\/wp-images\/2024\/05\/28194803\/Screenshot-2024-05-28-at-19.47.00.png\" alt=\"css container queries - vd2.4\" width=\"2804\" height=\"1360\" class=\"alignnone size-full wp-image-4020\" srcset=\"https:\/\/mevn-public.s3-ap-southeast-1.amazonaws.com\/marketenterprise.vn\/wp-images\/2024\/05\/28194803\/Screenshot-2024-05-28-at-19.47.00.png 2804w, https:\/\/mevn-public.s3-ap-southeast-1.amazonaws.com\/marketenterprise.vn\/wp-images\/2024\/05\/28194803\/Screenshot-2024-05-28-at-19.47.00-300x146.png 300w, https:\/\/mevn-public.s3-ap-southeast-1.amazonaws.com\/marketenterprise.vn\/wp-images\/2024\/05\/28194803\/Screenshot-2024-05-28-at-19.47.00-1024x497.png 1024w, https:\/\/mevn-public.s3-ap-southeast-1.amazonaws.com\/marketenterprise.vn\/wp-images\/2024\/05\/28194803\/Screenshot-2024-05-28-at-19.47.00-768x372.png 768w, https:\/\/mevn-public.s3-ap-southeast-1.amazonaws.com\/marketenterprise.vn\/wp-images\/2024\/05\/28194803\/Screenshot-2024-05-28-at-19.47.00-1536x745.png 1536w, https:\/\/mevn-public.s3-ap-southeast-1.amazonaws.com\/marketenterprise.vn\/wp-images\/2024\/05\/28194803\/Screenshot-2024-05-28-at-19.47.00-2048x993.png 2048w, https:\/\/mevn-public.s3-ap-southeast-1.amazonaws.com\/marketenterprise.vn\/wp-images\/2024\/05\/28194803\/Screenshot-2024-05-28-at-19.47.00-1568x761.png 1568w\" sizes=\"auto, (max-width: 2804px) 100vw, 2804px\" \/><\/p>\n<p><span style=\"font-weight: 400;\"><span style=\"text-decoration: underline;\">L\u01b0u \u00fd nh\u1ecf:<\/span> B\u1ea1n c\u00f3 th\u1ec3 th\u1ea5y css c\u00f3 set thay \u0111\u1ed5i background-color khi width c\u1ee7a container nh\u1ecf ho\u1eb7c l\u1edbn h\u01a1n 800. Nh\u01b0ng vi\u1ec7c \u0111\u1eb7t css cho ch\u00ednh container \u0111\u00f3 khi responsive l\u00e0 <\/span><b>kh\u00f4ng \u0111\u01b0\u1ee3c<\/b><span style=\"font-weight: 400;\">, ch\u1ec9 c\u00f3 c\u00e1c th\u00e0nh ph\u1ea7n con th\u00ec m\u1edbi \u0111\u01b0\u1ee3c.<\/span><\/p>\n<h3>V\u00ed d\u1ee5 \u00e1p d\u1ee5ng CSS Container Queries: M\u1ed9t tr\u01b0\u1eddng h\u1ee3p th\u1ef1c th\u1ebf h\u01a1n<\/h3>\n<p>T\u1ea1o m\u1ed9t danh s\u00e1ch article v\u00e0 th\u1ef1c hi\u1ec7n responsive cho danh s\u00e1ch n\u00e0y.<\/p>\n<div class=\"hcb_wrap\">\n<pre class=\"prism line-numbers lang-html\" data-lang=\"HTML\"><code>&lt;div class=\"container\"&gt;\r\n  &lt;div class=\"side-bar\"&gt;&lt;\/div&gt;\r\n  &lt;div class=\"main\"&gt;\r\n    &lt;div class=\"list-article\"&gt;\r\n      &lt;div class=\"article\"&gt;\r\n        &lt;div class=\"image\"&gt;\r\n          &lt;img \r\n          src=\"...\"\r\n          alt=\"image\"&gt;\r\n        &lt;\/div&gt;\r\n        &lt;div class=\"info\"&gt;\r\n          &lt;div class=\"title\"&gt;\r\n            &lt;h2&gt;Kh\u00e1m ph\u00e1 Platform engineering \u2013 7 \u0111i\u1ec1u c\u1ea7n bi\u1ebft khi \u00e1p d\u1ee5ng Platform engineering v\u00e0o\r\n            doanh nghi\u1ec7p c\u1ee7a b\u1ea1n&lt;\/h2&gt;\r\n          &lt;\/div&gt;\r\n          &lt;div class=\"description\"&gt;\r\n            &lt;p&gt;M\u1ee5c \u0111\u00edch c\u1ee7a b\u00e0i vi\u1ebft n\u00e0y l\u00e0 gi\u1ea3i th\u00edch platform engineering l\u00e0 g\u00ec, c\u00e1c v\u1ea5n \u0111\u1ec1 kinh doanh\r\n            m\u00e0 workflows n\u00e0y gi\u1ea3i quy\u1ebft v\u00e0 l\u00e0m c\u00e1ch n\u00e0o \u0111\u1ec3 bi\u1ebft li\u1ec7u t\u1ed5 ch\u1ee9c c\u1ee7a b\u1ea1n \u0111\u00e3 s\u1eb5n s\u00e0ng\r\n            tri\u1ec3n khai n\u00f3 ch\u01b0a. N\u1ebfu b\u1ea1n l\u00e0m vi\u1ec7c trong DevOps ho\u1eb7c c\u00f3 h\u1ee9ng th\u00fa v\u1edbi vi\u1ec7c \u00e1p d\u1ee5ng\r\n            DevOps th\u00ec h\u00e3y c\u00f9ng nhau chia s\u1ebb v\u1ec1 ch\u1ee7 \u0111\u1ec1 n\u00e0y nh\u00e9!&lt;\/p&gt;\r\n          &lt;\/div&gt;\r\n          &lt;div class=\"author\"&gt;\r\n            &lt;p&gt;H\u1ed3 Ng\u1ecdc B\u1ea3o Long&lt;\/p&gt;\r\n          &lt;\/div&gt;\r\n          &lt;div class=\"date\"&gt;\r\n            &lt;p&gt;2023.09.15&lt;\/p&gt;\r\n          &lt;\/div&gt;\r\n        &lt;\/div&gt;\r\n      &lt;\/div&gt;\r\n      .\r\n      .\r\n      .\r\n    &lt;\/div&gt;\r\n  &lt;\/div&gt;\r\n  &lt;div class=\"side-bar\"&gt;&lt;\/div&gt;\r\n&lt;\/div&gt;<\/code><\/pre>\n<\/div>\n<div class=\"hcb_wrap\">\n<pre class=\"prism line-numbers lang-css\" data-lang=\"CSS\"><code>.container p, .container h2 { \r\n   margin: 0; \r\n} \r\n\r\n.container { \r\n   display: grid; \r\n   grid-template-columns: 300px minmax(0, 1fr) 300px; \r\n   height: 100vh; \r\n   gap: 20px; \r\n}\r\n\r\n.side-bar { \r\n   background-color: #f0f0f0; \r\n   width: 100%; \r\n} \r\n\r\n.list-article { \r\n   display: flex; \r\n   flex-direction: column; \r\n   gap: 20px; \r\n} \r\n\r\n.article { \r\n   display: flex; \r\n   align-items: center;\r\n   flex-direction: column;\r\n   gap: 20px; \r\n   padding: 20px; \r\n   border: 1px solid #f0f0f0; \r\n   border-radius: 12px; \r\n} \r\n\r\n.info { \r\n   display: flex; \r\n   flex-direction: column; \r\n   gap: 10px; \r\n} \r\n\r\n.image { \r\n   flex: 0 0 200px; \r\n   aspect-ratio: 1\/1; \r\n   width: 100%; \r\n   overflow: hidden; \r\n} \r\n\r\n.image img { \r\n   width: 100%; \r\n   height: 100%; \r\n   object-fit: cover; \r\n   border-radius: 12px; \r\n}\r\n\r\n.container { \r\n  @media screen and (min-width: 1228px) { \r\n    .main .article { \r\n      flex-direction: row; \r\n    } \r\n  } \r\n\r\n  @media screen and (max-width: 1028px) { \r\n    grid-template-columns: 300px minmax(0, 1fr); \r\n    .side-bar:nth-child(3) { \r\n      display: none; \r\n    }\r\n\r\n    .main .article { \r\n      flex-direction: row; \r\n    } \r\n  }\r\n\r\n  @media screen and (max-width: 828px) { \r\n    grid-template-columns: minmax(0, 1fr); \r\n    .side-bar:nth-child(1) { \r\n      display: none; \r\n    } \r\n\r\n    .main .article { \r\n      flex-direction: row; \r\n    } \r\n  }\r\n\r\n  @media screen and (max-width: 528px) { \r\n    .main .article { \r\n      flex-direction: column; \r\n    }\r\n  }\r\n}<\/code><\/pre>\n<\/div>\n<ul>\n<li><span style=\"text-decoration: underline;\"><strong>Responsive \u00e1p d\u1ee5ng media screen<\/strong><\/span><\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/mevn-public.s3-ap-southeast-1.amazonaws.com\/marketenterprise.vn\/wp-images\/2024\/05\/28195934\/Screenshot-2024-05-28-at-19.59.04.png\" alt=\"css container queries - vd3.3\" width=\"1124\" height=\"1418\" class=\"alignnone size-full wp-image-4023\" srcset=\"https:\/\/mevn-public.s3-ap-southeast-1.amazonaws.com\/marketenterprise.vn\/wp-images\/2024\/05\/28195934\/Screenshot-2024-05-28-at-19.59.04.png 1124w, https:\/\/mevn-public.s3-ap-southeast-1.amazonaws.com\/marketenterprise.vn\/wp-images\/2024\/05\/28195934\/Screenshot-2024-05-28-at-19.59.04-238x300.png 238w, https:\/\/mevn-public.s3-ap-southeast-1.amazonaws.com\/marketenterprise.vn\/wp-images\/2024\/05\/28195934\/Screenshot-2024-05-28-at-19.59.04-812x1024.png 812w, https:\/\/mevn-public.s3-ap-southeast-1.amazonaws.com\/marketenterprise.vn\/wp-images\/2024\/05\/28195934\/Screenshot-2024-05-28-at-19.59.04-768x969.png 768w\" sizes=\"auto, (max-width: 1124px) 100vw, 1124px\" \/><\/p>\n<p>\u0110\u1ec3 l\u00e0m responsive nh\u01b0 th\u00f4ng th\u01b0\u1eddng ch\u00fang ta th\u01b0\u1eddng hay \u0111\u1eb7t @media screen th\u00ec t\u1eebng khung h\u00ecnh ch\u00fang ta l\u1ea1i ph\u1ea3i set css l\u1ea1i theo \u0111\u00fang \u00fd m\u00ecnh.<\/p>\n<p><span style=\"text-decoration: underline;\"><strong>Tr\u01b0\u1eddng h\u1ee3p \u00e1p d\u1ee5ng <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/CSS_containment\/Container_queries\" target=\"_blank\" rel=\"noopener\">CSS Container Queries<\/a>:<\/strong><\/span><\/p>\n<p>\u1ede \u0111\u00e2y, ch\u00fang ta ch\u1ec9 c\u1ea7n set \u0111\u1ed9 d\u00e0i c\u1ee7a container main \u0111\u00f3 &lt;= 528px th\u00ec css s\u1ebd \u0111\u01b0\u1ee3c \u00e1p d\u1ee5ng, m\u1eb7c k\u1ec7 \u0111\u1ed9 d\u00e0i m\u00e0n h\u00ecnh screen c\u00f3 l\u00e0 bao nhi\u00eau \u0111i ch\u0103ng n\u1eefa.<\/p>\n<div class=\"hcb_wrap\">\n<pre class=\"prism line-numbers lang-css\" data-lang=\"CSS\"><code>.main { \r\n   container: main \/ inline-size; \r\n}\r\n\r\n@container main (width &lt;= 528px) { \r\n   .main .article { \r\n      flex-direction: column; \r\n      gap: 10px; \r\n   } \r\n} \r\n\r\n.container { \r\n   @media screen and (max-width: 1028px) {\r\n      grid-template-columns: 300px minmax(0, 1fr); \r\n      .side-bar:nth-child(3) { \r\n         display: none; \r\n      } \r\n   } \r\n\r\n   @media screen and (max-width: 728px) { \r\n      grid-template-columns: minmax(0, 1fr); \r\n      .side-bar:nth-child(1) { \r\n         display: none; \r\n      } \r\n   } \r\n}<\/code><\/pre>\n<\/div>\n<h3>K\u1ebft lu\u1eadn<\/h3>\n<p><span style=\"font-weight: 400;\">CSS Container Queries mang \u0111\u1ebfn m\u1ed9t c\u00e1ch ti\u1ebfp c\u1eadn m\u1edbi cho thi\u1ebft k\u1ebf web linh ho\u1ea1t, gi\u00fap gi\u1ea3i quy\u1ebft c\u00e1c h\u1ea1n ch\u1ebf c\u1ee7a media queries truy\u1ec1n th\u1ed1ng. B\u1eb1ng c\u00e1ch cho ph\u00e9p c\u00e1c ki\u1ec3u CSS thay \u0111\u1ed5i d\u1ef1a tr\u00ean k\u00edch th\u01b0\u1edbc c\u1ee7a c\u00e1c container c\u1ee5 th\u1ec3, ch\u00fang ta c\u00f3 th\u1ec3 t\u1ea1o ra c\u00e1c thi\u1ebft k\u1ebf giao di\u1ec7n ng\u01b0\u1eddi d\u00f9ng linh ho\u1ea1t h\u01a1n, d\u1ec5 b\u1ea3o tr\u00ec h\u01a1n v\u00e0 module h\u00f3a h\u01a1n.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Container Queries v\u1eabn \u0111ang trong qu\u00e1 tr\u00ecnh ho\u00e0n thi\u1ec7n v\u00e0 ch\u01b0a \u0111\u01b0\u1ee3c h\u1ed7 tr\u1ee3 ho\u00e0n to\u00e0n tr\u00ean t\u1ea5t c\u1ea3 c\u00e1c tr\u00ecnh duy\u1ec7t, nh\u01b0ng v\u1edbi s\u1ef1 ph\u00e1t tri\u1ec3n li\u00ean t\u1ee5c c\u1ee7a c\u00f4ng ngh\u1ec7 web, ch\u00fang s\u1ebd s\u1edbm tr\u1edf th\u00e0nh m\u1ed9t c\u00f4ng c\u1ee5 quan tr\u1ecdng trong b\u1ed9 c\u00f4ng c\u1ee5 c\u1ee7a m\u1ed7i nh\u00e0 ph\u00e1t tri\u1ec3n web. H\u00e3y b\u1eaft \u0111\u1ea7u th\u1eed nghi\u1ec7m v\u1edbi Container Queries ngay h\u00f4m nay \u0111\u1ec3 tr\u1ea3i nghi\u1ec7m nh\u1eefng l\u1ee3i \u00edch m\u00e0 ch\u00fang mang l\u1ea1i cho d\u1ef1 \u00e1n c\u1ee7a b\u1ea1n!<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Thi\u1ebft k\u1ebf web hi\u1ec7n \u0111\u1ea1i \u0111\u00f2i h\u1ecfi s\u1ef1 linh ho\u1ea1t v\u00e0 \u0111\u00e1p \u1ee9ng nhanh ch\u00f3ng v\u1edbi c\u00e1c k\u00edch th\u01b0\u1edbc m\u00e0n h\u00ecnh v\u00e0 thi\u1ebft b\u1ecb kh\u00e1c nhau. \u0110\u00f3 l\u00e0 l\u00fac CSS Container Queries xu\u1ea5t hi\u1ec7n nh\u01b0 m\u1ed9t s\u1ef1 l\u1ef1a ch\u1ecdn m\u1edbi. Th\u00f4ng th\u01b0\u1eddng ch\u00fang ta th\u01b0\u1eddng s\u1eed d\u1ee5ng media queries \u0111\u1ec3 \u0111i\u1ec1u ch\u1ec9nh c\u00e1c th\u00e0nh ph\u1ea7n [&hellip;]<\/p>\n","protected":false},"author":36,"featured_media":4031,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[170,169,168],"class_list":["post-4026","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-technology","tag-container-queries","tag-css-container","tag-css-container-queries"],"_links":{"self":[{"href":"https:\/\/www.marketenterprise.vn\/blog\/wp-json\/wp\/v2\/posts\/4026","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.marketenterprise.vn\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.marketenterprise.vn\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.marketenterprise.vn\/blog\/wp-json\/wp\/v2\/users\/36"}],"replies":[{"embeddable":true,"href":"https:\/\/www.marketenterprise.vn\/blog\/wp-json\/wp\/v2\/comments?post=4026"}],"version-history":[{"count":0,"href":"https:\/\/www.marketenterprise.vn\/blog\/wp-json\/wp\/v2\/posts\/4026\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.marketenterprise.vn\/blog\/wp-json\/wp\/v2\/media\/4031"}],"wp:attachment":[{"href":"https:\/\/www.marketenterprise.vn\/blog\/wp-json\/wp\/v2\/media?parent=4026"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.marketenterprise.vn\/blog\/wp-json\/wp\/v2\/categories?post=4026"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.marketenterprise.vn\/blog\/wp-json\/wp\/v2\/tags?post=4026"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}