Ý tưởng tiêu đề html

Các bước chia cột

1. Các cột phải luôn có một thùng chứa, tức là phần tử mẹ bao bọc nó
2. Thiết lập chiều rộng cho vùng chứa
3. Thiết lập chiều rộng cho hai cột, tổng chiều rộng trong hai cột phải luôn bằng hoặc ít hơn chiều rộng của vùng chứa
4. Nên sử dụng box-sizing. hộp viền để tính toán kích thước chính xác
5. Sử dụng thuộc tính float với giá trị trái và phải để đưa phần tử về sang trái hoặc phải
6. Clear float process

Ví dụ

<header>
      <div id="head">
        <div class="logo">logodiv>
        <div class="banner">bannerdiv>
      div>
      <div id="head-link">head-linkdiv>
header>
<section class="content">
  <div id="left">leftdiv>
  <div id="content">contentdiv>
  <div id="right">rightdiv>
section>
<footer>footerfooter>

#head {
  width: 100%;
  overflow: auto;
}

.logo {
  width: 20%;
  background-color: aquamarine;
  float: left;
  box-sizing: border-box;
  padding: 30px;
}

.banner {
  width: 80%;
  background-color: aqua;
  float: right;
  box-sizing: border-box;
  padding: 30px;
}

#head-link {
  background-color: blue;
  padding: 10px;
}

.content::after {
  content: '';
  clear: both;
  display: table;
}

#left, #content, #right {
  width: 15%;
  float: left;
  box-sizing: border-box;
  padding: 150px 30px;
  background-color: antiquewhite;
}

#content {
  width: 70%;
  background-color: aliceblue;
}

#right {
  background-color: wheat;
}

footer {
  padding: 30px;
  background-color: brown;
}

Kết quả sau khi thực thi mã như sau.

Nguyên lý hoạt động của thuộc tính float

1. Khi một phần tử được thiết lập thuộc tính float
   • Nó sẽ được bắt đầu ở hàng phía trên , nếu hàng phía trên còn đủ chỗ trống để chứa nó
   • Nó sẽ được bắt đầu ở hàng mới, nếu hàng phía sau không đủ chỗ trống để chứa nó

Lưu ý. Nếu một phần tử được thiết lập thuộc tính float mà trong khi phần tử đứng trước nó không được thiết lập thuộc tính float, thì mặc định nó được bắt đầu ở hàng mới

1. Khi hàng không đủ chỗ chứa phần tử thì phần tử phải bắt đầu ở hàng mới. Tuy nhiên, cách bắt đầu như thế nào mới là quan trọng. Khi trên một hàng có nhiều phần tử được thiết lập thuộc tính float và mỗi phần tử có chiều cao khác nhau, nếu hàng không đủ chỗ chứa phần tử thì phần tử sẽ bắt đầu bên cạnh phần tử có chiều cao thấp nhất và còn đủ

* Sử dụng Flex-box

Flexbox là một kiểu dàn trang (layout mode) mà nó sẽ tự cân đối kích thước của các phần tử bên trong để hiển thị trên mọi thiết bị. Nói theo cách khác, bạn không cần thiết lập kích thước của phần tử, không cần cho nó nổi, chỉ cần thiết lập nó hiển thị theo chiều ngang hoặc chiều dọc, khi đó các phần tử bên trong có thể hiển thị theo ý muốn

Thành phần quan trọng nhất của Flexbox là

• thùng đựng hàng. is thành phần lớn bao quanh các phần tử bên trong, các mục bên trong sẽ hiển thị dựa trên thiết lập của vùng chứa này
• mục. là phần tử con của vùng chứa, bạn có thể thiết lập nó sẽ sử dụng bao nhiêu cột trong một vùng chứa, hoặc thiết lập thứ tự hiển thị của nó

Một số thuộc tính cơ bản

• Use display. uốn cong;
• Sử dụng justify-content để căn ngang các mục
• Use align-items for vertical items
• Sử dụng flex-direction nếu muốn các mục theo chiều dọc chứ không phải ngang
• Sử dụng đảo ngược hàng hoặc đảo ngược cột để đảo ngược thứ tự mặc định
• Use order to edit the order of a tool item
• Use align-self to vertical a tool item
• Sử dụng flex để tạo ra một hộp linh hoạt có thể kéo dài và thu nhỏ

Ví dụ

<div class="wrapper">
    <header class="header-flex-2">Headerheader>
    <article class="main">
      <p>Mô-đun Flexbox Layout (Flexible Box) (Theo khuyến nghị của W3C kể từ tháng 10 năm 2017) nhằm mục đích cung cấp một cách bố trí, sắp xếp và phân phối không gian hiệu quả hơn các item trong trong một container, ngay cả khi kích thước của chúng không xác định hoặc động ( Do đó có từ 'flex').p>  
    article>
    <aside class="aside aside-1">Aside 1aside>
    <aside class="aside aside-2">Aside 2aside>
    <footer class="footer-flex-2">Footerfooter>
  div>

.wrapper {
  display: flex;  /* kich hoat flex box */
  flex-flow: row wrap;
  font-weight: bold;
  text-align: center;
}

.wrapper > * {
  padding: 10px;
  flex: 1 100%; /*cho tất cả phần tử bên trong có độ dài 100% và tỉ lệ chiếm không gian trống là như nhau*/
}

.header-flex-2 {
  background: tomato;
}

.footer-flex-2 {
  background: lightgreen;
  order: 4;
}

.main {
  text-align: left;
  background: deepskyblue;
  height: 400px;
  flex: 3 0px; /* cho phần nội dung main ở giữa chiếm 3 phần không gian trống so với 2 phần aside bên cạnh */
  order: 2;
}

.aside { flex: 1 0 0; } /* 2 phần aside sẽ chỉ chiếm 1 phần không gian */

.aside-1 {
  background: gold;
  height: 400px;
  order: 1;
}

.aside-2 {
  background: hotpink;
  height: 400px;
  order: 3;
}

Kết quả khi thực hiện.

Hiện nay, theo lời khuyên từ Mozilla, thì chúng ta sử dụng Flexbox để thiết lập cục bộ trong phạm vi nhỏ (ví dụ như các khung trong trang web) và khi thiết lập cục bộ ở phạm vi lớn hơn (như trang web chia cột) thì

Để tìm hiểu rõ hơn về flex-box thì các bạn có thể xem thêm tại đây

* Sử dụng Grid

Lưới là một mô-đun tạo bố cục trang web cục bộ trong CSS bằng cách hỗ trợ hệ thống bố cục cục bộ theo dạng lưới 2 chiều, bao gồm hàng và cột. Trước khi có Grid, bạn có thể tạo giao diện trang web theo nhiều kiểu khác nhau như sử dụng thẻ div, sử dụng bảng biểu (table)

Grid ra đời Đơn giản hóa việc xây dựng trang web giao diện và hoạt động rất tốt với Flexbox. Flexbox cũng là 1 mô-đun hỗ trợ xây dựng cục bộ nhưng áp dụng với các cục bộ đơn giản. Khi Grid và Flexbox kết hợp với nhau, lập trình viên có thể tạo ra nhiều tổ chức trang web phức tạp và đa dạng hơn

Lưới cho phép bạn tạo một mạng lưới bố cục cục bộ 2 chiều bao gồm các dòng và các cột. Ở mỗi dòng, cột và mỗi phần tử trong Grid bạn có thể chỉnh sửa kiểu vì vậy Grid cũng rất thích hợp để tạo bố cục trang Web cục bộ. Ngoài ra, các bảng biểu, các trò chơi có dạng bàn cờ như ca rô, cờ vua,… rất thích hợp sử dụng Lưới để xây dựng giao diện

Bốn bước cơ bản để tạo bố cục bằng lưới

• Tạo một phần chứa thành phần, và định nghĩa nó là hiển thị. lưới;
• Sử dụng vùng chứa đó để xác định các grid track sử dụng các thuộc tính grid-template-columns và grid-template-row
• Đặt các thành phần con bên trong vùng chứa
• Thiết lập nơi mà mỗi phần tử con thuộc về trong lưới bằng cách định nghĩa lưới-cột và lưới-hàng của nó

Ví dụ

<div class="grid-container">
    <div class="grid-item header">
      <h3>Phần Header h3>
    div>
    <div class="grid-item sidebar-1">
      Phần Sidebar 1 -<br />
      Phần Sidebar 1 -<br />
      Phần Sidebar 1 -<br />
      Phần Sidebar 1 -<br />
    div>
    <div class="grid-item content">
      Phần nội dung Web <br />
      Phần nội dung Web <br />
      Phần nội dung Web <br />
      Phần nội dung Web <br />
      Phần nội dung Web <br />
      Phần nội dung Web <br />
      Phần nội dung Web <br />
      Phần nội dung Web <br />
      Phần nội dung Web <br />
    div>
    <div class="grid-item sidebar-2">Phần Siderbar 2div>
    <div class="grid-item footer">Phần Footerdiv>
div>

.grid-container {
      display: grid;
      grid-template-areas:
        'header header header header header'
        'sidebar-1 content content content sidebar-2'
        'footer footer footer footer footer';
      text-align: center;
    }

    .header {
      padding: 5px;
      grid-area: header;
      width: 100%;
      height: 70px;
      background-color: yellow;
      box-sizing: border-box;
    }

    .sidebar-1 {
      padding: 5px;
      grid-area: sidebar-1;
      background-color: pink;
    }

    .sidebar-2 {
      padding: 5px;
      grid-area: sidebar-2;
      background-color: lightgreen;
    }

    .content {
      padding: 5px;
      grid-area: content;
      background-color: #BB8FCE;
    }

    .footer {
      padding: 5px;
      grid-area: footer;
      border: 1px dashed #AAA;
    }

Kết quả thực hiện được.

Để tìm hiểu kỹ hơn về grid layout thì các bạn có thể tham khảo thêm tại đây

* Sử dụng Framework (Bootstrap)

Bootstrap là một khung HTML, CSS và JavaScript cho phép thiết kế phát triển web đáp ứng trên thiết bị di động. Bootstrap là một framework cho phép thiết kế trang web đáp ứng nhanh hơn và dễ dàng hơn Bootstrap là bao gồm các mẫu HTML, mẫu CSS và Javascript tạo ra những cái cơ bản có sẵn như. kiểu chữ, biểu mẫu, nút, bảng, điều hướng, phương thức, băng chuyền hình ảnh và nhiều thứ khác. Trong bootstrap có thêm plugin Javascript trong đó. Trợ giúp cho công việc thiết kế reponsive của bạn nhanh hơn và nhanh hơn

Để sử dụng được bootstrap thì làm thế nào ?

Có 2 cách để bạn có thể sử dụng Bootstrap trên trang web của mình

Tải xuống Bootstrap từ getbootstrap. com

Thêm Bootstrap từ CDN

Một số lưu ý khi sử dụng Bootstrap

• lớp chứa. được sửa độ rộng tùy chỉnh theo độ phân giải, đệm sang 2 bên 15px, thẻ này bọc hầu hết tất cả thẻ div ở sau
• Lớp chứa chất lỏng. same as thẻ container but the width of it is full screen
• hàng lớp. thẻ này có lề là -15px nếu bạn muốn thẻ nào đó sát lề 2 bên của vùng chứa
• Giao diện của bootstrap là một lưới dạng dạng được chia làm 12 cột và được đặt trong một hàng lớp.

Trong đó các col- sẽ được hiểu như sau.

Ví dụ

DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Website Exampletitle>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js">script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js">script>
  <style>
  .fakeimg {
    height: 200px;
    background: #aaa;
  }
  style>
head>
<body>
<div class="jumbotron text-center" style="margin-bottom:0">
  <h1>My First Bootstrap 4 Pageh1>
  <p>Resize this responsive page to see the effect!p> 
div>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <a class="navbar-brand" href="#">Navbara>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
    <span class="navbar-toggler-icon">span>
  button>
  <div class="collapse navbar-collapse" id="collapsibleNavbar">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">Linka>
      li>
      <li class="nav-item">
        <a class="nav-link" href="#">Linka>
      li>
      <li class="nav-item">
        <a class="nav-link" href="#">Linka>
      li>    
    ul>
  div>  
nav>
<div class="container" style="margin-top:30px">
  <div class="row">
    <div class="col-sm-4">
      <h2>About Meh2>
      <div class="fakeimg">Fake Imagediv>
      <p>Some text about me in culpa qui officia deserunt mollit anim..p>
    div>
    <div class="col-sm-8">
      <h2>TITLE HEADINGh2>
      <h5>Title description, Dec 7, 2017h5>
      <div class="fakeimg">Fake Imagediv>
      <p>Some text..p>
      <p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.p>
    div>
  div>
div>
<div class="jumbotron text-center" style="margin-bottom:0">
  <p>Footerp>
div>
body>
html>

Kết quả thực hiện.

Chúng ta có thể thấy việc sử dụng bootstrap tiết kiệm điện rất nhiều thời gian để tạo ra 1 layout đơn giản như vậy

Nếu bạn muốn tìm hiểu sâu hơn về bootstrap thì có thể xem thêm tại đây

3. So sánh giữa các kỹ thuật

Giữa việc sử dụng table và div thì cách nào tiện hơn ?

Bảng thẻ/bảng. Là thẻ giúp chúng ta tạo nên một khu vực thuộc dạng bảng tính, kích thước về chiều ngang thường luôn cố định, cấu trúc vững chắc nhưng khó tùy biến, khó kết hợp với các thẻ cấu trúc hoặc các thẻ bảng khác. Nhiều dung lượng khi tải trang. Do bảng khi tải xong sẽ tự tính, nên quá trình các nội dung chưa tải về thì giao diện sẽ hiển thị khác (ví dụ như sử dụng Ajax tải nội dung là hạn chế) còn khi nội dung tải về và được hiển thị, giao diện

Thẻ Div(divison)/Khu vực. Là thẻ giúp chúng ta tạo nên một khối định dạng khu vực, kích thước không cố định khi chưa thiết lập thông số, cấu trúc mềm dẻo, dễ dàng tùy biến, dễ dàng kết hợp với các thẻ khác. Nạp ít dung lượng khi tải trang. Chỉ cần tạo kiểu để div có định dạng, sau khi dữ liệu đổ về, thì nó chỉ đổ vào vị trí nhà phát triển quy định chứ không nhảy lung tung như bảng

lưới

Với Grid, nó dễ dàng thiết lập toàn bộ hệ thống thiết kế bố trí cho trang web của bạn. Lưới vẫn có thể lồng bố cục này trong các bố cục khác và lưới cũng cho phép bạn tạo các sắp xếp cực kỳ phức tạp với mức độ chính xác. Tuy nhiên, lưới không phải là tốt nhất để căn giữa nhanh hoặc đặt một hình ảnh trong một bài viết văn bản lớn hơn. Những kiểu bố trí này được xử lý tốt nhất thông qua các phương pháp khác nhau

Uốn cong

Bao linh hoạt bao gồm nhiều thuộc tính phụ có thể đặc biệt hữu ích. Ví dụ, flex-grow và flex-shrink cho phép các cột thay đổi chiều rộng và Tỷ lệ tùy thuộc vào chế độ xem của người dùng. justify-content cho phép các mục cách đều nhau hoặc căn giữa một cách hoàn hảo. Đây là một công cụ tuyệt vời để cho phép các thành phần giao diện người dùng nhỏ hơn trông đẹp nhất trên mọi thiết bị. Tuy nhiên, thực tế là không thể nếu bạn muốn bố trí các phần tử lớn hơn trên trang, có thể bạn sẽ muốn thêm lề và sau đó thực hiện một phép toán nhỏ để chắc chắn rằng nó trông giống như bạn muốn. Điều đó có thể mất thời gian. Ngoài ra, mỗi phần trong thiết kế của bạn phải là một hàng có thẻ flex riêng biệt trên đó

Trôi nổi

Float & Clear is too quen thuộc rồi. Đây là một cách tuyệt vời để đặt một hình ảnh trong một bài viết văn bản lớn hơn

Tuy nhiên, nó không phải là một cách rất thiết thực để thiết lập trang web toàn bộ cục bộ. Nếu bạn không cẩn thận, nó có thể gặp lỗi khá nhanh và nó hơi lộn xộn khi cố gắng dọn dẹp nó. Phương thức bố trí này không có nhiều thuộc tính hợp nhất như Grid hoặc Flex và không thể tạo ra một tổ chức phức tạp.

khung

Nếu bạn là một người không hiểu quá nhiều về CSS mà muốn tạo ra một layout đơn giản dễ dùng. Thì framework chắc chắn là cách tốt nhất. Vì bạn chỉ cần những dòng HTML và các class của framework thì bạn đã có thể tạo ra những layout cơ bản và đủ dùng. Tuy nhiên có một số điều bạn cần chú ý là mỗi hàng phải là thẻ

riêng. Vì vậy nó sẽ có nhiều

nên nó rất là loằng ngoằng và phức tạp nó lại càng phức tạp hơn khi có thêm nhiều class để responsive.

Vậy cái gì là tốt nhất ?

Định nghĩa tốt nhất của tôi sẽ là phương pháp bố trí yêu cầu số lượng dòng ít nhất trong css để đạt được bố cục phức tạp nhất. Lưới chắc chắn là thắng. Tuy nhiên, tôi nghĩ rằng có một nơi dành cho tất cả các phương pháp bố trí, và chúng có thể được kết hợp với nhau khi cần thiết. Khi tạo một trang web HTML / CSS tùy chỉnh, tôi khuyên bạn nên sử dụng lưới để bố trí trang web của mình, float để thêm hình ảnh đó vào bài đăng trên blog của bạn và flex để có yếu tố giao diện người dùng bật lên

4. Các lưu ý trong quá trình xây dựng bố cục trang web

Started with content. là thành phần quan trọng nhất của một trang web. tiêu đề, các đoạn văn, những bức ảnh chính, link điều hướng, video,. và tất cả những gì đã đưa người dùng đến trang web của bạn. Họ muốn đọc, học và trải nghiệm những gì trang web của bạn đề cập tới. Nội dung chính là "vua", vì vậy bạn nên nghĩ đến việc làm website sẽ hiển thị những nội dung gì trước khi nghĩ đến việc làm, nó nên trình bày với màu sắc, phông chữ nào

Điện thoại di động đầu tiên. Ngày nay, điện thoại thông minh và bảng máy tính đã trở nên rất phổ biến, vì vậy việc trích xuất những phím cần hiển thị để phù hợp với màn hình cỡ nhỏ mà không làm mất đi nội dung trang web là một điều hết sức cần thiết.

Xây dựng bản thảo. trước khi nhảy vào mã HTML, bạn nên phác thảo cách đặt nội dung của mình vào các vị trí trên trang trước. Vì thiết kế web là đặt các nội dung vào một hộp (các thẻ div hoặc các thẻ HTML khác) và đặt các hộp đó vào các vị trí trên trang. Vì vậy nên thử phát thảo các hộp, sắp xếp chúng nhanh trên giấy là cách tốt nhất để chúng ta thử các kiểu bố cục trang khác nhau

Sử dụng background image: thuộc tính background-image cung cấp một cách khác để thêm ảnh vào làm ảnh nền cho element thay cho tag . Thuộc tính này không chỉ để tiết kiệm một chút bytes khi tải HTML mà còn làm đơn giản đi một số khó khăn khi tạo layout.

Bố cục chia nhỏ. khi bố trí đủ lớn, nếu không chia nhỏ công việc từ giai đoạn thiết kế đến viết mã, bạn có thể sẽ tạo nên một sự hỗn độn. Vì vậy, nên chia nhỏ bố cục để tiếp tục thiết kế và viết mã sau khi tạo ra một bản phác thảo tổng thể là rất quan trọng

Margin và padding. không phải lúc nào bạn cũng cần các kỹ thuật CSS phức tạp để chuyển một phần tử vào một vị trí cụ thể. Xin lưu ý rằng phần đệm và lề chỉ là khoảng trống, vì vậy khi sử dụng các thuộc tính này, bạn có thể di chuyển các phần tử vào đúng vị trí

II. trang web đáp ứng

Trong việc xây dựng bố cục cho một trang web thì việc đáp ứng cho nó thật sự rất cần thiết. Như các bạn đã biết, tốc độ phát triển của các thiết bị công nghệ cầm tay như. iPhone, iPad, MacBook, Laptop … Và phát triển ở mọi ứng dụng cũng như hệ điều hành rất đa dạng và phong phú như. Android, iOS, Windows phone… Và các bạn đã biết là chúng ta mua điện thoại hay các thiết bị đó về sử dụng để có thể nghe nhạc, xem phim, chơi game… và một tính năng quan trọng là lướt web

1. máy tính đầu tiên

Đầu tiên PC là khái niệm để chỉ giao diện đáp ứng tuần tự từ màn hình xuống màn hình nhỏ

Để làm việc với mô hình này, chúng ta sử dụng độ rộng tối đa trong truy vấn phương tiện.

Dưới đây là các điển hình truy vấn phương tiện

________số 8

Theo cách này, khi một Bộ chọn trong css cần kiểu đi qua từ màn hình đến nhỏ sẽ được thay đổi theo thứ tự ưu tiên

2. Điện thoại di động đầu tiên

Ngược lại với PC đầu tiên thì tuần tự trình phản hồi của chúng tôi xuất phát từ màn hình nhỏ và xây dựng dần lên thiết bị có kích thước để.

Để làm việc với mô hình này, chúng ta sử dụng tham số độ rộng tối thiểu trong truy vấn phương tiện

/*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){

}

Với mô hình này, khi kiểu Css cho cùng một đối tượng thì theo thứ tự ưu tiên từ màn hình nhỏ đến, càng về sau các Css ở màn hình truy vấn càng được ưu tiên hơn

3. Các nguyên tắc cơ bản nên được áp dụng khi đáp ứng cho trang web

Nguyên tắc 1. Vui lòng đặt mình vào vị trí của người dùng

Họ sẽ thực hiện những thao tác gì, họ có thể thấy được gì khi nhìn vào và sử dụng, thao tác trên trang web của bạn. Ở thời điểm hiện tại, UI/UX rất được coi trọng trong việc thiết kế và phát triển web, bởi vì xu hướng người dùng ngày càng sử dụng các thiết bị di động nhiều hơn. Vì vậy, khi làm responsive cho web thì hãy tối ưu hóa nội dung hiển thị và trải nghiệm người dùng tốt nhất có thể, tránh việc hiển thị thiếu thông tin và gây khó khăn cho người dùng

Nguyên tắc 2. Luôn luôn là Mobile First

Vì mục đích của khi làm responsive là hướng đến người dùng các thiết bị di động, mà các thiết bị này như chúng ta biết thì ngoài cấu hình yếu hơn PC/laptop, chúng còn có màn hình nhỏ hơn. Do đó, một khi đã đáp ứng cho trang web, hãy ưu tiên hiệu suất tối ưu và hiển thị cho các thiết bị này trước đó

Nguyên tắc 3. Show content lines type

Nguyên tắc này có nghĩa là nội dung chỉ nên hiển thị trên 1 dòng từ trên xuống dưới, loại bỏ đối tượng để người dùng phải vuốt ngang để có thể xem được nội dung, họ sẽ rời khỏi trang web của bạn ngay lập tức

Nguyên tắc 4. Sử dụng các breakpoint hợp lý

Hãy liệt kê ra tất cả các điểm dừng tương ứng với kích thước của các thiết bị di động phổ biến hiện nay và chọn ra những điểm dừng phổ biến nhất để thực hiện tác vụ đáp ứng cho các thiết bị này

Nguyên tắc 5. Sử dụng các giá trị đối tương thay vì giá trị tuyệt đối

Nên sử dụng các giá trị tương thích cho việc đặt chiều rộng hoặc chiều cao cho các phần tử hiển thị trên thiết bị di động, mà cụ thể ở đây là %, giới hạn việc sử dụng các giá trị tuyệt đối như px. Các giá trị tuyệt đối sẽ không thể tự động thay đổi kích thước theo chiều rộng/ngang của thiết bị được

Nguyên tắc 6. Khoảng trống khoảng trống, giảm kích thước chữ cái lớn và lược bỏ quảng cáo

Thường thì Khoảng cách giữa các phần tử, phông chữ trên màn hình khi hiển thị sẽ có khoảng cách và độ lớn để tạo không gian thoải mái cho người dùng, nhưng nó sẽ không phù hợp trên các thiết bị di động nữa, khoảng cách . Hãy cố gắng hiển thị quảng cáo trên các thiết bị di động 1 cách tinh tế và hiệu quả nhất

Đọc tiếp