Lydhør

1. Bare udvikle en grænseflade.
2. Skærmtilpasningen for siden er inden for et bestemt område: for eksempel et sæt til pc (>1024), et sæt til tablet (768-1024), et sæt til mobiltelefon (<768); er tilpasset. (Som du kan forestille dig: responsivt design skal betragtes som meget mere komplekst end adaptivt design)
3. Opret en webside og brug CSS Media Query, Content-Based Breakpoint og andre teknologier til at ændre størrelsen på websiden, så den tilpasser sig skærme med forskellige opløsninger.

Fleksibel

1. Der skal udvikles flere grænseflader
2. Ved at detektere viewport-opløsningen bestemmes det, om den aktuelt tilgåede enhed er: PC, tablet eller mobiltelefon, og derved anmoder om servicelaget og returnerer forskellige siders responsive design, detekterer viewport-opløsningen og udfører operationer på klienten for forskellige klienter. Kodebehandling for at vise forskellige layouts og indhold.
3. Opret forskellige websider til forskellige typer enheder, og ring til de tilsvarende websider efter at have registreret enhedens opløsning.

skelne mellem responsiv og adaptiv

1. Brug browserens chrome eller edge til at åbne URL'en på computeren.
2. ifølge F12 Eller højreklik og vælg Opdagelse.
3. Klik i øverste venstre hjørne af paneletIkon for enhedsskift,Som vist nedenfor

4. Efter skift,
   Det layout, der vises på computeren og mobilterminalerne, skifter automatisk, dvsLydhør, såsom dette websted;
   Hvis layoutet ikke automatisk tilpasser sig, vil layoutet skifte til tilpasning efter opdatering af siden (URL'en hopper eller hopper ikke), dvs.Fleksibel, såsom Baidu;
   Hvis der ikke skiftes efter opdatering, er den hverken responsiv eller adaptiv, og den tilpasser sig ikke til forskellige enheder.

forslag

• Udviklingsperspektiv: enkelt side, komplekse funktioner, adaptive simple funktioner, responsive.
• SEO-perspektiv: Søgemaskiner foretrækker generelt lydhørhed.

Sammenfatte

• Lydhør:et sæt skabelonerTilpasset af frontend, skabeloner med forskellige opløsninger flettes til én side, og download af én side med skabeloner er kun én side.
• Fleksibel:Flere sæt skabelonerTilpasset af backend har hver opløsningsskabelon en side, og forskellige opløsningsskabeloner downloades separat.