Thiết kế web Responsive là gì?

Responsive Web Design (RWD) là xu hướng mới theo đó quy trình thiết kế và phát triển web sẽ đáp ứng mọi thiết bị và môi trường của người dùng theo các tiêu chí kích thước và chiều của màn hình thiết bị. Để làm được điều đó chúng ta sẽ sử dụng linh hoạt kết hợp các kỹ thuật bao gồm flexible grid, responsive image và CSS media query. Khi người dùng chuyển từ máy tính xách tay của họ sang iPad hay iPhone, trang web sẽ tự động chuyển đổi để phù hợp với kích thước màn hình và kịch bản xử lý. Nói cách khác, các trang web cần phải có công nghệ tự động đáp ứng theo thiết bị của người dùng. Điều này sẽ loại bỏ sự cần thiết cho nhiều thiết kế web khác nhau và giảm thiểu thời gian cũng như chi phí thiết kế web.
Các xu hướng sử dụng chiều rộng trong thiết kế web Respnsive



Độ rộng của trang web Responsive là bao nhiêu?
Từ thủa công nghệ web 2.0 độ rộng của website gần như mặc định ở giá trị 960 - 980 (xuất hiện nhiều frame work 960 cho cả website và các chương trình cho các nhà design như photoshop...).
Xu thế mới hiện nay bạn sẽ thấy nhiều website độ rộng 100% theo màn hình thông thường hay sử dụng Fluid width: width: 100%; và các nhân tố cột bảng biểu còn lại đều sử dụng theo giá trị % chứ không sử dụng width = bao nhiêu px (pixel) như trước đây.
Một số nhà thiết kế vẫn muốn giới hạn độ rộng của website theo một giới hạn nào đó cho maximum ví dụ: max-width: 960px hay max-width: 1160px; hoặc max-width: 1170px;
Để làm được điều này vẫn đáp ứng tốt trên các trình duyệt việc hiểu và dùng CSS sao cho hợp lý là điều hết sức cần thiết.
Sau đây là vài lời khuyên về việc tối ưu Css cho các thiết kế này:
For default Width 970px and or 1170px
Code:
/* Default Width: */
.container {
max-width: 1170px;
margin-left: auto;
margin-right: auto;
padding-left: 15px;
padding-right: 15px;
}
.container {
max-width: 970px;
margin-left: auto;
margin-right: auto;
padding-left: 15px;
padding-right: 15px;
}
Normally standard 960 px, if you want to add css responsive for devices and browsers smaller than:
Code:
/* Smaller than standard 960 (devices and browsers) */
@media only screen and (max-width: 959px) {
Your CSS code here
}
For Tablet Portrait and smaller than 960px we recommended to use:
/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width: 768px) and (max-width: 959px) {
Your CSS code here
}
For all Standard Smarphone (mobile phone) you can add like code bellow
Code:
/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {
Your CSS code here
}
What happen with Mobile Landscape and Tablet Portrait in this case width from 480px for mobile (ex: Iphone) to 767px for tablet (ex:Ipad)
Code:
/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 480px) and (max-width: 767px) {
Your CSS code here
}
CSS code for Mobile Portrait and Mobile Portrait in this case width maximum is smaller than 480px so we will use max-width:479px;
/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px) {
Your CSS code here
}
Chủ đề liên quan:

Tại sao bạn nên thiết kế Trang web tối ưu hóa cho Smartphone

What recommended WIDTHs for joomla responsive templates

How to creat joomla template 3.0 step by step: Boostrap and responsive Joomla 3.0 template

Nguồn : Thegioiseo​