Máy tính kẹp css

ESP8266

ESP32

RP2040

Cốt lõi

Wifi

MQTT

Mạng

Xe buýt I²C

xe buýt SPI

xe buýt UART

Có thể xe buýt

Cập nhật OTA

Tiều phu

Máy chủ web

API gốc

Nguồn cấp

Giấc ngủ sâu

Thành phần bên ngoài

Cảm biến đã được chia thành các loại. Nếu một cảm biến phù hợp với nhiều danh mục, nó sẽ được liệt kê nhiều lần

Kiểu chữ đáp ứng đã từng được thử trước đây với hàng loạt phương pháp như truy vấn phương tiện và CSS

.banner {
  width: clamp(200px, 50% + 20px, 800px); /* Yes, you can do math inside clamp()! */
}

Ở đây, chúng ta sẽ khám phá một cách khác để chia tỷ lệ tuyến tính cho văn bản giữa một tập hợp các kích thước tối thiểu và tối đa khi chiều rộng của khung nhìn tăng lên, với mục đích làm cho hành vi của nó ở các kích thước màn hình khác nhau dễ đoán hơn — Tất cả trong một dòng CSS

Hàm CSS

.banner {
  width: clamp(200px, 50% + 20px, 800px); /* Yes, you can do math inside clamp()! */
}

clamp(minimum, preferred, maximum);

Giá trị nó trả về sẽ là giá trị ưu tiên, cho đến khi giá trị ưu tiên đó thấp hơn giá trị tối thiểu (tại thời điểm đó giá trị tối thiểu sẽ được trả về) hoặc cao hơn giá trị tối đa (tại thời điểm đó giá trị tối đa sẽ được trả về)

Sau đó, nó sẽ không luôn là giá trị ưa thích, giả sử bạn không kỳ lạ và đặt nó giữa mức tối thiểu và tối đa?

.banner {
  width: clamp(200px, 50% + 20px, 800px); /* Yes, you can do math inside clamp()! */
}

Giả sử bạn muốn đặt

.banner {
  width: clamp(200px, 50% + 20px, 800px); /* Yes, you can do math inside clamp()! */
}

Nói cách khác

1rem   = 360px and below
Scaled = 361px - 839px
3.5rem = 840px and above

Bất kỳ chiều rộng khung nhìn nào trong khoảng từ 361 đến 839 pixel đều cần kích thước phông chữ được chia tỷ lệ tuyến tính trong khoảng từ 1 đến 3. 5rem. Điều đó thực sự siêu dễ dàng với

.banner {
  width: clamp(200px, 50% + 20px, 800px); /* Yes, you can do math inside clamp()! */
}

Những gì chúng tôi đang cố gắng đạt được với

.banner {
  width: clamp(200px, 50% + 20px, 800px); /* Yes, you can do math inside clamp()! */
}

Dưới đây là bốn bước để làm điều này

Bước 1

Chọn kích thước phông chữ tối thiểu và tối đa của bạn cũng như chiều rộng khung nhìn tối thiểu và tối đa của bạn. Trong ví dụ của chúng tôi, đó là 1rem và 3. 5rem cho kích thước phông chữ và 360px và 840px cho chiều rộng

Bước 2

Chuyển đổi chiều rộng thành

1rem   = 360px and below
Scaled = 361px - 839px
3.5rem = 840px and above

Bước 3

Ở đây, chúng ta sẽ nghiêng một chút về khía cạnh toán học. Khi được ghép nối với nhau, chiều rộng khung nhìn và kích thước phông chữ tạo thành hai điểm trên hệ tọa độ X và Y và những điểm đó tạo thành một đường

1rem   = 360px and below
Scaled = 361px - 839px
3.5rem = 840px and above

1rem   = 360px and below
Scaled = 361px - 839px
3.5rem = 840px and above

Chúng ta cần đường thẳng đó - hay đúng hơn là độ dốc và giao điểm của nó với trục Y cụ thể hơn. Đây là cách tính toán

slope = (maxFontSize - minFontSize) / (maxWidth - minWidth)
yAxisIntersection = -minWidth * slope + minFontSize

Điều đó mang lại cho chúng ta một giá trị 0. 0833 cho độ dốc và -0. 875 cho giao điểm tại trục Y

Bước 4

Bây giờ chúng ta xây dựng hàm

.banner {
  width: clamp(200px, 50% + 20px, 800px); /* Yes, you can do math inside clamp()! */
}

preferredValue = yAxisIntersection[rem] + (slope * 100)[vw]

Vì vậy, chức năng kết thúc như thế này

.header {
  font-size: clamp(1rem, -0.875rem + 8.333vw, 3.5rem);
}

Bạn có thể hình dung kết quả trong bản demo sau

Dự phòng nhúng CodePen

Đi trước và chơi với nó. Như bạn có thể thấy, kích thước phông chữ ngừng tăng khi chiều rộng khung nhìn là 840px và ngừng thu nhỏ ở 360px. Mọi thứ ở giữa thay đổi theo kiểu tuyến tính

Nếu người dùng thay đổi kích thước phông chữ gốc thì sao?

Bạn có thể đã nhận thấy một lỗ hổng nhỏ với toàn bộ cách tiếp cận này. nó chỉ hoạt động miễn là kích thước phông chữ của gốc là kích thước bạn nghĩ - là 16px trong ví dụ trước - và không bao giờ thay đổi

Chúng tôi đang chuyển đổi chiều rộng, 360px và 840px, thành các đơn vị

1rem   = 360px and below
Scaled = 361px - 839px
3.5rem = 840px and above

Chỉ có một cách tiếp cận chúng ta có thể sử dụng ở đây và đó là (1) thực hiện các phép tính cần thiết trong mã khi tải trang, (2) lắng nghe các thay đổi đối với kích thước phông chữ của thư mục gốc và (3) tính toán lại mọi thứ nếu có bất kỳ thay đổi nào xảy ra

Đây là một hàm JavaScript hữu ích để thực hiện các phép tính

// Takes the viewport widths in pixels and the font sizes in rem
function clampBuilder( minWidthPx, maxWidthPx, minFontSize, maxFontSize ) {
  const root = document.querySelector( "html" );
  const pixelsPerRem = Number( getComputedStyle( root ).fontSize.slice( 0,-2 ) );

  const minWidth = minWidthPx / pixelsPerRem;
  const maxWidth = maxWidthPx / pixelsPerRem;

  const slope = ( maxFontSize - minFontSize ) / ( maxWidth - minWidth );
  const yAxisIntersection = -minWidth * slope + minFontSize

  return `clamp( ${ minFontSize }rem, ${ yAxisIntersection }rem + ${ slope * 100 }vw, ${ maxFontSize }rem )`;
}

// clampBuilder( 360, 840, 1, 3.5 ) -> "clamp( 1rem, -0.875rem + 8.333vw, 3.5rem )"

Tôi đang cố tình bỏ qua cách đưa chuỗi trả về vào CSS vì có rất nhiều cách để làm điều đó tùy thuộc vào nhu cầu của bạn và liệu bạn có đang sử dụng vanilla CSS, thư viện CSS-in-JS hay thứ gì khác không. Ngoài ra, không có sự kiện riêng cho thay đổi kích thước phông chữ, vì vậy chúng tôi sẽ phải kiểm tra điều đó theo cách thủ công. Chúng tôi có thể sử dụng

1rem   = 360px and below
Scaled = 361px - 839px
3.5rem = 840px and above

Đây là một trường hợp cạnh. Rất ít người thay đổi kích thước phông chữ của trình duyệt và càng ít người thay đổi nó một cách chính xác khi truy cập trang web của bạn. Nhưng nếu bạn muốn trang web của mình phản hồi nhanh nhất có thể, thì đây là cách nên làm

Đối với những người không quan tâm đến trường hợp cạnh đó

Bạn nghĩ rằng bạn có thể sống mà không cần nó là hoàn hảo? . Tôi đã tạo một công cụ nhỏ để thực hiện các phép tính nhanh chóng và đơn giản

Tất cả những gì bạn phải làm là cắm chiều rộng và kích thước phông chữ vào công cụ và chức năng sẽ được tính toán cho bạn. Sao chép và dán kết quả vào CSS của bạn. Nó không cầu kỳ và tôi chắc chắn rằng rất nhiều thứ có thể được cải thiện, nhưng với mục đích của bài viết này, như vậy là quá đủ. Vui lòng rẽ nhánh và sửa đổi nội dung trái tim của bạn

Làm thế nào để tránh chỉnh lại văn bản

Có khả năng kiểm soát chi tiết như vậy đối với các kích thước của kiểu chữ cho phép chúng tôi thực hiện những thứ hay ho khác — như ngăn văn bản chỉnh lại dòng ở các độ rộng khung nhìn khác nhau

Đây là cách văn bản thường hoạt động

Nhưng bây giờ, với quyền kiểm soát mà chúng tôi có, chúng tôi có thể làm cho văn bản giữ nguyên số dòng, luôn ngắt dòng trên cùng một từ, trên bất kỳ chiều rộng khung nhìn nào mà chúng tôi sử dụng.

Vì vậy, làm thế nào để chúng tôi làm điều này? . Trong ví dụ này, chúng tôi chuyển từ 1rem ở 320px sang 3rem ở 960px

320 / 1 = 320
960 / 3 = 320

Nếu chúng ta đang sử dụng hàm

1rem   = 360px and below
Scaled = 361px - 839px
3.5rem = 840px and above

const text = document.querySelector( "p" );
text.style.fontSize = clampBuilder( 320, 960, 1, 3 );

Nó giữ nguyên tỷ lệ chiều rộng trên phông chữ. Lý do chúng tôi làm điều này là vì chúng tôi cần đảm bảo rằng văn bản có kích thước phù hợp ở mọi chiều rộng để văn bản có thể giữ nguyên số dòng. Nó vẫn sẽ chỉnh lại dòng ở các độ rộng khác nhau nhưng làm điều này là cần thiết cho những gì chúng ta sẽ làm tiếp theo.  

Bây giờ chúng ta phải nhờ sự trợ giúp từ đơn vị ký tự CSS (

1rem   = 360px and below
Scaled = 361px - 839px
3.5rem = 840px and above

1rem   = 360px and below
Scaled = 361px - 839px
3.5rem = 840px and above

1rem   = 360px and below
Scaled = 361px - 839px
3.5rem = 840px and above

slope = (maxFontSize - minFontSize) / (maxWidth - minWidth)
yAxisIntersection = -minWidth * slope + minFontSize

slope = (maxFontSize - minFontSize) / (maxWidth - minWidth)
yAxisIntersection = -minWidth * slope + minFontSize

1rem   = 360px and below
Scaled = 361px - 839px
3.5rem = 840px and above

Để tìm

slope = (maxFontSize - minFontSize) / (maxWidth - minWidth)
yAxisIntersection = -minWidth * slope + minFontSize

1rem   = 360px and below
Scaled = 361px - 839px
3.5rem = 840px and above

Đừng lo lắng, đây là một đoạn mã để tính toán kích thước

1rem   = 360px and below
Scaled = 361px - 839px
3.5rem = 840px and above

// Returns the width, in pixels, of the "0" glyph of an element at a desired font size
function calculateCh( element, fontSize ) {
  const zero = document.createElement( "span" );
  zero.innerText = "0";
  zero.style.position = "absolute";
  zero.style.fontSize = fontSize;

  element.appendChild( zero );
  const chPixels = zero.getBoundingClientRect().width;
  element.removeChild( zero );

  return chPixels;
}

Bây giờ chúng ta có thể tiến hành thiết lập độ rộng của văn bản

.banner {
  width: clamp(200px, 50% + 20px, 800px); /* Yes, you can do math inside clamp()! */
}

Chờ đã. Điều xấu đã xảy ra. Có một thanh cuộn ngang làm hỏng mọi thứ

Khi chúng ta nói về 320px, chúng ta đang nói về chiều rộng của khung nhìn, bao gồm cả thanh cuộn dọc. Vì vậy, chiều rộng của văn bản đang được đặt thành chiều rộng của vùng hiển thị, cộng với chiều rộng của thanh cuộn làm cho nó tràn theo chiều ngang

Vậy thì tại sao không sử dụng số liệu không bao gồm chiều rộng của thanh cuộn dọc? . Hãy nhớ rằng, chúng tôi đang sử dụng

slope = (maxFontSize - minFontSize) / (maxWidth - minWidth)
yAxisIntersection = -minWidth * slope + minFontSize

.banner {
  width: clamp(200px, 50% + 20px, 800px); /* Yes, you can do math inside clamp()! */
}

slope = (maxFontSize - minFontSize) / (maxWidth - minWidth)
yAxisIntersection = -minWidth * slope + minFontSize

Vậy, chúng ta làm gì?

.banner {
  width: clamp(200px, 50% + 20px, 800px); /* Yes, you can do math inside clamp()! */
}

…chúng ta có thể thu nhỏ kết quả bằng cách nhân nó với một số nhỏ hơn 1. 0. 9 thực hiện thủ thuật. Điều đó có nghĩa là chiều rộng của văn bản sẽ bằng 90% chiều rộng của khung nhìn, điều này sẽ chiếm nhiều hơn lượng không gian nhỏ được chiếm bởi thanh cuộn. Chúng ta có thể làm cho nó hẹp hơn bằng cách sử dụng một số thậm chí còn nhỏ hơn, chẳng hạn như 0. 6

.banner {
  width: clamp(200px, 50% + 20px, 800px); /* Yes, you can do math inside clamp()! */
}

Bạn có thể muốn chỉ cần trừ một vài pixel từ 320 để bỏ qua thanh cuộn, như thế này

.banner {
  width: clamp(200px, 50% + 20px, 800px); /* Yes, you can do math inside clamp()! */
}

Vấn đề với điều này là nó mang lại vấn đề chỉnh lại dòng. Đó là bởi vì trừ 320 sẽ phá vỡ tỷ lệ khung nhìn trên phông chữ

Chiều rộng của văn bản phải luôn là tỷ lệ phần trăm của chiều rộng khung nhìn. Một điều khác cần lưu ý là chúng tôi cần đảm bảo rằng chúng tôi đang tải cùng một phông chữ trên mọi thiết bị sử dụng trang web. Điều này nghe có vẻ hiển nhiên phải không? . Làm điều gì đó như

preferredValue = yAxisIntersection[rem] + (slope * 100)[vw]

preferredValue = yAxisIntersection[rem] + (slope * 100)[vw]

Kiểm tra ví dụ không phản chiếu này trong bản demo sau

Dự phòng nhúng CodePen

Văn bản không phản chiếu bên trong vùng chứa

Tất cả những gì chúng ta phải làm bây giờ là áp dụng kích thước phông chữ và chiều rộng cho vùng chứa thay vì các phần tử văn bản trực tiếp. Văn bản bên trong nó sẽ chỉ cần được đặt thành

1rem   = 360px and below
Scaled = 361px - 839px
3.5rem = 840px and above

Dự phòng nhúng CodePen

Một lợi thế của việc áp dụng điều này trong vùng chứa chính là các phần tử con của nó sẽ tự động phản ứng và thay đổi kích thước mà không cần phải đặt từng kích thước và độ rộng phông chữ của chúng. Ngoài ra, nếu chúng ta cần thay đổi kích thước phông chữ của một phần tử mà không ảnh hưởng đến các phần tử khác, thì tất cả những gì chúng ta phải làm là thay đổi kích thước phông chữ của nó thành bất kỳ số lượng

preferredValue = yAxisIntersection[rem] + (slope * 100)[vw]

Dự phòng nhúng CodePen

Văn bản không chỉnh dòng rất phức tạp, nhưng đó là một hiệu ứng tinh tế có thể mang lại nét đẹp cho thiết kế

kết thúc

Để kết thúc mọi thứ, tôi tập hợp một minh họa nhỏ về cách tất cả những điều này có thể trông như thế nào trong một tình huống thực tế

Dự phòng nhúng CodePen

Trong ví dụ cuối cùng này, bạn cũng có thể thay đổi kích thước phông chữ gốc và hàm

.banner {
  width: clamp(200px, 50% + 20px, 800px); /* Yes, you can do math inside clamp()! */
}

Mặc dù mục tiêu của bài viết này là sử dụng

.banner {
  width: clamp(200px, 50% + 20px, 800px); /* Yes, you can do math inside clamp()! */
}

preferredValue = yAxisIntersection[rem] + (slope * 100)[vw]

Cá nhân tôi tin rằng

.banner {
  width: clamp(200px, 50% + 20px, 800px); /* Yes, you can do math inside clamp()! */
}