In this era of widespread mobile device usage, ensuring that website content can adapt and display smoothly on different screen sizes (whether it's a large PC monitor or a small smartphone screen) has become one of the key factors for website success.The AnQiCMS provides powerful functions for users, helping us easily achieve this goal.

1. Understand the adaptive display mode of AnQiCMS

AnQiCMS knows the importance of multi-terminal access, and therefore provided various website display modes from the beginning of system design to meet different needs, which is explicitly mentioned in the system introduction, including:

  • 自适应模式 (Responsive Design)This is the most recommended mode we suggest.It means that the website uses a set of code and a set of templates, and through technologies such as CSS media queries, the layout and style of web elements can be automatically adjusted according to the screen size and resolution of the user's device.The advantages of this mode lie in the low maintenance cost, as the content only needs to be managed in one place.
  • 代码适配模式 (Adaptive Design)In this mode, the system will determine the type of the accessed device (such as a PC browser or a mobile browser) and return optimized HTML, CSS, or JavaScript code for that device.Although it is more complex than the adaptive mode, it allows for more detailed customization and performance optimization for different devices.
  • PC+手机独立站点模式：As the name implies, the PC website and the mobile website are completely independent two sites, usually with different domain names (such aswww.example.comandm.example.comThis pattern provides the ultimate user experience and design freedom, but also brings the highest development and maintenance costs, as it requires managing two independent content and template sets.

In AnQiCMS, you can configure in the template configuration file,config.jsonand throughtemplate_typefields (0it represents adaptive;1it represents code adaptation;2Represent computer + mobile independent site) to select and switch the operation mode of the website.For most users, choosing 'Adaptive Mode' is the most efficient and cost-effective solution, as it effectively balances user experience and management convenience.If you choose the "PC+Mobile Independent Site Mode", you need to set the "Mobile End Address" in the "Global Settings" of the background, and bind the domain name of the mobile end website.

2. Key strategies for implementing adaptive display and AnQiCMS features

No matter which mode you choose, the following key strategies and AnQiCMS features will help ensure a high-quality experience of website content across multiple terminals:

2.1 Responsive Layout and Template Construction

The template creation of AnQiCMS follows certain basic conventions, the template files use.htmlSuffix, supporting syntax similar to Django template engine.This means you can freely write or introduce CSS frameworks required for responsive layouts (such as Bootstrap), Flexbox, or CSS Grid in the template.

  • Static resource managementThe template uses styles (CSS), JavaScript scripts, and images as independent static resources./public/static/The directory allows you to centrally manage these resources, and you can also introduce external libraries for responsive design or custom styles.
  • Modular design: Template support of AnQiCMSinclude/extendsandmacroEnglish auxiliary tags.Through these tags, you can divide the page into header, footer, sidebar, and other reusable modules.For different devices, different display effects and layout adjustments can be achieved in these modules through CSS media queries, such as hiding the sidebar or adjusting the navigation menu style on mobile devices.

2.2 English image and media resource processing

Images and media files are important factors affecting the loading speed and display effect on mobile devices. AnQiCMS provides powerful content settings to help you optimize these resources: English

  • WebP format conversionIn the "Content Settings", you can choose whether to enable the Webp image format.Enable this option, and uploaded JPG, PNG, and other image files will be automatically converted to WebP format. This format can significantly reduce the size of image files, thereby accelerating the loading speed of mobile page, while maintaining good visual quality.
  • Automatic compression of large images：AnQiCMS supports the 'Auto-compress large images' feature and can set 'Auto-compress to specified width'.This can effectively avoid loading excessively large images on mobile devices, saving user traffic and loading time.
  • Flexible thumbnail processing：The system provides various "thumbnail processing methods" and customizable "thumbnail sizes".You can automatically generate thumbnails of different sizes according to the needs of different pages (such as list pages, detail pages) to avoid loading full-size images on mobile devices, thus further improving loading efficiency.
  • EnglishWhen calling articles or product content in templates, AnQiCMS supportsContentlazy loading of images (for example, throughlazy="data-src"This means that the image will only start to load when the user scrolls it into the visible area, greatly improving the first screen loading speed and overall user experience on mobile devices.
  • Remote image localizationThrough setting 'Download remote images', the system can download external images referenced in the content to the local server.This helps ensure the stability and speed of image loading on mobile devices, avoiding negative impacts on user experience due to failed external links or slow loading.

2.3 Flexible content display and dynamic adjustment

Even in the adaptive mode, you may also want to fine-tune the way content is presented across different terminals. AnQiCMS's powerful content model and template tags provide great flexibility:

  • Flexible Content Model：AnQiCMS allows you to customize content models, which means you can define rich fields for articles, products, and other content.Although adaptive design encourages content sharing, you can make use of these custom fields when necessary, judge the display of different emphasis information on PC and mobile end through template logic.
  • 精细化模板标签运用: UtilizingarchiveDetail(Document Details),categoryDetail（分类详情）等标签，您可以精确地控制哪些内容元素被显示