Development Guide for the 360 AI Speaker Official Website

The author, a senior front‑end engineer at 360, shares the development notes for the 360 AI speaker official website, which primarily consists of a large‑image overview page.

Screen resolution data – Based on market statistics, screens with a width of 2560 px or less account for over 86% of users, so all large images are limited to a maximum width of 2560 px.

Large‑image rendering – After comparing <img> and background‑image, the team chose the <img> tag for its intrinsic sizing and automatic aspect‑ratio preservation during viewport scaling.

<figure class="full-img">
  <img src="https://example.com/large.jpg">
</figure>

Responsive typography – The layout uses rem units tied to the html font‑size (100 px at 1200 px viewport). A JavaScript module adjustRemOnResize recalculates the root font‑size on window resize, using a divisor of 12.

import throttle from 'lodash.throttle';
export default class adjustRemOnResize {
  constructor({ divisor, remBaseSize }) {
    this.divisor = divisor;
    this.remBaseSize = remBaseSize;
    this.html = $('html');
    this.resize();
    $(window).on('resize', throttle(this.resize.bind(this), 300));
  }
  resize() {
    const currentWidth = $(window).width();
    const remDynamicSize = currentWidth / this.divisor;
    const fontSize = remDynamicSize < this.remBaseSize ? this.remBaseSize : remDynamicSize;
    this.html.css({ fontSize });
  }
}

Usage example:

import adjustRemOnResize from './ajust_rem.js';
const options = { divisor: 12, remBaseSize: 100 };
new adjustRemOnResize(options);

HTML structure – Each feature section consists of a <section> containing an <article> for text (title, paragraph, optional <small>) and a <figure> for the corresponding image.

<section>
  <article class="intro-left intro7">
    <h3>专属儿童模式<br>精选内容助力成长</h3>
    <p>...</p>
  </article>
  <figure class="full-img">
    <img src="https://example.com/child-mode.jpg">
  </figure>
</section>

CSS layout – The layout relies on relative positioning for the section and absolute positioning for the article, with display:inline‑block and text‑align:center for horizontal centering. Example snippets:

section { position: relative; }
article { position: absolute; text-align: justify; }
figure { width: 100%; margin-top: 0.2rem; }
figure img { width: 100%; }

For centering text over an image:

.middle-heading-position-top {
  text-align: center;
  width: 100%;
}
.middle-heading-position-top div { display: inline-block; }

Custom web fonts – The site uses 360’s internal "奇字库" service to load Source Han Sans variants via a script that configures fontFamily and fontHash. After loading, CSS rules apply the fonts to headings and paragraphs.

<script>
(function(d){
  var config = {
    fontFamily:['siyuan-regular','siyuan-normal'],
    fontHash:['/*siyuan-regular-hash*/','/*siyuan-normal-hash*/'],
    urlType:'data',
    scriptTimeout:3000,
    async:true
  };
  // …load script…
})(document);
</script>

.wf-siyuanregular-n4-active .feature-list h2 { font-family: siyuan-regular, sans-serif; }
.wf-siyuannormal-n4-active .feature-list p, .wf-siyuannormal-n4-active .feature-list small { font-family: siyuan-normal, sans-serif; }

Sticky footer – A pure‑CSS solution uses height:100% on html,body, a .main-container with min-height:100vh and bottom padding, and an absolutely positioned footer at bottom:0. This works in all browsers supporting vh units.

* { box-sizing:border-box; }
html,body { height:100%; position:relative; }
.main-container { min-height:100vh; overflow:hidden; padding-bottom:100px; }
footer { position:absolute; bottom:0; width:100%; }

Conclusion – Due to a tight schedule, the team avoided newer layout modules like Flexbox, opting for well‑supported positioning and inline‑block centering techniques, while leveraging internal font services and a simple CSS footer fix to deliver a responsive, performant landing page.