Categories CSS

Thử tìm hiểu về cách tạo website Responsive (bài 1)

Ngày nay, một trang web không chỉ cần đẹp mắt trên màn hình máy tính để bàn, mà còn cần ổn thỏa trên cả máy tính bảng và đặc biệt là thiết bị di động nữa.

Một website được gọi là responsive nếu nó có khả năng đáp ứng, thay đổi tùy theo kích cỡ màn hình của người dùng.

Ở thời điểm hiện tại, website được thiết kế responsive là điều cực kỳ quan trọng, và trong thực tế là kỹ thuật mà bạn phải thành thạo nếu định đi theo con đường lập trình hoặc thiết kế website.

Trong bài viết này, tôi sẽ hướng dẫn bạn cách dễ dàng để xây dựng trang responsive và cách để áp dụng các kỹ thuật thiết kế responsive vào trang web đã xây dựng trước đây chỉ trong ba bước đơn giản.


Layout

Khi xây dựng một website responsive, hoặc thay đổi một trang đã có để nó thành responsive, điều đầu tiên cần để ý là layout.

Khi tôi xây dựng một website responsive, tôi luôn luôn bắt đầu bằng việc tạo một layout không-phải-responsive, cố định ở một kích cỡ mặc định nào đó. Lấy ví dụ trang CatsWhoCode có kích cỡ mặc định là 1100px.

Khi tôi đã hài lòng với layout không phản hồi rồi, tôi sẽ thêm các câu lệnh media và thay đổi một chút CSS của mình để tạo ra trang reponsive. Khi nói đến chuyện thiết kế web, cách dễ dàng là tập trung vào một nhiệm vụ tại một thời điểm.

Khi bạn đã hoàn thành xong layout không-phải-responsive, điều đầu tiên cần làm là bạn copy – paste các dòng dưới đây và đưa nó vào trong thẻ mở <head> và đóng </head> trên trang HTML của bạn.

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="HandheldFriendly" content="true">

Điều này sẽ thiết lập chế độ xem trên tất cả màn hình ở tỷ lệ 1 x 1 và loại bỏ tất cả chức năng mặc định của iPhone cũng như các thiết bị di dộng khác, cái mà sẽ render website ở chế độ xem full và cho phép người dùng zoom vào layout bằng cách dùng 2 ngón tay chụm lại rồi mở rộng ra (pinching).

Giờ đến lúc bổ sung một số câu lệnh media. Theo như trang W3C, câu lệnh media bao gồm một loạt các media type và không có hoặc có nhiều biểu thức dùng để kiểm tra trạng thái chức năng của một thiết bị cụ thể. Bằng cách sử dụng câu lệnh media, giao diện hiển thị có thể được “đo ni đóng giầy” cho một khoảng màn hình đầu ra cụ thể mà không cần phải thay đổi nội dung của chính nó.

Nói cách khác, câu lệnh media cho phép website của bạn trông đẹp mắt hơn trên tất cả các loại màn hình từ màn hình di động cho tới màn hình lớn. Điều này gọi là thiết kế website responsive.

Câu lệnh media phụ thuộc vào layout website của bạn, vì thế nó khá khó khăn để tôi cung cấp cho bạn mã mẫu sử dụng ngay và luôn. Tuy vậy, đoạn mã bên dưới sẽ là điểm bắt đầu tốt cho hầu hết website. Trong ví dụ này, #primary là phần nội dung chính, và #secondary là sidebar.

Bằng cách nhìn kỹ hơn vào mã, bạn có thể thấy rằng tôi định nghĩa hai kích cỡ. Cái đầu tiên có chiều rộng tối đa là 1060px và được tối ưu cho việc hiển thị cho màn hình ngang máy tính bảng. #primary chiếm 67% thẻ bao cha của nó, và #secondary thì chiếm 30%, với 3% còn lại tôi dành cho lề trái.

Kích cỡ tiếp theo được thiết kế cho màn hình máy tính bảng ở dạng đứng và các kích cỡ màn hình nhỏ hơn. Do các kích cỡ nhỏ của màn hình điện thoại, tôi quyết định để #primary có chiều rộng 100%. #secondary cũng có kích cỡ chiều rộng 100%, và sẽ hiển thị bên dưới #primary.

Như tôi đã nói từ trước, bạn có thể điều chỉnh mã bên dưới ít nhiều để nó khớp với trường hợp cụ thể trên website của bạn. Thêm nó vào file .css trên website của bạn.

/* Media Queries: Tablet Landscape */
@media screen and (max-width: 1060px) {
    #primary { width:67%; }
    #secondary { width:30%; margin-left:3%;}  
}

/* Media Queries: Tabled Portrait */
@media screen and (max-width: 768px) {
    #primary { width:100%; }
    #secondary { width:100%; margin:0; border:none; }
}

Sau khi làm xong, hãy xem layout của bạn responsive như thế nào, để làm điều đó tôi sử dụng công cụ tuyệt vời này của Matt Kersley. Tất nhiên bạn cũng có thể kiểm tra kết quả trên thiết bị di động của bạn.


Ảnh và các tài nguyên đa phương tiện khác

Một layout đáp ứng là điều đầu tiên cần có để tạo thành website đáp ứng hoàn thiện. Giờ chúng ta sẽ tập trung vào các khía cạnh quan trọng khác của một website đa phương tiện đó là media, chẳng hạn như video và ảnh.

Đoạn mã CSS bên dưới sẽ đảm bảo ảnh của bạn không bao giờ lớn hơn so với thẻ bao quanh nó (thẻ cha). Điều này là cực kỳ đơn giản và nó hoạt động trên hầu hết các website responsive. Để chức năng hoạt động chính xác, đoạn mã này cần được chèn vào bên trong file stylesheet CSS của bạn.

img { max-width: 100%; height: auto; }

Mặc dù kỹ thuật trên có hiệu quả, đôi khi bạn có thể cần làm chủ nhiều hơn nữa hình ảnh và hiển thị các hình khác tùy theo kích cỡ màn hình của khách truy cập.

Dưới đây là kỹ thuật được phát triển bởi Nicolas Gallagher. Hãy cùng xem đoạn mã HTML:

<img src="image.jpg"
     data-src-600px="image-600px.jpg"
     data-src-800px="image-800px.jpg"
     alt="">

Như bạn có thể thấy, chúng ta sử dụng thuộc tính data-* để lưu trữ các url ảnh thay thế. Giờ hãy sử dụng sức mạnh toàn diện của CSS3 để thay thế ảnh mặc định bằng một ảnh cụ thể thế vào nếu điều kiện về min-devide-width được so khớp chính xác:

@media (min-device-width:600px) {
    img[data-src-600px] {
        content: attr(data-src-600px, url);
    }
}

@media (min-device-width:800px) {
    img[data-src-800px] {
        content: attr(data-src-800px, url);
    }
}

Thật ấn tượng đúng không nào? Giờ hãy nhìn vào thành phần media khác cũng rất quan trọng trên nhiều website hiện nay: video.

Hầu hết các website sử dụng video từ dịch vụ của bên thứ ba, chẳng hạn như YouTube hoặc Vimeo, tôi quyết định tập trung vào kỹ thuật video co giãn của Nick La. Đây là kỹ thuật cho phép bạn tạo video nhúng có khả năng đáp ứng.

HTML:

<div class="video-container">
	<iframe src="http://player.vimeo.com/video/6284199?title=0&byline=0&portrait=0" width="800" height="450" frameborder="0"></iframe>
</div>

Và bây giờ là đoạn mã CSS:

.video-container {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
}

.video-container iframe,  
.video-container object,  
.video-container embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

Sau khi bạn áp dụng đoạn mã trên vào website, video nhúng giờ sẽ trở nên có khả năng đáp ứng


Chữ

Bước cuối cùng trong hướng dẫn này chắc chắn rất quan trọng, nhưng nó thường bị bỏ quên bởi các lập trình viên khi họ thực hiện các website responsive, đó là Typography, tên gọi tổng thể cho việc sử dụng chữ trên website.

Cho đến khoảng thời gian gần đây, hầu hết lập trình viên sử dụng pixel để định nghĩa kích cỡ font. Trong khi pixel cũng ổn khi bạn có website có chiều rộng cố định, thì với website responsive bạn cũng phải có font responsive. Kích cỡ font trên trang của bạn phải liên quan đến chiều rộng của thẻ cha chứa nó, vì thế nó có thể đáp ứng theo màn hình của khách hàng và dễ dàng đọc được trên thiết bị di động.

Đặc tả của CSS3 có nói về một đợn vị mới có tên rems. Chúng hoạt động gần tương tự với đơn vị em, nhưng tương quan đến phần tử html, cái làm cho chúng dễ sử dụng hơn nhiều so với em.

rems tương quan với phần tử html, bạn không được phép quên reset lại kích cỡ font của html:

html {font-size:100%;}

Sau khi làm điều này xong, bạn có thể định nghĩa kích cỡ font đáp ứng như hình bên dưới:

@media (min-width: 640px) { body {font-size:1rem;} } 
@media (min-width:960px) { body {font-size:1.2rem;} } 
@media (min-width:1100px) { body {font-size:1.5rem;} } 

Để có được thông tin chi tiết hơn về đơn vị rem, tôi khuyên bạn nên tham khảo bài viết hữu ích này. Cũng như nhớ để ý đến bài viết hướng dẫn về các kỹ thuật tạo ra website responsive.

(Dịch từ bài viết: How to Make a Responsive Website in 3 Easy Steps, trên website CatsWhoCode)

Back to Top