{"id":2648,"date":"2020-06-24T20:41:07","date_gmt":"2020-06-24T13:41:07","guid":{"rendered":"https:\/\/webvocuc.com\/blog\/?p=2648"},"modified":"2022-01-16T11:53:49","modified_gmt":"2022-01-16T04:53:49","slug":"thiet-ke-web-responsive-nguyen-tac-co-ban","status":"publish","type":"post","link":"https:\/\/webvocuc.com\/blog\/thiet-ke-web-responsive-nguyen-tac-co-ban.html","title":{"rendered":"Thi\u1ebft k\u1ebf web responsive – Nguy\u00ean t\u1eafc c\u01a1 b\u1ea3n"},"content":{"rendered":"

Thi\u1ebft k\u1ebf web responsive<\/strong><\/a> – Nguy\u00ean t\u1eafc c\u01a1 b\u1ea3n.\u00a0Responsive Web Design (RWD) l\u00e0 xu h\u01b0\u1edbng thi\u1ebft k\u1ebf website t\u01b0\u01a1ng th\u00edch v\u1edbi m\u1ecdi k\u00edch th\u01b0\u1edbc v\u00e0 m\u00e0n h\u00ecnh thi\u1ebft b\u1ecb hi\u1ec3n th\u1ecb.<\/p>\n

Responsive<\/a> v\u00e0 Adaptive web design (AWD) \u0111\u1ec1u h\u01b0\u1edbng \u0111\u1ebfn m\u1ed9t m\u1ee5c ti\u00eau chung. \u0110\u00f3 l\u00e0 \u0111\u1ea3m b\u1ea3o website hi\u1ec3n th\u1ecb \u0111\u1ea7y \u0111\u1ee7 ch\u1ee9c n\u0103ng tr\u00ean b\u1ea5t k\u00ec thi\u1ebft b\u1ecb n\u00e0o, cung c\u1ea5p tr\u1ea3i nghi\u1ec7m t\u1ed1t nh\u1ea5t cho ng\u01b0\u1eddi s\u1eed d\u1ee5ng. V\u1ec1 c\u0103n b\u1ea3n, hai kh\u00e1i ni\u1ec7m n\u00e0y l\u1ea1i ho\u00e0n to\u00e0n kh\u00e1c bi\u1ec7t.<\/p>\n

\"thi\u1ebft<\/p>\n

D\u00f2ng ch\u1ea3y hi\u1ec3n th\u1ecb<\/h2>\n

K\u00edch th\u01b0\u1edbc m\u00e0n h\u00ecnh \u0111ang ng\u00e0y c\u00e0ng nh\u1ecf l\u1ea1i, t\u1eeb m\u00e1y t\u00ednh chuy\u1ec3n sang m\u00e1y t\u00ednh b\u1ea3ng, m\u00e0n h\u00ecnh \u0111i\u1ec7n tho\u1ea1i hay th\u1eadm ch\u00ed l\u00e0 tr\u00ean \u0111\u1ed3ng h\u1ed3 \u0111i\u1ec7n t\u1eed v\u00e0 c\u00e1c thi\u1ebft b\u1ecb kh\u00e1c. Th\u1ebf nh\u01b0ng xu h\u01b0\u1edbng ng\u01b0\u1eddi d\u00f9ng v\u1eabn kh\u00f4ng thay \u0111\u1ed5i, h\u1ecd v\u1eabn s\u1ebd l\u01b0\u1edbt m\u00e0n h\u00ecnh t\u1eeb tr\u00ean xu\u1ed1ng \u0111\u1ec3 xem n\u1ed9i dung hi\u1ec3n th\u1ecb. \u0110\u1ed3ng ngh\u0129a v\u1edbi vi\u1ec7c content v\u00e0 b\u1ea5t k\u00ec chi ti\u1ebft n\u00e0o xu\u1ea5t hi\u1ec7n \u0111\u1ec1u s\u1ebd c\u00f3 xu h\u01b0\u1edbng tr\u00f4i xu\u1ed1ng d\u01b0\u1edbi, v\u00e0 ch\u00fang ta g\u1ecdi \u0111\u00f3 l\u00e0 \u201cd\u00f2ng ch\u1ea3y\u201d hi\u1ec3n th\u1ecb.<\/p>\n

Ng\u01b0\u1eddi d\u00f9ng xem n\u1ed9i dung hi\u1ec3n th\u1ecb theo chi\u1ec1u t\u1eeb tr\u00ean xu\u1ed1ng<\/h2>\n

\u0110\u00e2y \u0111\u01b0\u1ee3c coi nh\u01b0 m\u1ed9t b\u00e0i to\u00e1n kh\u00f3 d\u00e0nh cho c\u00e1c designer khi \u0111\u00f2i h\u1ecfi b\u1ea1n ph\u1ea3i thi\u1ebft k\u1ebf sao cho th\u1eadt kh\u00e9o l\u00e9o v\u00e0 \u0111\u00e1p \u1ee9ng \u0111\u01b0\u1ee3c hai y\u1ebfu t\u1ed1: t\u00ednh th\u1ea9m m\u1ef9 v\u00e0 kh\u1ea3 d\u1ee5ng cho content. N\u1ebfu l\u00e0m t\u1ed1t \u0111i\u1ec1u n\u00e0y, b\u1ea1n s\u1ebd n\u1eb1m trong top d\u1eabn \u0111\u1ea7u cu\u1ed9c ch\u01a1i v\u00e0 gi\u1eef ch\u00e2n ng\u01b0\u1eddi d\u00f9ng \u1edf l\u1ea1i v\u1edbi website c\u1ee7a b\u1ea1n.<\/p>\n

\"thi\u1ebft<\/p>\n

C\u00e1c breakpoint (\u0111i\u1ec3m d\u1eebng)<\/h2>\n

Breakpoint mang \u0111\u1ebfn cho layout kh\u1ea3 n\u0103ng thay \u0111\u1ed5i t\u1ea1i \u0111i\u1ec3m gi\u1edbi h\u1ea1n. Ch\u1eb3ng h\u1ea1n nh\u01b0 c\u00f3 3 c\u1ed9t hi\u1ec3n th\u1ecb tr\u00ean m\u00e0n h\u00ecnh m\u00e1y t\u00ednh nh\u01b0ng ch\u1ec9 c\u00f3 duy nh\u1ea5t 1 c\u1ed9t hi\u1ec3n th\u1ecb tr\u00ean m\u00e0n h\u00ecnh \u0111i\u1ec7n tho\u1ea1i. Ph\u1ea7n l\u1edbn c\u00e1c thu\u1ed9c t\u00ednh c\u1ee7a CSS c\u00f3 th\u1ec3 \u0111\u01b0\u1ee3c thay \u0111\u1ed5i t\u1eeb 1 breakpoint n\u00e0y t\u1edbi m\u1ed9t breakpoint kh\u00e1c tr\u00ean m\u00e0n h\u00ecnh hi\u1ec3n th\u1ecb, n\u01a1i m\u00e0 b\u1ea1n \u0111\u1eb7t breakpoint th\u01b0\u1eddng s\u1ebd ph\u1ee5 thu\u1ed9c v\u00e0o content. Ch\u1eb3ng h\u1ea1n nh\u01b0 khi m\u1ed9t c\u00e2u b\u1ecb ng\u1eaft qu\u00e3ng, b\u1ea1n c\u00f3 th\u1ec3 c\u1ea7n ph\u1ea3i th\u00eam v\u00e0o c\u00e1c breakpoint. Nh\u01b0ng nh\u1edb nh\u00e9, h\u00e3y th\u1eadn tr\u1ecdng khi s\u1eed d\u1ee5ng c\u00e1c breakpoint v\u00ec n\u1ebfu kh\u00f4ng kh\u00e9o l\u00e9o v\u00e0 tinh t\u1ebf khi x\u1ebfp \u0111\u1eb7t. M\u1ed9t m\u1edb l\u1ed9n x\u1ed9n v\u00e0 r\u1ed1i r\u1eafm c\u00f3 th\u1ec3 s\u1ebd t\u00ecm \u0111\u1ebfn b\u1ea1n ngay t\u1ee9c kh\u1eafc.<\/p>\n

C\u00e1c gi\u00e1 tr\u1ecb Max v\u00e0 Min<\/h2>\n

Th\u1ec9nh tho\u1ea3ng, ph\u1ea7n content s\u1ebd v\u1eeba v\u1eb7n v\u1edbi b\u1ec1 r\u1ed9ng c\u1ee7a m\u00e0n h\u00ecnh \u0111i\u1ec7n tho\u1ea1i hay laptop. Nh\u01b0ng l\u1ea1i tr\u00e0n ra v\u01b0\u1ee3t qu\u00e1 b\u1ec1 r\u1ed9ng c\u1ee7a m\u00e0n h\u00ecnh TV. \u0110\u00f3 l\u00e0 l\u00fd do t\u1ea1i sao m\u00e0 c\u00e1c gi\u00e1 tr\u1ecb Max\/Min s\u1ebd c\u1ef1c k\u00ec h\u1eefu \u00edch v\u1edbi c\u00e1c web designer. V\u00ed d\u1ee5, x\u00e1c \u0111\u1ecbnh \u0111\u01b0\u1ee3c \u0111\u1ed9 ph\u00e2n gi\u1ea3i m\u00e0n h\u00ecnh l\u00e0 100% v\u00e0 b\u1ec1 r\u1ed9ng t\u1ed1i \u0111a l\u00e0 1000px \u2013 s\u1ebd \u0111\u1ed3ng ngh\u0129a v\u1edbi vi\u1ec7c content s\u1ebd v\u1eeba v\u1eb7n \u0111\u1ec3 l\u1ea5p \u0111\u1ea7y \u0111\u01b0\u1ee3c m\u00e0n h\u00ecnh n\u1ebfu v\u01b0\u1ee3t qu\u00e1 1000px.<\/p>\n

H\u1ec7 th\u1ed1ng qu\u1ea3n l\u00fd (Nested objects)<\/h2>\n

Khi c\u00f3 nhi\u1ec1u nh\u00e2n t\u1ed1 ph\u1ee5 thu\u1ed9c v\u00e0o nh\u1eefng nh\u00e2n t\u1ed1 kh\u00e1c s\u1ebd ph\u00e1t sinh kh\u00f3 kh\u0103n trong vi\u1ec7c v\u1eadn h\u00e0nh v\u00e0 qu\u1ea3n l\u00fd. Do \u0111\u00f3 vi\u1ec7c g\u00f3i g\u1ecdn v\u00e0 s\u1eafp x\u1ebfp c\u00e1c nh\u00e2n t\u1ed1 th\u00e0nh m\u1ed9t c\u1ee5m s\u1ebd gi\u1eef cho h\u1ec7 th\u1ed1ng \u0111\u01b0\u1ee3c \u201cg\u1ecdn g\u00e0ng\u201d v\u00e0 d\u1ec5 theo d\u00f5i. C\u00e1c y\u1ebfu t\u1ed1 t\u0129nh nh\u01b0 pixel trong tr\u01b0\u1eddng h\u1ee3p n\u00e0y s\u1ebd c\u00f3 th\u1ec3 h\u1ed7 tr\u1ee3 m\u1ed9t c\u00e1ch r\u1ea5t \u0111\u1eafc l\u1ef1c, \u0111\u1eb7c bi\u1ec7t l\u00e0 khi b\u1ea1n kh\u00f4ng mu\u1ed1n ph\u1ea3i ch\u1ec9nh l\u1ea1i b\u1ed1 c\u1ee5c content nh\u01b0 logo v\u00e0 button ch\u1eb3ng h\u1ea1n.<\/p>\n

\"thi\u1ebft<\/p>\n

Thi\u1ebft k\u1ebf Mobile \u2013 first hay Desktop \u2013 first<\/h2>\n

N\u1ebfu l\u00e0m m\u1ed9t ph\u00e9p so s\u00e1nh c\u1ee5 th\u1ec3, b\u1ea1n s\u1ebd nh\u1eadn ra kh\u00f4ng c\u00f3 qu\u00e1 nhi\u1ec1u s\u1ef1 kh\u00e1c bi\u1ec7t gi\u1eefa m\u1ed9t thi\u1ebft k\u1ebf \u01b0u ti\u00ean \u0111i\u1ec7n tho\u1ea1i (Mobile \u2013 first) v\u00e0 m\u1ed9t thi\u1ebft k\u1ebf \u01b0u ti\u00ean m\u00e1y t\u00ednh (Desktop \u2013 first).<\/p>\n

C\u00e2n nh\u1eafc thi\u1ebft k\u1ebf Mobile \u2013 first hay Desktop \u2013 first?<\/h2>\n

Tuy nhi\u00ean, kh\u00e1c bi\u1ec7t gi\u1eefa 2 s\u1ef1 \u01b0u ti\u00ean s\u1ebd quy\u1ebft \u0111\u1ecbnh xem c\u00e1i n\u00e0o th\u1ef1c s\u1ef1 ph\u00f9 h\u1ee3p v\u1edbi content m\u00e0 b\u1ea1n \u0111ang thi\u1ebft k\u1ebf. H\u00e3y c\u00e2n nh\u1eafc th\u1eadt k\u0129 l\u01b0\u1ee1ng v\u00e0 quy\u1ebft \u0111\u1ecbnh xem m\u00ecnh n\u00ean \u01b0u ti\u00ean l\u1ef1a ch\u1ecdn ph\u01b0\u01a1ng \u00e1n n\u00e0o.<\/p>\n

Webfonts v\u00e0 System fonts<\/h2>\n

N\u1ebfu b\u1ea1n mu\u1ed1n s\u1edf h\u1eefu m\u1ed9t font ch\u1eef hay ho nh\u01b0 Futura hay Didot tr\u00ean website c\u1ee7a m\u00ecnh, h\u00e3y s\u1eed d\u1ee5ng webfont. Nh\u01b0ng h\u00e3y nh\u1edb r\u1eb1ng, ch\u1ea5t l\u01b0\u1ee3ng c\u00e0ng cao th\u00ec website c\u1ee7a b\u1ea1n s\u1ebd c\u00e0ng t\u1ed1n nhi\u1ec1u th\u1eddi gian h\u01a1n \u0111\u1ec3 t\u1ea3i trang. \u0110i\u1ec1u n\u00e0y s\u1ebd \u1ea3nh h\u01b0\u1edfng t\u1edbi t\u1ef7 l\u1ec7 boundrate v\u00e0 m\u1ed9t v\u00e0i y\u1ebfu t\u1ed1 kh\u00e1c. C\u00f2n s\u1eed d\u1ee5ng System font \u01b0? B\u1ea1n s\u1ebd t\u1ea3i trang nhanh nh\u01b0 ch\u1edbp, m\u1ed9t l\u01b0a ch\u1ecdn an to\u00e0n cho c\u00e1c web designer.<\/p>\n

Bitmap hay Vector?<\/h2>\n

C\u00e1c icon c\u1ee7a b\u1ea1n c\u00f3 nhi\u1ec1u chi ti\u1ebft hay hi\u1ec7u \u1ee9ng \u0111i k\u00e8m kh\u00f4ng? N\u1ebfu c\u00f3, h\u00e3y s\u1eed d\u1ee5ng bitmap. N\u1ebfu kh\u00f4ng, c\u00e2n nh\u1eafc l\u1ef1a ch\u1ecdn vector. T\u1ed1t nh\u1ea5t, c\u00e1c h\u00ecnh \u1ea3nh bitmap n\u00ean \u0111i v\u1edbi \u0111\u1ecbnh d\u1ea1ng jpg, png ho\u1eb7c gif. C\u00f2n vector th\u00ec l\u1ef1a ch\u1ecdn \u0111\u1ecbnh d\u1ea1ng ph\u00f9 h\u1ee3p s\u1ebd l\u00e0 SVG ho\u1eb7c icon font. M\u1ed7i l\u1ef1a ch\u1ecdn s\u1ebd c\u00f3 nh\u1eefng th\u1ebf m\u1ea1nh kh\u00e1c nhau, tuy nhi\u00ean h\u00e3y lu\u00f4n c\u00e2n nh\u1eafc v\u1ec1 y\u1ebfu t\u1ed1 k\u00edch c\u1ee1. Kh\u00f4ng c\u00f3 h\u00ecnh \u1ea3nh n\u00e0o c\u00f3 th\u1ec3 \u0111\u01b0\u1ee3c upload l\u00ean m\u1ea1ng m\u00e0 ch\u01b0a \u0111\u01b0\u1ee3c t\u1ed1i \u01b0u h\u00f3a.<\/p>\n

Vector \u2013 theo m\u1ed9t h\u01b0\u1edbng kh\u00e1c th\u01b0\u1eddng kh\u00e1 nh\u1ecf v\u00e0 d\u1ec5 s\u1eed d\u1ee5ng nh\u01b0ng m\u1ed9t v\u00e0i tr\u00ecnh duy\u1ec7t c\u0169 s\u1ebd kh\u00f4ng c\u00f3 phi\u00ean b\u1ea3n h\u1ed7 tr\u1ee3. Ngo\u00e0i ra, n\u1ebfu t\u1ec7p c\u1ee7a b\u1ea1n c\u00f3 nhi\u1ec1u \u0111\u01b0\u1eddng cong c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng d\u01b0\u1edbi \u0111\u1ecbnh d\u1ea1ng vector s\u1ebd n\u1eb7ng h\u01a1n so v\u1edbi bitmap. V\u00ec th\u1ebf h\u00e3y c\u00e2n nh\u1eafc th\u1eadt k\u0129 l\u01b0\u1ee1ng.<\/p>\n

Xem th\u00eam: C\u00e1ch t\u1ea1o 1 trang web \u0111\u01a1n gi\u1ea3n d\u1ec5 d\u00e0ng<\/strong><\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

Thi\u1ebft k\u1ebf web responsive – Nguy\u00ean t\u1eafc c\u01a1 b\u1ea3n.\u00a0Responsive Web Design (RWD) l\u00e0 xu h\u01b0\u1edbng thi\u1ebft k\u1ebf website t\u01b0\u01a1ng th\u00edch v\u1edbi m\u1ecdi k\u00edch th\u01b0\u1edbc v\u00e0 m\u00e0n h\u00ecnh thi\u1ebft b\u1ecb hi\u1ec3n th\u1ecb. Responsive v\u00e0 Adaptive web design (AWD) \u0111\u1ec1u h\u01b0\u1edbng \u0111\u1ebfn m\u1ed9t m\u1ee5c ti\u00eau chung. \u0110\u00f3 l\u00e0 \u0111\u1ea3m b\u1ea3o website hi\u1ec3n th\u1ecb \u0111\u1ea7y \u0111\u1ee7 ch\u1ee9c n\u0103ng […]<\/p>\n","protected":false},"author":2,"featured_media":2652,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[5],"tags":[249],"class_list":["post-2648","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-google-adsword","tag-thiet-ke-web-responsive"],"jetpack_featured_media_url":"https:\/\/webvocuc.com\/blog\/wp-content\/uploads\/2020\/06\/thiet-ke-web-responsive-nguyen-tac-co-ban4.jpeg","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/webvocuc.com\/blog\/wp-json\/wp\/v2\/posts\/2648","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webvocuc.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webvocuc.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webvocuc.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/webvocuc.com\/blog\/wp-json\/wp\/v2\/comments?post=2648"}],"version-history":[{"count":2,"href":"https:\/\/webvocuc.com\/blog\/wp-json\/wp\/v2\/posts\/2648\/revisions"}],"predecessor-version":[{"id":5787,"href":"https:\/\/webvocuc.com\/blog\/wp-json\/wp\/v2\/posts\/2648\/revisions\/5787"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webvocuc.com\/blog\/wp-json\/wp\/v2\/media\/2652"}],"wp:attachment":[{"href":"https:\/\/webvocuc.com\/blog\/wp-json\/wp\/v2\/media?parent=2648"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webvocuc.com\/blog\/wp-json\/wp\/v2\/categories?post=2648"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webvocuc.com\/blog\/wp-json\/wp\/v2\/tags?post=2648"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}