Udvikling af desktopapps med Electron · Lektion

Responsivt desktopdesign

Lær bedste praksis for at designe responsive brugergrænseflader, der tilpasser sig forskellige skærmstørrelser og desktopmiljøer i Electron.

Lektion 3 af 412 trin

Responsivt desktopdesign er en gratis Udvikling af desktopapps med Electron-lektion på CoddyKit. Dette er lektion 3 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i Udvikling af desktopapps med Electron, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Udvikling af desktopapps med Electron-kurset indeholder 4 lektioner i alt.

Hvorfor responsivt desktopdesign?

Når du bygger desktopapplikationer med Electron, kan brugerne have skærme i alle størrelser, eller de kan ofte ændre størrelsen på applikationens vindue.

Responsivt design betyder, at applikationens brugerflade (UI) tilpasser sig problemfrit til forskellige vinduesdimensioner, så brugeren får en god oplevelse uanset størrelsen.

Forhindrer rod eller tomme områder.
Sikrer læsbarhed og brugervenlighed.
Giver et professionelt og gennemarbejdet udtryk.

Webteknologi til fleksible brugerflader

Da Electron bruger webteknologier (HTML, CSS og JavaScript) til sin brugerflade, kan du udnytte effektive webdesignteknikker til at opnå responsivitet.

Det betyder, at dine eksisterende kompetencer inden for webudvikling kan bruges direkte. Vi fokuserer på, hvordan CSS og JavaScript kan gøre din Electron-applikation fleksibel.

CSS-layouts: Flexbox og Grid

Grundlaget for responsivt webdesign ligger i moderne CSS-layoutmoduler som Flexbox og CSS Grid. De gør det muligt for elementer at arrangere sig dynamisk.

Flexbox: Velegnet til endimensionelle layouts (rækker eller kolonner).
CSS Grid: Perfekt til todimensionelle layouts, hvor komplekse strukturer nemt kan oprettes.

Disse værktøjer hjælper dine UI-komponenter med automatisk at strække sig, krympe eller ombrydes.

Media queries til vinduesstørrelse

Media queries er CSS-regler, der kun anvender typografier, når bestemte betingelser er opfyldt, f.eks. viewportens bredde eller højde (dit Electron-vindue).

Du kan definere forskellige typografier til små, mellemstore og store vinduesstørrelser, så dit layout kan ændres fuldstændigt eller justeres diskret.

Et sidepanel kan f.eks. blive til en navigationslinje øverst i mindre vinduer.

Eksempel: Grundlæggende responsivt layout

Prøv at køre dette HTML-udsnit. Ændr vinduets størrelse for at se, hvordan layoutet ændres, når bredden er mindre end 600 pixels. Sidepanelet og hovedindholdet stables lodret.

<!DOCTYPE html>
<html>
<head>
<title>Responsive Demo</title>
<style>
  body { font-family: sans-serif; margin: 0; display: flex; flex-direction: column; min-height: 100vh; }
  .header { background: #333; color: white; padding: 10px; text-align: center; }
  .content { flex: 1; display: flex; flex-wrap: wrap; padding: 10px; gap: 10px; }
  .sidebar, .main { background: #f0f0f0; padding: 15px; border-radius: 5px; }
  .sidebar { flex: 1; min-width: 150px; }
  .main { flex: 3; min-width: 250px; }

  @media (max-width: 600px) {
    .content { flex-direction: column; }
    .sidebar, .main { flex: none; width: auto; }
  }
</style>
</head>
<body>
  <div class="header"><h1>My Responsive App</h1></div>
  <div class="content">
    <div class="sidebar"><h3>Navigation</h3><ul><li>Home</li><li>Settings</li><li>About</li></ul></div>
    <div class="main"><p>This is the main content area. Try resizing the window!</p></div>
  </div>
</body>
</html>

Electrons BrowserWindow-indstillinger

Ud over CSS tilbyder Electrons BrowserWindow-modul egenskaber til at styre selve vinduet, hvilket påvirker responsiviteten.

minWidth, minHeight: Forhindrer brugerne i at gøre vinduet mindre end en brugbar størrelse.
maxWidth, maxHeight: Kan begrænse vinduets størrelse, hvis dit design ikke skalerer uendeligt godt.
resizable: Angiv false, hvis du ønsker et vindue med fast størrelse (selvom det begrænser responsiviteten).

Disse indstillinger angives, når vinduet oprettes i din hovedproces.

Dynamiske justeringer med JavaScript

CSS håndterer de fleste layoutændringer, men nogle gange har du brug for JavaScript til mere komplekse dynamiske justeringer eller for at reagere på bestemte Electron-hændelser.

Du kan f.eks. ønske at:

Indlæse forskellige komponenter baseret på vinduets størrelse.
Justere canvas-renderingen, når vinduet ændrer størrelse.
Gemme vinduets aktuelle dimensioner.

Du kan lytte efter resize-hændelsen på window-objektet i din renderingsproces.

JS-eksempel: Lytter til ændring af vinduesstørrelse

Dette JavaScript-udsnit (typisk i din renderer.js-fil) viser, hvordan du registrerer, at vinduet ændrer størrelse, og udfører en handling. Det er ikke i sig selv en komplet kørbar applikation, men viser princippet.

// In your renderer.js file
window.addEventListener('resize', () => {
  const currentWidth = window.innerWidth;
  const currentHeight = window.innerHeight;
  console.log(`Window resized to: ${currentWidth}x${currentHeight}`);

  // Example: Change a CSS variable or add a class
  if (currentWidth < 768) {
    document.body.classList.add('small-window');
  } else {
    document.body.classList.remove('small-window');
  }
});

console.log('Resize listener attached!');

Tilpasning til operativsystemmiljøer

Desktopmiljøer kan variere, hvilket påvirker, hvordan din applikation ser ud og føles. Overvej faktorer som:

Systemtemaer: Lys tilstand kontra mørk tilstand. Du kan registrere dette og anvende passende CSS.
Indbyggede UI-elementer: Selvom Electron bruger webvisninger, øger det brugernes tillid, hvis du tager hensyn til operativsystemets konventioner (f.eks. knappers placering).
Fontgengivelse: Skrifttyper kan se lidt forskellige ud på tværs af operativsystemer. Test grundigt!

Electron tilbyder API'er til at forespørge systemindstillinger, f.eks. nativeTheme.

Bedste praksis for responsive applikationer

Sådan sikrer du, at din Electron-applikation er responsiv og brugervenlig:

Test ved forskellige opløsninger: Du skal ikke kun ændre størrelsen manuelt; test ved forskellige skærmstørrelser og DPI-indstillinger.
Prioritér indholdet: Sørg for, at kernefunktionaliteten altid er tilgængelig, selv ved minimale vinduesstørrelser.
Optimér ydeevnen: Komplekse CSS- eller JS-beregninger under ændring af vinduets størrelse kan medføre forsinkelser. Optimér, hvor det er muligt.
Brug relative enheder: Foretræk em, rem, vw, vh og procentangivelser frem for faste px-værdier for bedre skalering.

Test din forståelse

Hvilken af følgende Electron-BrowserWindow-indstillinger vil du bruge for at forhindre en bruger i at gøre applikationens vindue mindre end en bestemt bredde og højde?

Besvar den i den interaktive lektion

Opsummering: Responsivt design i Electron

Du har lært, at responsivt design er afgørende for, at Electron-applikationer kan tilpasse sig forskellige vinduesstørrelser og desktopmiljøer. Vi gennemgik:

Brugen af CSS (Flexbox, Grid og Media Queries) til dynamiske layouts.
Styring af vinduets adfærd med Electrons BrowserWindow-indstillinger som minWidth.
Implementering af JavaScript til avancerede dynamiske justeringer.
Bedste praksis for test og optimering af din responsive brugerflade.

Ved at anvende disse teknikker kan du skabe Electron-applikationer, der ser godt ud og fungerer godt på alle desktopopsætninger!

Gratis at komme i gang

Lær JavaScript med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser: 12
Lektioner: 47

Start gratis Se hele kurset

Ofte stillede spørgsmål

Er lektionen “Responsivt desktopdesign” gratis?

Ja — hele teksten til “Responsivt desktopdesign” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af Udvikling af desktopapps med Electron-kurset, skal du opgradere til CoddyKit PRO. Udvikling af desktopapps med Electron-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “Responsivt desktopdesign”?

Lær bedste praksis for at designe responsive brugergrænseflader, der tilpasser sig forskellige skærmstørrelser og desktopmiljøer i Electron. Du øver dig i Udvikling af desktopapps med Electron med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på Udvikling af desktopapps med Electron?

Der kræves ingen tidligere erfaring. Udvikling af desktopapps med Electron på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 3 af 4.

Hvor lang tid tager lektionen “Responsivt desktopdesign”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

Kan jeg skrive og køre kode i denne Udvikling af desktopapps med Electron-lektion?

Ja. Alle Udvikling af desktopapps med Electron-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

Alle lektioner i dette kursus

Integration af HTML, CSS og JavaScript
Brug af frontend-frameworks
Responsivt desktopdesign
Temaer og understøttelse af mørk tilstand

← Tilbage til Udvikling af desktopapps med Electron