Làm thế nào để tạo một giao diện có thể thay đổi kích cỡ trong CSS3 - núm vú

Sự đa dạng và loại màn hình sử dụng để hiển thị thông tin làm cho cần thiết rằng lệnh CSS3 của bạn cho phép người dùng thay đổi kích thước các phần tử như cần thiết. Trong hầu hết các trường hợp, bạn chỉ đơn giản có thể cho phép người dùng tạo bất kỳ phần tử nào. Tuy nhiên, có thể có các tình huống mà bạn cần giám sát số lượng thay đổi kích thước để bạn có thể điều chỉnh nội dung để đáp ứng nhu cầu của vùng chứa.

Ví dụ sau cho thấy làm thế nào để thay đổi kích thước một đối tượng và giám sát kích thước của nó. (Bạn có thể tìm thấy mã hoàn chỉnh cho ví dụ này trong thư mục Chương 06Interactions của mã có thể tải xuống như ResizeContent. HTML.)

Chiều cao: "+ ui. size. height);}});});

Ví dụ này rất thú vị vì nó cho biết làm thế nào để thiết lập thuộc tính cũng như đáp ứng các sự kiện. Trong trường hợp này, các thuộc tính minWidth và minHeight giữ cho phần tử có kích thước tối thiểu cụ thể - người dùng không thể làm cho phần tử nhỏ hơn.

Mã cũng phản hồi lại sự kiện thay đổi kích cỡ. Có một yêu cầu đặc biệt cho việc thay đổi kích thước bạn cần biết. Hộp chứa thay đổi kích thước được tách biệt với phần tử nội dung. Dưới đây là HTML cho ví dụ này:

Đoạn có thể định lại lại được

Kiểu liên quan, #ResizeMe, cung cấp đường viền xung quanh, đặt chiều cao và chiều rộng bắt đầu và trung tâm nội dung trong vùng chứa.

Khi bạn muốn viết nội dung lên màn hình, bạn phải sử dụng phần tử nội dung chứ không phải là phần tử chứa. Nếu không, các chốt xử lý sẽ biến mất, và người dùng sẽ không thể thay đổi kích thước của phần tử sau lần đầu tiên. Trong trường hợp này, kích thước hiện tại của vùng chứa sẽ xuất hiện như là một phần của đối tượng ui được truyền cho trình xử lý sự kiện thay đổi kích cỡ.

Bạn truy cập thông tin mặc dù kích thước. chiều rộng và kích thước. chiều cao, như thể hiện trong mã.