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

@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

html
<div class="two-columns-list">
  <ul>
    <li></li>
  </ul>
</div>
css
.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

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

Một số mẹo khác

Đăng ký nhận bản tin!

Tôi sẽ gửi một email cho bạn khi tôi tạo ra một cái gì đó mới. Tôi sẽ không bao giờ gửi thư rác cho bạn 🙅‍♂️! và bạn có thể hủy đăng ký bất kỳ lúc nào.