Responsiv webbplats_Responsiv webbplats_Skillnaden mellan responsiv och adaptiv webbplatsnedladdning

Artikelkatalog

Mottaglig

Utveckla bara ett gränssnitt.
Skärmanpassningen för sidan är inom ett visst intervall: till exempel en uppsättning för PC (>1024), en uppsättning för surfplatta (768-1024), en uppsättning för mobiltelefon (<768); är anpassade. (Som du kan föreställa dig: responsiv design måste betraktas som mycket mer komplex än adaptiv design)
Skapa en webbsida och använd CSS Media Query, Content-Based Breakpoint och andra tekniker för att ändra storleken på webbsidan för att anpassa sig till skärmar med olika upplösningar.

Flera gränssnitt behöver utvecklas
Genom att detektera visningsportupplösningen bestäms det om den för närvarande åtkomliga enheten är: PC, surfplatta eller mobiltelefon, och begär därigenom servicelagret och returnerar olika sidor som svarar på visningsområdets upplösning och utför operationer på klienten för olika klienter. Kodbehandling för att visa olika layouter och innehåll.
Skapa olika webbsidor för olika typer av enheter och anropa motsvarande webbsidor efter att ha upptäckt enhetens upplösning.

Använd webbläsarens chrome eller edge för att öppna URL:en på datorn.
enligt F12 Eller högerklicka och välj Upptäckt.
Klicka i det övre vänstra hörnet av panelenIkon för enhetsbyte,Enligt nedanstående

Efter bytet,
Layouten som visas på datorn och mobilterminalerna växlar automatiskt, det vill sägaMottaglig, som den här webbplatsen;
Om layouten inte anpassas automatiskt kommer layouten att gå över till anpassning efter att sidan har uppdaterats (URL:n hoppar eller hoppar inte), dvs.Adaptiv, såsom Baidu;
Om det inte sker någon växling efter uppdatering, är den varken responsiv eller adaptiv, och den anpassar sig inte till olika enheter.

Utvecklingsperspektiv: en sida, komplexa funktioner, adaptiva enkla funktioner, lyhörd.
SEO-perspektiv: Sökmotorer föredrar i allmänhet lyhördhet.

Mottaglig:en uppsättning mallar; Anpassad av frontend, mallar med olika upplösningar slås samman till en sida, och att ladda ner en sida med mallar är bara en sida.
Adaptiv:Flera uppsättningar av mallar; Anpassad av backend, varje upplösningsmall har en sida, och olika upplösningsmallar laddas ner separat.