In order to better support smaller-screen devices such as mobile phones and tablets, XenForo 1.2 will be introducing a responsive version of the default design. What is responsive design? At the simplest level, it allows you to specify CSS that applies only if the screen width is below a certain level. This allows the design to be significantly altered to fit smaller screens. For example, tabular or horizontally-focused designs don't work well when you only have a screen that's 320px wide (an iPhone). So, what options will XenForo provide? Here you can see that we provide 3 "inflection points". In general, they correspond to particular classes of devices. Narrow (max width: 480px): phones vertical, some phones horizontal Medium (max width: 600px): some phones horizontal, 7" tablets vertical Wide (max width: 800px): 7" tablets horizontal, 10" tablets vertical You can also disable the responsive design entirely. Specific pages can also opt out of the responsive design with a <xen:container /> line. For add-on developers, many of your pages will automatically support the responsive design well. It really depends how much "default" CSS you are using. If you are creating multi-column layouts (such as some resource manager pages), you will need to write custom responsive versions. However, if you're just using standard systems like tabs and forms, you will automatically inherit the responsive changes. The extent of changes on a page will really vary based on the width of a device. For example, "wide devices" (601-800px by default) will see mostly similar pages, but things like sidebars will be moved if needed. But this is really more about screenshots. For ease of my job, I'm taking these screenshots in Chrome on a desktop machine. As always, this is a work in progress and things are still subject to change. This part does deserve special mention as it's very dynamic now. The short of it is that if there's not enough space to fit things (at any resolution), navigation/search options will be hidden as necessary and shown behind menus. User alerts/unread conversation counts will be folded into your user menu. If there is a selected navigation tab, it will always be shown as well. These screens are all taken at the "narrow" level to show you the full extent of the possible changes.
Để hỗ trợ tốt hơn các thiết bị có màn hình nhỏ như điện thoại di động, máy tính bảng. Xenforo 1.2 sẽ được hỗ trợ sẵn responsive cho các style của mình. Responsive Design hiểu một cách đơn giản là bạn sử dụng các đoạn mã CSS tương ứng với mỗi loại kích thước màn hình đã được định sẵn. Điều này giúp designer có thể bỏ đi những thành phần của website để hiển thị tốt hơn trên các loại màn hình khác. Xenforo 1.2 sẽ hỗ trợ các tùy chọn sau cho Responsive: Ở đây các bạn có thể thấy XF 1.2 cho chúng ta 3 tùy chọn. Đây cũng là những kích thước màn hình phổ biến của các loại thiết bị Narrow (max width: 480px): màn hình điện thoại dọc Medium (max width: 600px): màn hình điện thoại nằm ngang, các máy tính bảng 7″ Wide (max width: 800px): Các máy tính bảng 7″ nằm ngang và máy tính bảng 10″ Tất nhiên, để linh động trong hoàn cảnh thực tế, Xenforo 1.2 cũng cho phép bạn không sử dụng (bật / tắt) Responsive. Và đặc biệt các trang cụ thể có thể sử dụng tính năng Responsive design với tag <xen:comtainer /> Với lập trình viên khi làm addon, rất nhiều trang đã được hỗ trợ responsive tự động. Nó phụ thuộc vào bạn có sử dụng CSS mặc định hay ko. Nếu bạn tạo giao diện nhiều cột bạn sẽ cần phải tạo một version responsive riêng. Tuy nhiên nếu bạn những hệ thống chuẩn như tabs hoặc forms, bạn sẽ được thừa hưởng những thay đổi về responsive. Để hiểu thêm về Responsive design trên Xenforo 1.2 bạn có thể xem các ảnh chụp màn hình sau:
Xenforo 1.2 có thêm cái này rất hay . Nhiều người không phải đi thiết kế một giao diện cho điện thoại di động và máy tính bảng nữa . Responsive là xu thế thiết kế hiện nay
Hic ! Mới mần xong cái template cho bản 1.1.5 thì nó release 1.2.1 ! Chắc phải update luôn cái vụ responsive quá
