{"id":14394,"date":"2021-09-01T01:34:00","date_gmt":"2021-09-01T01:34:00","guid":{"rendered":"https:\/\/freehost.page\/?p=14394"},"modified":"2021-09-01T01:34:00","modified_gmt":"2021-09-01T01:34:00","slug":"do-phan-giai-man-hinh-pho-bien","status":"publish","type":"post","link":"https:\/\/kiencang.net\/do-phan-giai-man-hinh-pho-bien\/","title":{"rendered":"\u0110\u1ed9 ph\u00e2n gi\u1ea3i m\u00e0n h\u00ecnh ph\u1ed5 bi\u1ebfn, \u1ee9ng d\u1ee5ng trong vi\u1ec7c thi\u1ebft k\u1ebf website responsive"},"content":{"rendered":"\n

Ch\u00fang ta bi\u1ebft r\u1eb1ng \u0111\u1ec3 thi\u1ebft k\u1ebf \u0111\u01b0\u1ee3c website \u0111\u00e1p \u1ee9ng (responsive) \u0111\u1eb9p m\u1eaft<\/a>, ch\u00fang ta ph\u1ea3i bi\u1ebft \u0111\u01b0\u1ee3c \u0111i\u1ec3m breakpoint c\u1ee7a m\u00e0n h\u00ecnh \u0111\u1ec3 \u0111\u01b0a v\u00e0o th\u1ebb @media (min-width: Vpx) {\/\/ CSS \u0111\u1eb7t \u1edf \u0111\u00e2y}<\/code><\/p>\n\n\n\n

Trong \u0111\u00f3 V<\/code> l\u00e0 gi\u00e1 tr\u1ecb c\u1ee5 th\u1ec3 ch\u1eb3ng h\u1ea1n @media (min-width: 360px)<\/code> ch\u1ec9 ra r\u1eb1ng m\u00e0n h\u00ecnh t\u1ed1i thi\u1ec3u ph\u1ea3i \u0111\u1ea1t k\u00edch c\u1ee1 n\u00e0y \u0111o\u1ea1n CSS m\u1edbi \u0111\u01b0\u1ee3c th\u1ef1c thi. <\/p>\n\n\n\n

\u0110\u1eb7c bi\u1ec7t tr\u00ean c\u00e1c thi\u1ebft b\u1ecb di \u0111\u1ed9ng c\u00f3 m\u00e0n h\u00ecnh nh\u1ecf t\u1eeb 320px cho \u0111\u1ebfn c\u1ee1 420px vi\u1ec7c ch\u00eanh nhau ch\u1ec9 10 – 15px th\u00f4i m\u00e0 kh\u00f4ng \u0111\u1ec3 \u00fd c\u00f3 th\u1ec3 nh\u1eb9 l\u00e0 l\u00e0m thi\u1ebft k\u1ebf x\u1ea5u \u0111i ch\u00fat \u00edt, m\u00e0 n\u1eb7ng th\u00ec x\u00f4 l\u1ec7ch \u0111\u1ee7 \u0111\u1ec3 x\u1ebfp n\u00f3 v\u00e0o d\u1ea1ng l\u1ed7i.<\/p>\n\n\n\n

Gi\u1edd ho\u1eb7c n\u1ebfu \u0111\u1ee7 s\u1ee9c ch\u00fang ta s\u1ebd vi\u1ebft CSS cho h\u1ea7u h\u1ebft c\u00e1c k\u00edch c\u1ee1 m\u00e0n h\u00ecnh m\u00e0 ta bi\u1ebft, ho\u1eb7c ta bi\u1ebft \u0111\u01b0\u1ee3c c\u00e1c k\u00edch c\u1ee1 m\u00e0n h\u00ecnh ch\u1ee7 y\u1ebfu c\u1ee7a kh\u00e1ch h\u00e0ng r\u1ed3i t\u1eadp trung v\u00e0o \u0111\u00f3 \u0111\u1ec3 n\u1eafn n\u00f3t h\u01a1n.<\/p>\n\n\n\n

H\u00f4m nay t\u00f4i s\u1ebd tr\u00ecnh b\u00e0y 2 d\u1eef li\u1ec7u m\u00e0 t\u00f4i t\u00ecm th\u1ea5y v\u1ec1 \u0111\u1ed9 ph\u00e2n gi\u1ea3i m\u00e0n h\u00ecnh ph\u1ed5 bi\u1ebfn. C\u00e1i th\u1ee9 nh\u1ea5t l\u00e0 c\u1ee7a Statcounter<\/a>, b\u1ea3ng b\u00ean d\u01b0\u1edbi l\u00e0 th\u1ed1ng k\u00ea cho th\u1ecb tr\u01b0\u1eddng Vi\u1ec7t Nam trong kho\u1ea3ng th\u1eddi gian m\u1ed9t n\u0103m t\u1eeb th\u00e1ng b\u1ea3y 2020 \u0111\u1ebfn th\u00e1ng b\u1ea3y 2021.<\/p>\n\n\n\n

Trong d\u1ea5u nh\u00e1y k\u00e9p l\u00e0 k\u00edch c\u1ee1 m\u00e0n h\u00ecnh v\u1edbi chi\u1ec1u r\u1ed9ng tr\u01b0\u1edbc, chi\u1ec1u cao sau. Gi\u00e1 tr\u1ecb cu\u1ed1i c\u00f9ng l\u00e0 t\u1ef7 l\u1ec7 %. D\u00f2ng cu\u1ed1i c\u00f9ng Other l\u00e0 k\u00edch c\u1ee1 m\u00e0n h\u00ecnh m\u00e0 Statcounter kh\u00f4ng thu th\u1eadp \u0111\u01b0\u1ee3c, chi\u1ebfm t\u1ef3 l\u1ec7 22,6%.<\/p>\n\n\n\n

“Screen Resolution”,”Market Share Perc. (July 2020 – July 2021)”
“1366×768”,14.66
“1920×1080”,13.36
“1536×864”,5.93
“360×640”,5.81
“414×736”,4.71
“375×667”,3.61
“414×896”,2.82
“360×760”,2.76
“1440×900”,2.71
“1280×720”,2.68
“360×780”,2.66
“360×800”,2.4
“1600×900”,2.29
“375×812”,1.9
“412×892”,1.88
“412×846”,1.86
“412×915”,1.46
“768×1024”,1.41
“1280×1024”,1.31
“1024×768”,1.19
“Other”,22.6<\/p>\n\n\n\n

Th\u1ed1ng k\u00ea \u1edf tr\u00ean cho th\u1ea5y h\u1ea7u h\u1ebft c\u00e1c thi\u1ebft b\u1ecb m\u00e0n h\u00ecnh nh\u1ecf c\u00f3 k\u00edch c\u1ee1 n\u1eb1m trong kho\u1ea3ng t\u1eeb 360 \u0111\u1ebfn 415px.<\/p>\n\n\n\n

Th\u1ed1ng k\u00ea ti\u1ebfp theo t\u00f4i d\u1ef1a v\u00e0o c\u00e1c website m\u00e0 t\u00f4i \u0111ang qu\u1ea3n l\u00fd. N\u00f3 kh\u00e1 \u0111\u1eb7c tr\u01b0ng, m\u1ed9t website v\u1ec1 d\u1ea1ng c\u00f4ng ngh\u1ec7 m\u00e0 t\u00f4i tin r\u1eb1ng s\u1ebd c\u00f3 t\u1ef7 l\u1ec7 l\u1edbn ng\u01b0\u1eddi d\u00f9ng m\u00e1y b\u00e0n, c\u00f2n m\u1ed9t website v\u1ec1 l\u00e0m \u0111\u1eb9p v\u1edbi kh\u00e1ch truy c\u1eadp ch\u1ee7 y\u1ebfu l\u00e0 n\u1eef m\u00e0 t\u00f4i ngh\u0129 t\u1ef7 l\u1ec7 s\u1ebd ng\u01b0\u1ee3c l\u1ea1i khi m\u00e0n h\u00ecnh nh\u1ecf s\u1ebd l\u00e0 ch\u00ednh. Gi\u1edd ch\u1ec9 l\u00e0 c\u00e1c con s\u1ed1 c\u1ee5 th\u1ec3 s\u1ebd nh\u01b0 th\u1ebf n\u00e0o.<\/p>\n\n\n\n

\n\n\n\n

Trang v\u1ec1 c\u00f4ng ngh\u1ec7 th\u00f4ng tin<\/h2>\n\n\n\n

Th\u00f4ng tin n\u00e0y \u0111\u01b0\u1ee3c l\u1ea5y t\u1eeb th\u1ed1ng k\u00ea c\u1ee7a Google Analytics c\u00e0i tr\u00ean trang (\u0110\u1ed1i t\u01b0\u1ee3ng > Thi\u1ebft b\u1ecb di \u0111\u1ed9ng > T\u1ed5ng quan). \u0110\u00e2y l\u00e0 t\u1ef7 l\u1ec7 theo nh\u00f3m m\u00e1y b\u00e0n, di \u0111\u1ed9ng v\u00e0 m\u00e1y t\u00ednh b\u1ea3ng trong qu\u00e3ng th\u1eddi gian t\u1eeb 1\/12\/2019 \u0111\u1ebfn 1\/9\/2021:<\/p>\n\n\n\n

\"\"<\/figure><\/div>\n\n\n\n

Sau \u0111\u00f3 b\u1ea1n chuy\u1ec3n sang Thi\u1ebft b\u1ecb di \u0111\u1ed9ng > Thi\u1ebft b\u1ecb. \u1ede ngay tr\u00ean c\u1ed9t d\u1eef li\u1ec7u, b\u1ea1n chuy\u1ec3n sang \u0111\u1ed9 ph\u00e2n gi\u1ea3i m\u00e0n h\u00ecnh.<\/p>\n\n\n\n

\"\u0111\u1ed9<\/figure><\/div>\n\n\n\n

\u1ede \u0111\u00e2y n\u00f3 s\u1ebd th\u1ed1ng k\u00ea cho c\u00e1c b\u1ea1n bi\u1ebft \u0111\u1ed9 ph\u00e2n gi\u1ea3i m\u00e0n h\u00ecnh c\u00e1c c\u00e1c thi\u1ebft b\u1ecb di \u0111\u1ed9ng truy c\u1eadp v\u00e0o website. C\u1ee7a t\u00f4i nh\u01b0 sau. G\u1ed3m 25 \u0111\u1ed9 ph\u00e2n gi\u1ea3i nhi\u1ec1u nh\u1ea5t:<\/p>\n\n\n\n

\"\u0111\u1ed9<\/figure><\/div>\n\n\n\n

B\u1ea1n c\u00f3 th\u1ec3 th\u1ea5y \u0111\u1ed9 r\u1ed9ng m\u00e0n h\u00ecnh ch\u1ee7 y\u1ebfu n\u1eb1m trong kho\u1ea3ng t\u1eeb 360 cho \u0111\u1ebfn 415. C\u0103n c\u1ee9 h\u00ecnh tr\u00ean ch\u00fang ta c\u1ea7n:<\/p>\n\n\n\n