Responsive Web Design là gì là một trong những từ khóa được tìm kiếm nhiều nhất trên google về chủ đề Responsive Web Design là gì. Trong bài viết này, atpcorp.vn sẽ viết bài Responsive Web Design là gì? Giới thiệu từ khái niệm tới thực tế
Mục lục
Responsive Web Design là gì
Responsive Web Design (RWD) là xu hướng mới theo đó quy trình xây cất và phát triển web sẽ đáp ứng mọi vũ trang và môi trường của người sử dụng theo các tiêu chí kích tấc và chiều của màn hình thiết bị. Responsive Web Design được tạo nên từ 3 thành phần cơ bản:
- Flexible Grid based layout
- Media Queries
- Flexible Media
Vì sao cần Responsive Web Design
- Giúp tần tiện rất nhiều thời kì và tiêu pha khi mà game thủ không cần phải duy trì từng bản web khác biệt cho điện thoại và máy tính
- Responsive Web Design giúp cải thiện SEO (search ranking) cho trang web của bạn khi nhưng mọi luồng đều chỉ dẫn đến một địa chỉ URL độc nhất thay do nhiều URL khác nhau. Các thông báo Google Analytics của người chơi sẽ vẽ nên một bức tranh tốt hơn về việc sử dụng trang web của game thủ do dữ liệu từ người dùng di động và máy tính để bàn sẽ được thống nhất. Điều tương tự cũng xảy ra với các chỉ số (like, chia sẻ) trên các trang mạng xã hội như Facebook, Twitter,…
- Responsive Design giúp game thủ dễ dàng bảo trì trang web khi mà nó không thúc đẩy gì đến phía server, chỉ việc đổi mới html và css để thay đổi giao diện hoặc bố cục thích hợp với các vũ trang khác biệt.
Chúng ta sẽ đi vào khám phá từng thành phần và cách sử dụng chúng.
I. Flexible Grid Based Layouts
1. Viewport
Viewport là khung hình người sử dụng nhìn thấy trên thiết bị của họ khi vào một trang web bất kì. Với mỗi thiết không giống nhau lại có viewport khác nhau. Nếu trang web nhất thiết kích tấc thì trình phê duyệt sẽ tự động thu nhỏ dại nội dung khi chuyển từ màn hình máy tính qua điện thoại thông minh – điều này tạo nên hưởng thụ không tốt cho người sử dụng.
Thật may thay HTML5 cung cấp cho chúng ta lý lẽ kiểm soát view một cách dễ dàng duyệt y thẻ :
<meta name="viewport" content="width=device-width, initial-scale=1.0">width=device-width: thiết lập chiều rộng của trang web theo chiều rộng của trang bị
initial-scale=1.0: thiết lập mức độ zoom lúc đầu khi trang web được load vì trình phê chuẩn
Xem qua tỉ dụ sau đây để thấy rõ sự khác biệt khi dùng viewport và khi không sử dụng viewport:
2. GridView
Rất nhiều trang web được thành lập trên gridview, có tức là trang web được tạo thành các cột đều nhau. Một gridview thường có 12 cột ứng với 100% độ rộng và sẽ thu bé dại hoặc mở mang khi người chơi thay đổi kích tấc trình duyệt. Việc dùng gridview sẽ giúp bạn thuận lợi đặt địa điểm các phần tử trên trang hơn, thuận tiện cho việc thực hành responsive về sau.
Xem thêm: SEO website là gì? Vai trò của SEO website mới nhất 2020
Cùng xem qua tỉ dụ sau:
.container
width: 538px;
section,
aside
margin: 10px;
section
float: left;
width: 340px;
aside
float: right;
width: 158px;
Ở đây các phần tử được giữ nhất mực nên khi thay đổi kích tấc container thì kích tấc các phần tử bên trong vẫn không thay đổi. Thay vào đó chúng ta có thể dùng % hoặc em để giúp các phần tử thay đổi theo kích tấc của container
section,
aside
margin: 1.858736059%; /* 10px ÷ 538px = .018587361 */
section
float: left;
width: 63.197026%;/* 340px ÷ 538px = .63197026 */
aside
float: right;
width: 29.3680297%;/* 158px ÷ 538px = .293680297 */
Lưu ý: Trong nội dung trên Grid-View sẽ được thành lập hoàn toàn 1 cách thủ công để chúng ta có thể hiểu rõ chế độ hoạt động của 1 Grid-View là như thế nào, hoàn toàn không phụ thuộc vào các thư viện CSS có sẵn như Bootstrap hay Foundation.
Bên cạnh đó chúng ta có thể sử dụng các class của bootstrap để chia grid.
<div class="row"><div class="col-3">...</div><!--25%--><div class="col-9">...</div><!--75%--></div>Bên cạnh đó Flexible grid layout không là không đủ. Khi trang web có độ rộng nhỏ tuổi thì kích tấc các phần tử bên trong cũng nhỏ theo khiến nội dung hiển thị không tốt. Để giải quyết vấn đề này chúng ta cùng đi tới phần tiếp theo.
II. Media Queries
Media Queries là một kỹ thuật CSS được giới thiệu trong CSS3. Ta sử dụng cú pháp @media để bao gồm một khối các tính chất CSS chỉ khi một điều kiện khăng khăng là đúng. Nói một cách đơn giản là ta sẽ định nghĩa CSS riêng cho một nhóm các thiết bị có kích tấc giống nhau.
Media Queries có thể được sử dụng trực tiếp trong thẻ HTML hoặc viết bên trong file css. ( Nên sử dụng @media bên trong css để tránh việc phải viết lặp lại nhiều lần)
<!-- Separate CSS File --><link href="styles.css" rel="stylesheet" media="all and (max-width: 1024px)">/* @media Rule */@media all and (max-width: 1024px) .../* @import Rule */@importurl(styles.css) all and (max-width: 1024px) ...Mỗi media query có thể bao gồm một media type và theo sau bởi nhiều biểu thức. Các media types chung bao gồm all, screen, tv,print. HTML5 còn bao gồm cả 3d-glasses. Nếu media type không được chỉ định thì media query sẽ mặc định media type là screen.
1. Các biểu thức logic bên trong Media Queries
Có 3 loại toán tử logic khác nhau có thể sử dụng bên trong media queries bao gồm and, not và only.
sử dụng toán tử and trong media queries cho phép ta thêm điều kiện té sung. ví dụ sau chọn tất cả các màn hình có độ rộng từ 800 tới 1024 pixels:
@media all and (min-width: 800px) and (max-width: 1024px) ...Trong khi đó toán tử not lại phủ định tróc nã được xác định. thí dụ dưới đây áp dụng với các trang bị màn hình không màu ( đen và trắng screen):
@media not screen and (color) ...sau cùng là toán tử only vận dụng cho tầm nã thỏa mãn điều kiện. Biểu thức dưới đây chỉ chọn màn hình hướng theo chiều dọc:
@media only screen and (orientation: portrait) ...2. Media Features trong Media Queries
Media feature xác định các thuộc tính hoặc thành phần nào sẽ được nhắm tới trong media queries.
Height & Width
Đây chính là một trong những media feature phổ biến nhất xoay quanh việc xác định chiều cao và chiều rộng cho viewport của thiết bị hoặc browser. Chiều cao và chiều rộng được chỉ định qua từ khóa height và width. Giá trị của height hoặc width có thể là doanh nghiệp độ dài, tương đối hoặc tuyệt đối. Chúng còn thường được đi kèm với các tiền tố min và max để xác định giới hạn màn hình mà các truy hỏi được vận dụng. thí dụ
@media all and (min-width: 320px) and (max-width: 780px) ...Orientation: Portrait / Landscape
Media queries còn được sử dụng để xác định hướng của browser thiết bị sử dụng từ khóa orientation, cho phép ta xác định vũ trang đang được xem nằm ở hướng dọc (portrait) hay ngang (landscape). tính năng này được áp dụng cơ bản trên các vũ trang thiết bị cầm tay.
@media all and (orientation: landscape) ...Aspect Ratio
Tỉ lệ khuông hình (aspect ratio) trong media queries cho phép ta chỉ định tỉ lệ chiều rộng\chiều cao của vũ trang nhưng tầm nã được ứng dụng . Chúng cũng thường đi kèm với các tiền tố min và max.
@media all and (min-device-aspect-ratio: 16/9) ...Resolution
tính năng độ phân giải (resolution) chỉ định độ phân giải của trang bị đầu ra theo mật độ pixel, hay còn được gọi là điểm ảnh trên mỗi inch (DPI – Dots Per Inch) . Chúng sẽ không đi kèm với các tiền tố min và max nhưng mà thay vào đó là số điểm ảnh trên mỗi pixel dppx và số điểm ảnh trên cm dpcm.
@media print and (min-resolution: 300dpi) ...3. Cách thức Mobile First trong Responsive
Moble First tức là game thủ luôn kiến tạo phần mềm cho màn hình mobile trước rồi mới đến các màn hình mập dần. ( Điều này giúp trang web hiển thị nhanh hơn trên các vũ trang màn hình nhỏ dại hơn) . thí dụ :
/*Smart phone nhỏ*/@media screen and (min-width: 240px)
/*Iphone(480 x 640)*/@media screen and (min-width: 320px)
/*Tablet nhỏ(480 x 640)*/@media screen and (min-width: 480px)
/*Ipad dọc(768 x 1024)*/@media screen and (min-width: 768px)
/*Ipad ngang(1024 x 768)*/@media screen and (min-width: 1024px)
4. Media Queries Demo
@media all and (max-width: 420px)
section, aside
float: none;
width: auto;
III. Flexible Media
sau cuối mà không kém phần cần thiết chính là flexible media. Khi nhưng mà viewport thay đổi kích tấc thì các đa công cụ (ảnh, video,..) cũng cần có kỹ năng đổi mới sao cho phù hợp.
Một cách thông dụng là set width là 100% cùng với height: auto. Khi đó ảnh hoặc video sẽ thay đổi chiều rộng và chiều cao sao cho phù hợp với độ dãn của màn hình.
img
width: 100%;
height: auto;
Nếu muốn ảnh hoặc video thay đổi theo viewport nhưng không quá kích tấc gốc của nó ta có thể sử dụng tính chất max-width:
img
max-width: 100%;
height: auto;
Tổng kết
Như vậy là chúng ta đã cùng nhau tìm hiểu các khái niệm căn bản của Responsive Web Design cũng như cách vận dụng chúng trong các trường hợp cụ thể. kì vọng qua bài viết này Các bạn có thể cải thiện responsive cho trang web của mình sao cho có lí và khoa học nhất. Cảm ơn Anh chị em đã theo dõi.
Có thể bạn quan tâm: Cách SEO Google Map và xác minh địa chỉ chi tiết mới nhất 2020
Nguồn: https://viblo.asia/
