{"id":14386,"date":"2021-08-31T22:27:47","date_gmt":"2021-08-31T22:27:47","guid":{"rendered":"https:\/\/freehost.page\/?p=14386"},"modified":"2021-08-31T22:27:47","modified_gmt":"2021-08-31T22:27:47","slug":"cach-tao-website-responsive","status":"publish","type":"post","link":"https:\/\/kiencang.net\/cach-tao-website-responsive\/","title":{"rendered":"Th\u1eed t\u00ecm hi\u1ec3u v\u1ec1 c\u00e1ch t\u1ea1o website Responsive (b\u00e0i 1)"},"content":{"rendered":"\n

Ng\u00e0y nay, m\u1ed9t trang web kh\u00f4ng ch\u1ec9 c\u1ea7n \u0111\u1eb9p m\u1eaft tr\u00ean m\u00e0n h\u00ecnh m\u00e1y t\u00ednh \u0111\u1ec3 b\u00e0n, m\u00e0 c\u00f2n c\u1ea7n \u1ed5n th\u1ecfa tr\u00ean c\u1ea3 m\u00e1y t\u00ednh b\u1ea3ng v\u00e0 \u0111\u1eb7c bi\u1ec7t l\u00e0 thi\u1ebft b\u1ecb di \u0111\u1ed9ng n\u1eefa.<\/p>\n\n\n\n

M\u1ed9t website \u0111\u01b0\u1ee3c g\u1ecdi l\u00e0 responsive n\u1ebfu n\u00f3 c\u00f3 kh\u1ea3 n\u0103ng \u0111\u00e1p \u1ee9ng, thay \u0111\u1ed5i t\u00f9y theo k\u00edch c\u1ee1 m\u00e0n h\u00ecnh c\u1ee7a ng\u01b0\u1eddi d\u00f9ng.<\/p>\n\n\n\n

\u1ede th\u1eddi \u0111i\u1ec3m hi\u1ec7n t\u1ea1i, website \u0111\u01b0\u1ee3c thi\u1ebft k\u1ebf responsive l\u00e0 \u0111i\u1ec1u c\u1ef1c k\u1ef3 quan tr\u1ecdng, v\u00e0 trong th\u1ef1c t\u1ebf l\u00e0 k\u1ef9 thu\u1eadt m\u00e0 b\u1ea1n ph\u1ea3i th\u00e0nh th\u1ea1o n\u1ebfu \u0111\u1ecbnh \u0111i theo con \u0111\u01b0\u1eddng l\u1eadp tr\u00ecnh ho\u1eb7c thi\u1ebft k\u1ebf website.<\/p>\n\n\n\n

Trong b\u00e0i vi\u1ebft n\u00e0y, t\u00f4i s\u1ebd h\u01b0\u1edbng d\u1eabn b\u1ea1n c\u00e1ch d\u1ec5 d\u00e0ng \u0111\u1ec3 x\u00e2y d\u1ef1ng trang responsive v\u00e0 c\u00e1ch \u0111\u1ec3 \u00e1p d\u1ee5ng c\u00e1c k\u1ef9 thu\u1eadt thi\u1ebft k\u1ebf responsive v\u00e0o trang web \u0111\u00e3 x\u00e2y d\u1ef1ng tr\u01b0\u1edbc \u0111\u00e2y ch\u1ec9 trong ba b\u01b0\u1edbc \u0111\u01a1n gi\u1ea3n.<\/p>\n\n\n\n

\n\n\n\n

Layout<\/h2>\n\n\n\n

Khi x\u00e2y d\u1ef1ng m\u1ed9t website responsive, ho\u1eb7c thay \u0111\u1ed5i m\u1ed9t trang \u0111\u00e3 c\u00f3 \u0111\u1ec3 n\u00f3 th\u00e0nh responsive, \u0111i\u1ec1u \u0111\u1ea7u ti\u00ean c\u1ea7n \u0111\u1ec3 \u00fd l\u00e0 layout.<\/p>\n\n\n\n

Khi t\u00f4i x\u00e2y d\u1ef1ng m\u1ed9t website responsive, t\u00f4i lu\u00f4n lu\u00f4n b\u1eaft \u0111\u1ea7u b\u1eb1ng vi\u1ec7c t\u1ea1o m\u1ed9t layout kh\u00f4ng-ph\u1ea3i-responsive, c\u1ed1 \u0111\u1ecbnh \u1edf m\u1ed9t k\u00edch c\u1ee1 m\u1eb7c \u0111\u1ecbnh n\u00e0o \u0111\u00f3. L\u1ea5y v\u00ed d\u1ee5 trang CatsWhoCode c\u00f3 k\u00edch c\u1ee1 m\u1eb7c \u0111\u1ecbnh l\u00e0 1100px.<\/p>\n\n\n\n

Khi t\u00f4i \u0111\u00e3 h\u00e0i l\u00f2ng v\u1edbi layout kh\u00f4ng ph\u1ea3n h\u1ed3i r\u1ed3i, t\u00f4i s\u1ebd th\u00eam c\u00e1c c\u00e2u l\u1ec7nh media v\u00e0 thay \u0111\u1ed5i m\u1ed9t ch\u00fat CSS c\u1ee7a m\u00ecnh \u0111\u1ec3 t\u1ea1o ra trang reponsive. Khi n\u00f3i \u0111\u1ebfn chuy\u1ec7n thi\u1ebft k\u1ebf web, c\u00e1ch d\u1ec5 d\u00e0ng l\u00e0 t\u1eadp trung v\u00e0o m\u1ed9t nhi\u1ec7m v\u1ee5 t\u1ea1i m\u1ed9t th\u1eddi \u0111i\u1ec3m.<\/p>\n\n\n\n

Khi b\u1ea1n \u0111\u00e3 ho\u00e0n th\u00e0nh xong layout kh\u00f4ng-ph\u1ea3i-responsive, \u0111i\u1ec1u \u0111\u1ea7u ti\u00ean c\u1ea7n l\u00e0m l\u00e0 b\u1ea1n copy – paste c\u00e1c d\u00f2ng d\u01b0\u1edbi \u0111\u00e2y v\u00e0 \u0111\u01b0a n\u00f3 v\u00e0o trong th\u1ebb m\u1edf <head><\/code> v\u00e0 \u0111\u00f3ng <\/head><\/code> tr\u00ean trang HTML c\u1ee7a b\u1ea1n.<\/p>\n\n\n\n

<meta name=\"viewport\" content=\"width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no\">\n<meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge,chrome=1\">\n<meta name=\"HandheldFriendly\" content=\"true\"><\/code><\/pre>\n\n\n\n
\u0110i\u1ec1u n\u00e0y s\u1ebd thi\u1ebft l\u1eadp ch\u1ebf \u0111\u1ed9 xem tr\u00ean t\u1ea5t c\u1ea3 m\u00e0n h\u00ecnh \u1edf t\u1ef7 l\u1ec7 1 x 1 v\u00e0 lo\u1ea1i b\u1ecf t\u1ea5t c\u1ea3 ch\u1ee9c n\u0103ng m\u1eb7c \u0111\u1ecbnh c\u1ee7a iPhone c\u0169ng nh\u01b0 c\u00e1c thi\u1ebft b\u1ecb di d\u1ed9ng kh\u00e1c, c\u00e1i m\u00e0 s\u1ebd render website \u1edf ch\u1ebf \u0111\u1ed9 xem full v\u00e0 cho ph\u00e9p ng\u01b0\u1eddi d\u00f9ng zoom v\u00e0o layout b\u1eb1ng c\u00e1ch d\u00f9ng 2 ng\u00f3n tay ch\u1ee5m l\u1ea1i r\u1ed3i m\u1edf r\u1ed9ng ra (pinching).<\/p>\n\n\n\n
Gi\u1edd \u0111\u1ebfn l\u00fac b\u1ed5 sung m\u1ed9t s\u1ed1 c\u00e2u l\u1ec7nh media. Theo nh\u01b0 trang W3C<\/a>, c\u00e2u l\u1ec7nh media bao g\u1ed3m m\u1ed9t lo\u1ea1t c\u00e1c media type v\u00e0 kh\u00f4ng c\u00f3 ho\u1eb7c c\u00f3 nhi\u1ec1u bi\u1ec3u th\u1ee9c d\u00f9ng \u0111\u1ec3 ki\u1ec3m tra tr\u1ea1ng th\u00e1i ch\u1ee9c n\u0103ng c\u1ee7a m\u1ed9t thi\u1ebft b\u1ecb c\u1ee5 th\u1ec3. B\u1eb1ng c\u00e1ch s\u1eed d\u1ee5ng c\u00e2u l\u1ec7nh media, giao di\u1ec7n hi\u1ec3n th\u1ecb c\u00f3 th\u1ec3 \u0111\u01b0\u1ee3c “\u0111o ni \u0111\u00f3ng gi\u1ea7y” cho m\u1ed9t kho\u1ea3ng m\u00e0n h\u00ecnh \u0111\u1ea7u ra c\u1ee5 th\u1ec3 m\u00e0 kh\u00f4ng c\u1ea7n ph\u1ea3i thay \u0111\u1ed5i n\u1ed9i dung c\u1ee7a ch\u00ednh n\u00f3<\/em>.<\/p>\n\n\n\n
N\u00f3i c\u00e1ch kh\u00e1c, c\u00e2u l\u1ec7nh media cho ph\u00e9p website c\u1ee7a b\u1ea1n tr\u00f4ng \u0111\u1eb9p m\u1eaft h\u01a1n tr\u00ean t\u1ea5t c\u1ea3 c\u00e1c lo\u1ea1i m\u00e0n h\u00ecnh t\u1eeb m\u00e0n h\u00ecnh di \u0111\u1ed9ng cho t\u1edbi m\u00e0n h\u00ecnh l\u1edbn. \u0110i\u1ec1u n\u00e0y g\u1ecdi l\u00e0 thi\u1ebft k\u1ebf website responsive<\/strong>.<\/p>\n\n\n\n
C\u00e2u l\u1ec7nh media ph\u1ee5 thu\u1ed9c v\u00e0o layout website c\u1ee7a b\u1ea1n, v\u00ec th\u1ebf n\u00f3 kh\u00e1 kh\u00f3 kh\u0103n \u0111\u1ec3 t\u00f4i cung c\u1ea5p cho b\u1ea1n m\u00e3 m\u1eabu s\u1eed d\u1ee5ng ngay v\u00e0 lu\u00f4n. Tuy v\u1eady, \u0111o\u1ea1n m\u00e3 b\u00ean d\u01b0\u1edbi s\u1ebd l\u00e0 \u0111i\u1ec3m b\u1eaft \u0111\u1ea7u t\u1ed1t cho h\u1ea7u h\u1ebft website. Trong v\u00ed d\u1ee5 n\u00e0y, #primary<\/code> l\u00e0 ph\u1ea7n n\u1ed9i dung ch\u00ednh, v\u00e0 #secondary<\/code> l\u00e0 sidebar.<\/p>\n\n\n\n
B\u1eb1ng c\u00e1ch nh\u00ecn k\u1ef9 h\u01a1n v\u00e0o m\u00e3, b\u1ea1n c\u00f3 th\u1ec3 th\u1ea5y r\u1eb1ng t\u00f4i \u0111\u1ecbnh ngh\u0129a hai k\u00edch c\u1ee1. C\u00e1i \u0111\u1ea7u ti\u00ean c\u00f3 chi\u1ec1u r\u1ed9ng t\u1ed1i \u0111a l\u00e0 1060px v\u00e0 \u0111\u01b0\u1ee3c t\u1ed1i \u01b0u cho vi\u1ec7c hi\u1ec3n th\u1ecb cho m\u00e0n h\u00ecnh ngang m\u00e1y t\u00ednh b\u1ea3ng. #primary<\/code> chi\u1ebfm 67% th\u1ebb bao cha c\u1ee7a n\u00f3, v\u00e0 #secondary<\/code> th\u00ec chi\u1ebfm 30%, v\u1edbi 3% c\u00f2n l\u1ea1i t\u00f4i d\u00e0nh cho l\u1ec1 tr\u00e1i.<\/p>\n\n\n\n
K\u00edch c\u1ee1 ti\u1ebfp theo \u0111\u01b0\u1ee3c thi\u1ebft k\u1ebf cho m\u00e0n h\u00ecnh m\u00e1y t\u00ednh b\u1ea3ng \u1edf d\u1ea1ng \u0111\u1ee9ng v\u00e0 c\u00e1c k\u00edch c\u1ee1 m\u00e0n h\u00ecnh nh\u1ecf h\u01a1n. Do c\u00e1c k\u00edch c\u1ee1 nh\u1ecf c\u1ee7a m\u00e0n h\u00ecnh \u0111i\u1ec7n tho\u1ea1i, t\u00f4i quy\u1ebft \u0111\u1ecbnh \u0111\u1ec3 #primary<\/code> c\u00f3 chi\u1ec1u r\u1ed9ng 100%. #secondary<\/code> c\u0169ng c\u00f3 k\u00edch c\u1ee1 chi\u1ec1u r\u1ed9ng 100%, v\u00e0 s\u1ebd hi\u1ec3n th\u1ecb b\u00ean d\u01b0\u1edbi #primary<\/code>.<\/p>\n\n\n\n
Nh\u01b0 t\u00f4i \u0111\u00e3 n\u00f3i t\u1eeb tr\u01b0\u1edbc, b\u1ea1n c\u00f3 th\u1ec3 \u0111i\u1ec1u ch\u1ec9nh m\u00e3 b\u00ean d\u01b0\u1edbi \u00edt nhi\u1ec1u \u0111\u1ec3 n\u00f3 kh\u1edbp v\u1edbi tr\u01b0\u1eddng h\u1ee3p c\u1ee5 th\u1ec3 tr\u00ean website c\u1ee7a b\u1ea1n. Th\u00eam n\u00f3 v\u00e0o file .css<\/code> tr\u00ean website c\u1ee7a b\u1ea1n.<\/p>\n\n\n\n
\/* Media Queries: Tablet Landscape *\/\n@media screen and (max-width: 1060px) {\n    #primary { width:67%; }\n    #secondary { width:30%; margin-left:3%;}  \n}\n\n\/* Media Queries: Tabled Portrait *\/\n@media screen and (max-width: 768px) {\n    #primary { width:100%; }\n    #secondary { width:100%; margin:0; border:none; }\n}<\/code><\/pre>\n\n\n\n
Sau khi l\u00e0m xong, h\u00e3y xem layout c\u1ee7a b\u1ea1n responsive nh\u01b0 th\u1ebf n\u00e0o, \u0111\u1ec3 l\u00e0m \u0111i\u1ec1u \u0111\u00f3 t\u00f4i s\u1eed d\u1ee5ng c\u00f4ng c\u1ee5 tuy\u1ec7t v\u1eddi n\u00e0y c\u1ee7a Matt Kersley<\/a>. T\u1ea5t nhi\u00ean b\u1ea1n c\u0169ng c\u00f3 th\u1ec3 ki\u1ec3m tra k\u1ebft qu\u1ea3 tr\u00ean thi\u1ebft b\u1ecb di \u0111\u1ed9ng c\u1ee7a b\u1ea1n.<\/p>\n\n\n\n
\n\n\n\n
\u1ea2nh v\u00e0 c\u00e1c t\u00e0i nguy\u00ean \u0111a ph\u01b0\u01a1ng ti\u1ec7n kh\u00e1c<\/h2>\n\n\n\n
M\u1ed9t layout \u0111\u00e1p \u1ee9ng l\u00e0 \u0111i\u1ec1u \u0111\u1ea7u ti\u00ean c\u1ea7n c\u00f3 \u0111\u1ec3 t\u1ea1o th\u00e0nh website \u0111\u00e1p \u1ee9ng ho\u00e0n thi\u1ec7n. Gi\u1edd ch\u00fang ta s\u1ebd t\u1eadp trung v\u00e0o c\u00e1c kh\u00eda c\u1ea1nh quan tr\u1ecdng kh\u00e1c c\u1ee7a m\u1ed9t website \u0111a ph\u01b0\u01a1ng ti\u1ec7n \u0111\u00f3 l\u00e0 media, ch\u1eb3ng h\u1ea1n nh\u01b0 video v\u00e0 \u1ea3nh.<\/p>\n\n\n\n
\u0110o\u1ea1n m\u00e3 CSS b\u00ean d\u01b0\u1edbi s\u1ebd \u0111\u1ea3m b\u1ea3o \u1ea3nh c\u1ee7a b\u1ea1n kh\u00f4ng bao gi\u1edd l\u1edbn h\u01a1n so v\u1edbi th\u1ebb bao quanh n\u00f3 (th\u1ebb cha). \u0110i\u1ec1u n\u00e0y l\u00e0 c\u1ef1c k\u1ef3 \u0111\u01a1n gi\u1ea3n v\u00e0 n\u00f3 ho\u1ea1t \u0111\u1ed9ng tr\u00ean h\u1ea7u h\u1ebft c\u00e1c website responsive. \u0110\u1ec3 ch\u1ee9c n\u0103ng ho\u1ea1t \u0111\u1ed9ng ch\u00ednh x\u00e1c, \u0111o\u1ea1n m\u00e3 n\u00e0y c\u1ea7n \u0111\u01b0\u1ee3c ch\u00e8n v\u00e0o b\u00ean trong file stylesheet CSS c\u1ee7a b\u1ea1n.<\/p>\n\n\n\n
img { max-width: 100%; height: auto; }<\/code><\/pre>\n\n\n\n
M\u1eb7c d\u00f9 k\u1ef9 thu\u1eadt tr\u00ean c\u00f3 hi\u1ec7u qu\u1ea3, \u0111\u00f4i khi b\u1ea1n c\u00f3 th\u1ec3 c\u1ea7n l\u00e0m ch\u1ee7 nhi\u1ec1u h\u01a1n n\u1eefa h\u00ecnh \u1ea3nh v\u00e0 hi\u1ec3n th\u1ecb c\u00e1c h\u00ecnh kh\u00e1c t\u00f9y theo k\u00edch c\u1ee1 m\u00e0n h\u00ecnh c\u1ee7a kh\u00e1ch truy c\u1eadp.<\/p>\n\n\n\n
D\u01b0\u1edbi \u0111\u00e2y l\u00e0 k\u1ef9 thu\u1eadt \u0111\u01b0\u1ee3c ph\u00e1t tri\u1ec3n b\u1edfi Nicolas Gallagher<\/a>. H\u00e3y c\u00f9ng xem \u0111o\u1ea1n m\u00e3 HTML:<\/p>\n\n\n\n
<img src=\"image.jpg\"\n     data-src-600px=\"image-600px.jpg\"\n     data-src-800px=\"image-800px.jpg\"\n     alt=\"\"><\/code><\/pre>\n\n\n\n
Nh\u01b0 b\u1ea1n c\u00f3 th\u1ec3 th\u1ea5y, ch\u00fang ta s\u1eed d\u1ee5ng thu\u1ed9c t\u00ednh data-*<\/code> \u0111\u1ec3 l\u01b0u tr\u1eef c\u00e1c url \u1ea3nh thay th\u1ebf. Gi\u1edd h\u00e3y s\u1eed d\u1ee5ng s\u1ee9c m\u1ea1nh to\u00e0n di\u1ec7n c\u1ee7a CSS3 \u0111\u1ec3 thay th\u1ebf \u1ea3nh m\u1eb7c \u0111\u1ecbnh b\u1eb1ng m\u1ed9t \u1ea3nh c\u1ee5 th\u1ec3 th\u1ebf v\u00e0o n\u1ebfu \u0111i\u1ec1u ki\u1ec7n v\u1ec1 min-devide-width<\/code> \u0111\u01b0\u1ee3c so kh\u1edbp ch\u00ednh x\u00e1c:<\/p>\n\n\n\n
@media (min-device-width:600px) {\n    img[data-src-600px] {\n        content: attr(data-src-600px, url);\n    }\n}\n\n@media (min-device-width:800px) {\n    img[data-src-800px] {\n        content: attr(data-src-800px, url);\n    }\n}<\/code><\/pre>\n\n\n\n
Th\u1eadt \u1ea5n t\u01b0\u1ee3ng \u0111\u00fang kh\u00f4ng n\u00e0o? Gi\u1edd h\u00e3y nh\u00ecn v\u00e0o th\u00e0nh ph\u1ea7n media kh\u00e1c c\u0169ng r\u1ea5t quan tr\u1ecdng tr\u00ean nhi\u1ec1u website hi\u1ec7n nay: video.<\/p>\n\n\n\n
H\u1ea7u h\u1ebft c\u00e1c website s\u1eed d\u1ee5ng video t\u1eeb d\u1ecbch v\u1ee5 c\u1ee7a b\u00ean th\u1ee9 ba, ch\u1eb3ng h\u1ea1n nh\u01b0 YouTube ho\u1eb7c Vimeo, t\u00f4i quy\u1ebft \u0111\u1ecbnh t\u1eadp trung v\u00e0o k\u1ef9 thu\u1eadt video co gi\u00e3n c\u1ee7a Nick La<\/a>. \u0110\u00e2y l\u00e0 k\u1ef9 thu\u1eadt cho ph\u00e9p b\u1ea1n t\u1ea1o video nh\u00fang c\u00f3 kh\u1ea3 n\u0103ng \u0111\u00e1p \u1ee9ng. <\/p>\n\n\n\n
HTML:<\/p>\n\n\n\n
<div class=\"video-container\">\n\t<iframe src=\"http:\/\/player.vimeo.com\/video\/6284199?title=0&byline=0&portrait=0\" width=\"800\" height=\"450\" frameborder=\"0\"><\/iframe>\n<\/div><\/code><\/pre>\n\n\n\n
V\u00e0 b\u00e2y gi\u1edd l\u00e0 \u0111o\u1ea1n m\u00e3 CSS:<\/p>\n\n\n\n
.video-container {\n\tposition: relative;\n\tpadding-bottom: 56.25%;\n\tpadding-top: 30px;\n\theight: 0;\n\toverflow: hidden;\n}\n\n.video-container iframe,  \n.video-container object,  \n.video-container embed {\n\tposition: absolute;\n\ttop: 0;\n\tleft: 0;\n\twidth: 100%;\n\theight: 100%;\n}<\/code><\/pre>\n\n\n\n
Sau khi b\u1ea1n \u00e1p d\u1ee5ng \u0111o\u1ea1n m\u00e3 tr\u00ean v\u00e0o website, video nh\u00fang gi\u1edd s\u1ebd tr\u1edf n\u00ean c\u00f3 kh\u1ea3 n\u0103ng \u0111\u00e1p \u1ee9ng<\/p>\n\n\n\n
\n\n\n\n
Ch\u1eef<\/h2>\n\n\n\n
B\u01b0\u1edbc cu\u1ed1i c\u00f9ng trong h\u01b0\u1edbng d\u1eabn n\u00e0y ch\u1eafc ch\u1eafn r\u1ea5t quan tr\u1ecdng, nh\u01b0ng n\u00f3 th\u01b0\u1eddng b\u1ecb b\u1ecf qu\u00ean b\u1edfi c\u00e1c l\u1eadp tr\u00ecnh vi\u00ean khi h\u1ecd th\u1ef1c hi\u1ec7n c\u00e1c website responsive, \u0111\u00f3 l\u00e0 Typography, t\u00ean g\u1ecdi t\u1ed5ng th\u1ec3 cho vi\u1ec7c s\u1eed d\u1ee5ng ch\u1eef tr\u00ean website.<\/p>\n\n\n\n
Cho \u0111\u1ebfn kho\u1ea3ng th\u1eddi gian g\u1ea7n \u0111\u00e2y, h\u1ea7u h\u1ebft l\u1eadp tr\u00ecnh vi\u00ean s\u1eed d\u1ee5ng pixel \u0111\u1ec3 \u0111\u1ecbnh ngh\u0129a k\u00edch c\u1ee1 font. Trong khi pixel c\u0169ng \u1ed5n khi b\u1ea1n c\u00f3 website c\u00f3 chi\u1ec1u r\u1ed9ng c\u1ed1 \u0111\u1ecbnh, th\u00ec v\u1edbi website responsive b\u1ea1n c\u0169ng ph\u1ea3i c\u00f3 font responsive. K\u00edch c\u1ee1 font tr\u00ean trang c\u1ee7a b\u1ea1n ph\u1ea3i li\u00ean quan \u0111\u1ebfn chi\u1ec1u r\u1ed9ng c\u1ee7a th\u1ebb cha ch\u1ee9a n\u00f3, v\u00ec th\u1ebf n\u00f3 c\u00f3 th\u1ec3 \u0111\u00e1p \u1ee9ng theo m\u00e0n h\u00ecnh c\u1ee7a kh\u00e1ch h\u00e0ng v\u00e0 d\u1ec5 d\u00e0ng \u0111\u1ecdc \u0111\u01b0\u1ee3c tr\u00ean thi\u1ebft b\u1ecb di \u0111\u1ed9ng.<\/p>\n\n\n\n
\u0110\u1eb7c t\u1ea3 c\u1ee7a CSS3 c\u00f3 n\u00f3i v\u1ec1 m\u1ed9t \u0111\u1ee3n v\u1ecb m\u1edbi c\u00f3 t\u00ean rems<\/code>. Ch\u00fang ho\u1ea1t \u0111\u1ed9ng g\u1ea7n t\u01b0\u01a1ng t\u1ef1 v\u1edbi \u0111\u01a1n v\u1ecb em<\/code>, nh\u01b0ng t\u01b0\u01a1ng quan \u0111\u1ebfn ph\u1ea7n t\u1eed html<\/code>, c\u00e1i l\u00e0m cho ch\u00fang d\u1ec5 s\u1eed d\u1ee5ng h\u01a1n nhi\u1ec1u so v\u1edbi em<\/code>.<\/p>\n\n\n\n
V\u00ec rems<\/code> t\u01b0\u01a1ng quan v\u1edbi ph\u1ea7n t\u1eed html<\/code>, b\u1ea1n kh\u00f4ng \u0111\u01b0\u1ee3c ph\u00e9p qu\u00ean reset l\u1ea1i k\u00edch c\u1ee1 font c\u1ee7a html<\/code>:<\/p>\n\n\n\n
html {font-size:100%;}<\/code><\/pre>\n\n\n\n
Sau khi l\u00e0m \u0111i\u1ec1u n\u00e0y xong, b\u1ea1n c\u00f3 th\u1ec3 \u0111\u1ecbnh ngh\u0129a k\u00edch c\u1ee1 font \u0111\u00e1p \u1ee9ng nh\u01b0 h\u00ecnh b\u00ean d\u01b0\u1edbi:<\/p>\n\n\n\n
@media (min-width: 640px) { body {font-size:1rem;} } \n@media (min-width:960px) { body {font-size:1.2rem;} } \n@media (min-width:1100px) { body {font-size:1.5rem;} } <\/code><\/pre>\n\n\n\n
\u0110\u1ec3 c\u00f3 \u0111\u01b0\u1ee3c th\u00f4ng tin chi ti\u1ebft h\u01a1n v\u1ec1 \u0111\u01a1n v\u1ecb rem<\/code>, t\u00f4i khuy\u00ean b\u1ea1n n\u00ean tham kh\u1ea3o b\u00e0i vi\u1ebft h\u1eefu \u00edch n\u00e0y<\/a>. C\u0169ng nh\u01b0 nh\u1edb \u0111\u1ec3 \u00fd \u0111\u1ebfn b\u00e0i vi\u1ebft h\u01b0\u1edbng d\u1eabn v\u1ec1 c\u00e1c k\u1ef9 thu\u1eadt t\u1ea1o ra website responsive<\/a>.<\/p>\n\n\n\n
(D\u1ecbch t\u1eeb b\u00e0i vi\u1ebft: How to Make a Responsive Website in 3 Easy Steps, tr\u00ean website CatsWhoCode<\/a>)<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"
Ng\u00e0y nay, m\u1ed9t trang web kh\u00f4ng ch\u1ec9 c\u1ea7n \u0111\u1eb9p m\u1eaft tr\u00ean m\u00e0n h\u00ecnh m\u00e1y t\u00ednh \u0111\u1ec3 b\u00e0n, m\u00e0 c\u00f2n c\u1ea7n \u1ed5n th\u1ecfa tr\u00ean c\u1ea3 m\u00e1y t\u00ednh b\u1ea3ng v\u00e0 \u0111\u1eb7c bi\u1ec7t l\u00e0 thi\u1ebft b\u1ecb di \u0111\u1ed9ng n\u1eefa. M\u1ed9t website \u0111\u01b0\u1ee3c g\u1ecdi l\u00e0 responsive n\u1ebfu n\u00f3 c\u00f3 kh\u1ea3 n\u0103ng \u0111\u00e1p \u1ee9ng, thay \u0111\u1ed5i t\u00f9y theo k\u00edch c\u1ee1 …<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[229],"tags":[],"yoast_head":"\nTh\u1eed t\u00ecm hi\u1ec3u v\u1ec1 c\u00e1ch t\u1ea1o website Responsive (b\u00e0i 1) • Ki\u1ebfn c\u00e0ng<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kiencang.net\/cach-tao-website-responsive\/\" \/>\n<meta property=\"og:locale\" content=\"vi_VN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Th\u1eed t\u00ecm hi\u1ec3u v\u1ec1 c\u00e1ch t\u1ea1o website Responsive (b\u00e0i 1) • Ki\u1ebfn c\u00e0ng\" \/>\n<meta property=\"og:description\" content=\"Ng\u00e0y nay, m\u1ed9t trang web kh\u00f4ng ch\u1ec9 c\u1ea7n \u0111\u1eb9p m\u1eaft tr\u00ean m\u00e0n h\u00ecnh m\u00e1y t\u00ednh \u0111\u1ec3 b\u00e0n, m\u00e0 c\u00f2n c\u1ea7n \u1ed5n th\u1ecfa tr\u00ean c\u1ea3 m\u00e1y t\u00ednh b\u1ea3ng v\u00e0 \u0111\u1eb7c bi\u1ec7t l\u00e0 thi\u1ebft b\u1ecb di \u0111\u1ed9ng n\u1eefa. M\u1ed9t website \u0111\u01b0\u1ee3c g\u1ecdi l\u00e0 responsive n\u1ebfu n\u00f3 c\u00f3 kh\u1ea3 n\u0103ng \u0111\u00e1p \u1ee9ng, thay \u0111\u1ed5i t\u00f9y theo k\u00edch c\u1ee1 …\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kiencang.net\/cach-tao-website-responsive\/\" \/>\n<meta property=\"og:site_name\" content=\"Ki\u1ebfn c\u00e0ng\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/anhducnguyen87\/\" \/>\n<meta property=\"article:published_time\" content=\"2021-08-31T22:27:47+00:00\" \/>\n<meta name=\"author\" content=\"Nguy\u1ec5n \u0110\u1ee9c Anh\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u0110\u01b0\u1ee3c vi\u1ebft b\u1edfi\" \/>\n\t<meta name=\"twitter:data1\" content=\"Nguy\u1ec5n \u0110\u1ee9c Anh\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u01af\u1edbc t\u00ednh th\u1eddi gian \u0111\u1ecdc\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 ph\u00fat\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Th\u1eed t\u00ecm hi\u1ec3u v\u1ec1 c\u00e1ch t\u1ea1o website Responsive (b\u00e0i 1) • Ki\u1ebfn c\u00e0ng","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kiencang.net\/cach-tao-website-responsive\/","og_locale":"vi_VN","og_type":"article","og_title":"Th\u1eed t\u00ecm hi\u1ec3u v\u1ec1 c\u00e1ch t\u1ea1o website Responsive (b\u00e0i 1) • Ki\u1ebfn c\u00e0ng","og_description":"Ng\u00e0y nay, m\u1ed9t trang web kh\u00f4ng ch\u1ec9 c\u1ea7n \u0111\u1eb9p m\u1eaft tr\u00ean m\u00e0n h\u00ecnh m\u00e1y t\u00ednh \u0111\u1ec3 b\u00e0n, m\u00e0 c\u00f2n c\u1ea7n \u1ed5n th\u1ecfa tr\u00ean c\u1ea3 m\u00e1y t\u00ednh b\u1ea3ng v\u00e0 \u0111\u1eb7c bi\u1ec7t l\u00e0 thi\u1ebft b\u1ecb di \u0111\u1ed9ng n\u1eefa. M\u1ed9t website \u0111\u01b0\u1ee3c g\u1ecdi l\u00e0 responsive n\u1ebfu n\u00f3 c\u00f3 kh\u1ea3 n\u0103ng \u0111\u00e1p \u1ee9ng, thay \u0111\u1ed5i t\u00f9y theo k\u00edch c\u1ee1 …","og_url":"https:\/\/kiencang.net\/cach-tao-website-responsive\/","og_site_name":"Ki\u1ebfn c\u00e0ng","article_author":"https:\/\/www.facebook.com\/anhducnguyen87\/","article_published_time":"2021-08-31T22:27:47+00:00","author":"Nguy\u1ec5n \u0110\u1ee9c Anh","twitter_card":"summary_large_image","twitter_misc":{"\u0110\u01b0\u1ee3c vi\u1ebft b\u1edfi":"Nguy\u1ec5n \u0110\u1ee9c Anh","\u01af\u1edbc t\u00ednh th\u1eddi gian \u0111\u1ecdc":"7 ph\u00fat"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/kiencang.net\/cach-tao-website-responsive\/","url":"https:\/\/kiencang.net\/cach-tao-website-responsive\/","name":"Th\u1eed t\u00ecm hi\u1ec3u v\u1ec1 c\u00e1ch t\u1ea1o website Responsive (b\u00e0i 1) • Ki\u1ebfn c\u00e0ng","isPartOf":{"@id":"https:\/\/kiencang.net\/#website"},"datePublished":"2021-08-31T22:27:47+00:00","dateModified":"2021-08-31T22:27:47+00:00","author":{"@id":"https:\/\/kiencang.net\/#\/schema\/person\/5e7e1a04d8d1218ad8c421ba43d25c16"},"breadcrumb":{"@id":"https:\/\/kiencang.net\/cach-tao-website-responsive\/#breadcrumb"},"inLanguage":"vi","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kiencang.net\/cach-tao-website-responsive\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/kiencang.net\/cach-tao-website-responsive\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kiencang.net\/"},{"@type":"ListItem","position":2,"name":"Th\u1eed t\u00ecm hi\u1ec3u v\u1ec1 c\u00e1ch t\u1ea1o website Responsive (b\u00e0i 1)"}]},{"@type":"WebSite","@id":"https:\/\/kiencang.net\/#website","url":"https:\/\/kiencang.net\/","name":"Ki\u1ebfn c\u00e0ng","description":"\u00d4m l\u00fd thuy\u1ebft, h\u00f4n th\u1ef1c h\u00e0nh","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kiencang.net\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"vi"},{"@type":"Person","@id":"https:\/\/kiencang.net\/#\/schema\/person\/5e7e1a04d8d1218ad8c421ba43d25c16","name":"Nguy\u1ec5n \u0110\u1ee9c Anh","image":{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/kiencang.net\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/6d71f9b89393952a8382e30dad26c1ec?s=96&d=monsterid&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/6d71f9b89393952a8382e30dad26c1ec?s=96&d=monsterid&r=g","caption":"Nguy\u1ec5n \u0110\u1ee9c Anh"},"description":"Sinh n\u0103m 1987, t\u1ed1t nghi\u1ec7p Cao \u0111\u1eb3ng th\u1ef1c h\u00e0nh FPT qu\u00e3ng 2014, chuy\u00ean ng\u00e0nh Thi\u1ebft k\u1ebf website. T\u00f4i th\u00edch Content, SEO, Ads, T\u0103ng t\u1ed1c website v\u00e0 Th\u01b0\u01a1ng m\u1ea1i \u0111i\u1ec7n t\u1eed. B\u00ean c\u1ea1nh b\u00e0i t\u1ef1 vi\u1ebft, t\u00f4i c\u0169ng d\u1ecbch nhi\u1ec1u n\u1ed9i dung th\u00fa v\u1ecb c\u1ee7a c\u00e1c t\u00e1c gi\u1ea3 kh\u00e1c nhau. FB c\u00e1 nh\u00e2n: facebook.com\/anhducnguyen87. Email li\u00ean h\u1ec7: guiemailchotoi@gmail.com","sameAs":["https:\/\/www.facebook.com\/anhducnguyen87\/"],"url":"https:\/\/kiencang.net\/author\/admin\/"}]}},"_links":{"self":[{"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/posts\/14386"}],"collection":[{"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/comments?post=14386"}],"version-history":[{"count":0,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/posts\/14386\/revisions"}],"wp:attachment":[{"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/media?parent=14386"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/categories?post=14386"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/tags?post=14386"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}