Snel reagerend

1. Ontwikkel gewoon een interface.
2. De schermaanpassing voor de pagina ligt binnen een bepaald bereik: bijvoorbeeld één set voor pc (>1024), één set voor tablet (768-1024), één set voor mobiele telefoon (<768); zijn aangepast. (Zoals u zich kunt voorstellen: responsief ontwerp moet als veel complexer worden beschouwd dan adaptief ontwerp)
3. Maak een webpagina en gebruik CSS Media Query, Content-Based Breakpoint en andere technologieën om de grootte van de webpagina aan te passen aan schermen met verschillende resoluties.

Aangepaste

1. Er moeten meerdere interfaces worden ontwikkeld
2. Door de viewport-resolutie te detecteren, wordt bepaald of het momenteel gebruikte apparaat een pc, tablet of mobiele telefoon is, waarbij de servicelaag wordt opgevraagd en verschillende pagina's worden geretourneerd. Het responsieve ontwerp detecteert de viewport-resolutie en voert bewerkingen uit op de client voor verschillende clients. Codeverwerking om verschillende lay-outs en inhoud weer te geven.
3. Maak verschillende webpagina's voor verschillende soorten apparaten en roep de bijbehorende webpagina's op nadat u de apparaatresolutie hebt gedetecteerd.

Maak onderscheid tussen responsief en adaptief

1. Gebruik de browser chrome of edge om de URL op de computer te openen.
2. volgens F12 Of klik met de rechtermuisknop en selecteer Detectie。
3. Klik in de linkerbovenhoek van het paneelPictogram voor het wisselen van apparaat,Zoals hieronder weergegeven

4. Na het overstappen,
   De lay-out die op de computer en mobiele terminals wordt weergegeven, verandert automatischSnel reagerend, zoals deze site;
   Als de lay-out zich niet automatisch aanpast, zal de lay-out na het vernieuwen van de pagina overschakelen naar aanpassing (de URL springt of springt niet), dat wil zeggenAangepaste, zoals Baidu;
   Als er na het vernieuwen niet wordt overgeschakeld, is het noch responsief, noch adaptief en past het zich niet aan verschillende apparaten aan.

suggestie

• Ontwikkelingsperspectief: enkele pagina, complexe functies, adaptief, eenvoudige functies, responsief.
• SEO-perspectief: Zoekmachines geven over het algemeen de voorkeur aan responsiviteit.

Samenvatten

• Snel reagerend:een set sjablonen; Aangepast door de frontend, worden sjablonen met verschillende resoluties samengevoegd tot één pagina, en het downloaden van één pagina met sjablonen is slechts één pagina.
• Aangepaste:Meerdere sets sjablonenAangepast door de backend, heeft elke resolutiesjabloon één pagina en worden verschillende resolutiesjablonen afzonderlijk gedownload.