• Trang Chủ
  • Tầm Nhìn – Sứ Mệnh
  • Khách Hàng
    gọi điện thoại với khách hàng

    Xử lý cuộc gọi điện thoại với khách hàng chuyên nghiệp

    Phc6b0c6a1ng Phc3a1p Tie1babfp Ce1baadn Khc3a1ch Hc3a0ng Khi Seo Websitee 1

    Kinh nghiệm tìm kiếm chủ đề cho Website

    Screen Shot 2012 03 27 At 10.12.02 Pm 3

    Những lời khuyên về marketing giúp bạn thành công

    đo Lường Các Chỉ Số Seo

    Cách đo lường các chỉ số SEO quan trọng

    Huong Dan Su Dung Google Photos 6 2

    Hướng dẫn cách sử dụng Google Photos đơn giản và hiệu quả.

    How To Create A Website From Scratch The Beginnere28099s Guide 1

    Các bước tạo ra một trang Website hoàn chỉnh.

    Quy Trinh Nghien Cuu Thi Truong 6 Buoc Toi Thanh Cong Ky I 2

    Các bước trong nghiên cứu thị trường để đạt hiệu quả cao.

    Huong Dan Ky Thuat Seo

    Các kỹ thuật SEO mới nhất hiện nay

    Cach Thu Hut Khach Hang

    Xây dựng chiến lược thu hút khách hàng hiệu quả

  • Kiến Thức Marketing
    gọi điện thoại với khách hàng

    Xử lý cuộc gọi điện thoại với khách hàng chuyên nghiệp

    Phc6b0c6a1ng Phc3a1p Tie1babfp Ce1baadn Khc3a1ch Hc3a0ng Khi Seo Websitee 1

    Kinh nghiệm tìm kiếm chủ đề cho Website

    Screen Shot 2012 03 27 At 10.12.02 Pm 3

    Những lời khuyên về marketing giúp bạn thành công

    đo Lường Các Chỉ Số Seo

    Cách đo lường các chỉ số SEO quan trọng

    Huong Dan Su Dung Google Photos 6 2

    Hướng dẫn cách sử dụng Google Photos đơn giản và hiệu quả.

    How To Create A Website From Scratch The Beginnere28099s Guide 1

    Các bước tạo ra một trang Website hoàn chỉnh.

    Quy Trinh Nghien Cuu Thi Truong 6 Buoc Toi Thanh Cong Ky I 2

    Các bước trong nghiên cứu thị trường để đạt hiệu quả cao.

    Huong Dan Ky Thuat Seo

    Các kỹ thuật SEO mới nhất hiện nay

    Cach Thu Hut Khach Hang

    Xây dựng chiến lược thu hút khách hàng hiệu quả

  • Dịch Vụ
  • Sản Phẩm
  • Sự Kiện
  • Nội Bộ
  • Trang Chủ
  • Tầm Nhìn – Sứ Mệnh
  • Khách Hàng
    gọi điện thoại với khách hàng

    Xử lý cuộc gọi điện thoại với khách hàng chuyên nghiệp

    Phc6b0c6a1ng Phc3a1p Tie1babfp Ce1baadn Khc3a1ch Hc3a0ng Khi Seo Websitee 1

    Kinh nghiệm tìm kiếm chủ đề cho Website

    Screen Shot 2012 03 27 At 10.12.02 Pm 3

    Những lời khuyên về marketing giúp bạn thành công

    đo Lường Các Chỉ Số Seo

    Cách đo lường các chỉ số SEO quan trọng

    Huong Dan Su Dung Google Photos 6 2

    Hướng dẫn cách sử dụng Google Photos đơn giản và hiệu quả.

    How To Create A Website From Scratch The Beginnere28099s Guide 1

    Các bước tạo ra một trang Website hoàn chỉnh.

    Quy Trinh Nghien Cuu Thi Truong 6 Buoc Toi Thanh Cong Ky I 2

    Các bước trong nghiên cứu thị trường để đạt hiệu quả cao.

    Huong Dan Ky Thuat Seo

    Các kỹ thuật SEO mới nhất hiện nay

    Cach Thu Hut Khach Hang

    Xây dựng chiến lược thu hút khách hàng hiệu quả

  • Kiến Thức Marketing
    gọi điện thoại với khách hàng

    Xử lý cuộc gọi điện thoại với khách hàng chuyên nghiệp

    Phc6b0c6a1ng Phc3a1p Tie1babfp Ce1baadn Khc3a1ch Hc3a0ng Khi Seo Websitee 1

    Kinh nghiệm tìm kiếm chủ đề cho Website

    Screen Shot 2012 03 27 At 10.12.02 Pm 3

    Những lời khuyên về marketing giúp bạn thành công

    đo Lường Các Chỉ Số Seo

    Cách đo lường các chỉ số SEO quan trọng

    Huong Dan Su Dung Google Photos 6 2

    Hướng dẫn cách sử dụng Google Photos đơn giản và hiệu quả.

    How To Create A Website From Scratch The Beginnere28099s Guide 1

    Các bước tạo ra một trang Website hoàn chỉnh.

    Quy Trinh Nghien Cuu Thi Truong 6 Buoc Toi Thanh Cong Ky I 2

    Các bước trong nghiên cứu thị trường để đạt hiệu quả cao.

    Huong Dan Ky Thuat Seo

    Các kỹ thuật SEO mới nhất hiện nay

    Cach Thu Hut Khach Hang

    Xây dựng chiến lược thu hút khách hàng hiệu quả

  • Dịch Vụ
  • Sản Phẩm
  • Sự Kiện
  • Nội Bộ

Responsive Web Design là gì? Giới thiệu từ khái niệm tới thực tế

Cv.com.vn Bởi Cv.com.vn
19/01/2020
Trong Kiến Thức Marketing
0
Responsive 1

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ì
  • Vì sao cần Responsive Web Design
  • I. Flexible Grid Based Layouts
    • 1. Viewport
    • 2. GridView
  • II. Media Queries
  • 1. Các biểu thức logic bên trong Media Queries
  • 2. Media Features trong Media Queries
    • Height & Width
    • Orientation: Portrait / Landscape
    • Aspect Ratio
    • Resolution
  • 3. Cách thức Mobile First trong Responsive
  • 4. Media Queries Demo
  • III. Flexible Media
  • Tổng kết

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:

  1. Flexible Grid based layout
  2. Media Queries
  3. Flexible Media

Vì sao cần Responsive Web Design

  1. 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
  2. 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,…
  3. 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/

Tags: ẩn nội dung khi responsivekinh nghiệm làm web responsiveresponsive bootstrap là gìresponsive cho điện thoạiresponsive cho website wordpressresponsive cssresponsive css laf gifresponsive viblo
Bài Viết Trước

Digital Marketing Agency là gì? Bao gồm những bộ phận nào

Bài Viết Tiếp Theo

Marketing agency là gì? Vai trò của agency trong ngành Marketing hiện nay

Bài Viết Tiếp Theo
Agency La Gi 2

Marketing agency là gì? Vai trò của agency trong ngành Marketing hiện nay

Bài Viết Hot

Big Data Va Tam Quan Trong Voi Doanh Nghiep Viet

Ứng dụng Big Data, Marketing sẽ lên một tầm mới!

15/01/2021
Mapfolding Lg

Cách đánh dấu và lưu địa điểm trên Google map đơn giản nhất

20/01/2020

Bài Viết Gần Đây

hot trend là gì?
Kiến Thức Marketing

Hot trend là gì? Vì hot nên hấp dẫn?

18/01/2021
Big Data Va Tam Quan Trong Voi Doanh Nghiep Viet
Kiến Thức Marketing

Ứng dụng Big Data, Marketing sẽ lên một tầm mới!

15/01/2021
editor là gì?
Kiến Thức Marketing

Editor là gì? Họ cống hiến âm thầm, lặng lẽ?

12/01/2021
Freelancer
Kiến Thức Marketing

Freelancer là gì? Sống bằng nghề này như thế nào?

09/01/2021
copywriter là gì?
Kiến Thức Marketing

Copywriter là gì? Là ai? Làm gì?

06/01/2021
Content Fb 940x675 1
Kiến Thức Marketing

Content creator là gì? Có thực sự như người ta nghĩ?

03/01/2021

Atpcorp.vn

ATP Corp - Giải Pháp Phần Mềm Marketing - Hệ sinh thái Hỗ Trợ SMEs và người kinh doanh. Công cụ giúp bán hàng đa kênh hiệu quả và tiết kiệm chi phí quảng cáo.

Chuyên Mục

  • Chưa được phân loại
  • Dịch Vụ
  • Khách Hàng
  • Kiến Thức Marketing
  • Nội Bộ
  • Sản Phẩm
  • Sự Kiện
  • Tầm Nhìn – Sứ Mệnh

Bài Viết Mới

  • Hot trend là gì? Vì hot nên hấp dẫn?
  • Ứng dụng Big Data, Marketing sẽ lên một tầm mới!
  • Editor là gì? Họ cống hiến âm thầm, lặng lẽ?
  • Trang Chủ
  • Tầm Nhìn – Sứ Mệnh
  • Khách Hàng
  • Kiến Thức Marketing
  • Dịch Vụ
  • Sản Phẩm
  • Sự Kiện
  • Nội Bộ

© 2021 JNews - Premium WordPress news & magazine theme by Jegtheme.