Các mẹo khi thiết kế web

Các mẹo khi thiết kế web

Tổng hợp một vài thủ thuật cơ bản khi thiết kế web

updated August 01, 2024163 views

@media không làm việc

Khi sử dụng bootstrap, đôi khi @media nó không hoạt động khi bạn chuyển sang sử dụng thiết bị di động, hãy thử thêm dòng dưới đây vào <head>

<meta name="viewport" content="width=device-width" />

Cách tăng tốc độ tải CSS, JS

<script type='text/javascript'>
//<![CDATA[
//CSS Ready
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("abc.css");
loadCSS("def.css");
//]]>
</script>

Tải không đồng bộ các tài nguyên JavaScript

  • Thuộc tính async của JavaScript cho phép bạn tải không đồng bộ các tài nguyên JavaScript. Nội dung HTML sẽ được tiếp tục tải mà không cần chờ đợi các tài nguyên JavaScript.
<script async src='/jquery.min.js' type='text/javascript'></script>
  • Thuộc tinh defer của JavaScript cho phép trì hoàn tải các tài nguyên JavaScript cho đến khi nội dung HTML được tải xong. Tài nguyên JavaScript sẽ được tải sau khi toàn bộ HTML được tải xong.
<script defer src='/jquery.min.js' type='text/javascript'></script>

Auto focus thẻ input khi load trang

Chỉ cần thêm autofocus vào thẻ <input>

<input name="q" class="search" type="search" placeholder="..." autofocus>

Tách một danh sách thành 2 cột

Và làm cho nó thành 1 nếu bạn thu nhỏ màn hình xem demo

<div class="two-columns-list">
  <ul>
    <li></li>
  </ul>
</div>
.two-columns-list{
  -webkit-columns: 384px 2;
  -moz-columns: 384px 2;
  columns: 350px 2;
}

Flexbox Responsive Form

  • 4 layout cho Form chỉ với một đoạn code nhờ Flexbox
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Flexbox Responsive Form</title>
    <link rel="stylesheet" href="./styles.css" />
  </head>
  <body>
    <form>
      <input type="text" placeholder="Name">
      <input type="email" placeholder="Email Address">
      <input type="submit" value="Subscribe">
    </form>
  </body>
</html>
Open on CodeSandboxOpen Sandbox

Các công cụ hữu ích khác

  • Mario Ranftl - google-webfonts-helper.
  • bttn.css - Một cái nút đẹp cho trang web của bạn.
  • Locofy - Công cụ giúp chuyển thiết kế của bạn (Figma) thành code (React/React Native, HTML/CSS, Vue, Angular).

Xem thêm: Tổng hợp các công cụ & tài nguyên dành cho phát triển Web

Một số mẹo khác