Just nu i M3-nätverket
Gå till innehåll

Responsiv webbdesign med Media Queries


Jompan

Rekommendera Poster

Jag har förstått att för att mobilanpassa en hemsida krävs hjälp av Media Queries.

Kan någon förklara med text och kod vad detta innebär för en enkel hemsida?

// Agneta

Länk till inlägg
Dela på andra webbplatser

Responsiv webbdesign

Det är nogot annpass olika skärmar

Från smartklocka,  moblier , pada, skärm, tv skärm ,storbild skärm 

Enkel  förklaring är att är gjord för html5 som skala om websida.

Sen kan man anpasaa så visss saker ligger någolunda lika 

 

Användare märkar inte av , eller ser någon större förändring ..

 

Inna cord för Responsiv webbdesign

Kom till fick webbdesigner göra flers olika websidor,  varje platform 

Sen är folk vill bra sks fungera som en app.  

Personligen vill jag allt fungera på varje platform  utan behöva skriva masss special corde 

 

Du tänker Responsiv webbdesign

Ska använda i mitt tycke .

 

 

 

 

 

Länk till inlägg
Dela på andra webbplatser
55 minuter sedan, skrev Stafstaf:

Responsiv webbdesign

Det är nogot annpass olika skärmar

Från smartklocka,  moblier , pada, skärm, tv skärm ,storbild skärm 

Enkel  förklaring är att är gjord för html5 som skala om websida.

Sen kan man anpasaa så visss saker ligger någolunda lika 

 

Användare märkar inte av , eller ser någon större förändring ..

 

Inna cord för Responsiv webbdesign

Kom till fick webbdesigner göra flers olika websidor,  varje platform 

Sen är folk vill bra sks fungera som en app.  

Personligen vill jag allt fungera på varje platform  utan behöva skriva masss special corde 

 

Du tänker Responsiv webbdesign

Ska använda i mitt tycke .

Nu ligger den här tråden i forumet som heter Webbutveckling och här ställer man frågor just för att man vill ha hjälp med programmering eller liknande. I detta fall då hur man skriver sina webbsidor för att få till responsiv design. Man vill då inte få veta vad responsiv design är för det vet man redan.

 

Cecilia

Moderator

Länk till inlägg
Dela på andra webbplatser
3 timmar sedan, skrev Jompan:

Jag har förstått att för att mobilanpassa en hemsida krävs hjälp av Media Queries.

Jag är admin för en webbplats med responsiv webbdesign men känner inte till något om Media Queries. Webbplatsen drivs med WordPress och ett tema som avser responsiv webbdesign. Behöver inte tänka på den saken när nya sidor skapas, och menyn ställer automatiskt om på mindre bildskärmar utan att jag behöver göra något för att det ska bli så.


Kanske Media Queries behövs i diverse sammanhang, men inte för "min" webbplats i alla fall. Eller så finns det "gömt" i temat utan att jag behöver veta något om det.
 

  • Gilla 1
Länk till inlägg
Dela på andra webbplatser
48 minuter sedan, skrev ChristerE:

Jag är admin för en webbplats med responsiv webbdesign men känner inte till något om Media Queries. Webbplatsen drivs med WordPress och ett tema som avser responsiv webbdesign. Behöver inte tänka på den saken när nya sidor skapas, och menyn ställer automatiskt om på mindre bildskärmar utan att jag behöver göra något för att det ska bli så.


Kanske Media Queries behövs i diverse sammanhang, men inte för "min" webbplats i alla fall. Eller så finns det "gömt" i temat utan att jag behöver veta något om det.
 

Sysslar också lite med webbdesign med hjälp av WordPress i grunden, och i det stora stämmer det att det mesta justeras med automatik gällande storleken på bildskärmar, men visst behövs det lite extra finputs ibland, med vissa skärmstorlekar.

Automatiken fungerar inte helt ut ibland.
 

 

4 timmar sedan, skrev Jompan:

Jag har förstått att för att mobilanpassa en hemsida krävs hjälp av Media Queries.

Kan någon förklara med text och kod vad detta innebär för en enkel hemsida?

// Agneta

Gör du egna webbsidor själv idag, eller är du bara nyfiken på hur det fungerar med att göra webbsidor?

 

Gällande Media Querias, så är det väl ett av många hjälpmedel föra att koda en hemsida med bara kod.

Men idag så är det mycket enklare att använda t.ex Word Press med ett valt tema, då slipper man knölet med att hårdkoda sin hemsida.

 

Länk till inlägg
Dela på andra webbplatser

Som säkert framgått om du kikat runt på webben så handlar det i korthet om ett sätt att se vilken typ av enhet/läsare som besökaren använder och att anpassa sin design/layout (sin css) utifrån detta. T.ex ha en större bild för datorskärmar eller ta bort "onödiga" element för utskrifter. Media Queries är en teknik som kan användas för responsiv design men inte direkt ett krav eller allt som krävs.

Länk till inlägg
Dela på andra webbplatser

Tack för svaren. Nu har jag förstått att Media Queries endast är avsett för  WordPress-sidor, och således inte gäller för mitt hemmasnickeri.

Så jag letar fortfarande efter den kod i CSS-filen som kan styra min hemsida till ett mobilanpassat läge.

// Agneta

 

Länk till inlägg
Dela på andra webbplatser

Jag tror du har förstått fel. Det är inte bara för wordpress, media queries är en CSS3 feature. Länken ovan visar hur sakerna fungerar.

Nedan hittar du markup:en till en sida jag driver på fritiden och handlar om Chuck Norris. Spara koden i en fil och öppna i browsern. Sedan ändrar du storleken/bredden på browsern med musen genom att klicka och dra från browserns högra eller vänstra sida. Se sedan vad som händer

 

<!doctype html>

<html lang="en">
<head>
    <style type="text/css">

    @media (max-width: 575px) { 
        body {
            background-color:#b2bec3;
        }

        a {
            font-size: small;
        }
     }
    
    /* Small devices (landscape phones, 576px and up) */
    @media (min-width: 576px) { 
        body {
            background-color: #55efc4;
        }

        a {
            font-size: medium;
        }
     }

    /* Medium devices (tablets, 768px and up) */
    @media (min-width: 768px) {
        body {
            background-color: #fab1a0 ;
        }

        a {
            font-size: large;
        }
    }

    /* Large devices (desktops, 992px and up) */
    @media (min-width: 992px) { 
        body {
            background-color: #a29bfe;
        }

        a {
            font-size: x-large;
        }
    }

    /* Extra large devices (large desktops, 1200px and up) */
    @media (min-width: 1200px) { 
        body {
            background-color: #fad390;
        }

        a {
            font-size: xx-large;
        }
     }

    </style>

  <meta charset="utf-8">
  <title>Chuck Norris unofficial page</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>

<body>
 <a href="https://chucknorris.com/">Roundhouse kick here</a>
</body>
</html>



 

Redigerad av Phenomen
Länk till inlägg
Dela på andra webbplatser

Tack för hjälpen Phenomen, men det funkade inte hos mig. Troligen beroende på att jag kodar sidorna i .php.

Resultatet blev bara en överdimensionerad överlappande meny.

// Agneta

Länk till inlägg
Dela på andra webbplatser
  • 3 veckor senare...

Hej Agneta!
Precis som du är inne på används media queries för att få en responsiv webbplats. En media query är en "tagg" i CSS som anger en specifik brytpunkt, inom denna query anger man vilket typ av element man vill påverka. 

Lägger du denna kodsnutt i din css fil:
@media only screen and (max-width: 600px) {
  body {
    background-color: red;
  
}
Kommer bakgrunden för din hemsida bli röd när upplösningen (skrämens bredd) är mindre än 600px. Testar du och ändringen inte går igenom kan du sätta !important bakom red, ex:

@media only screen and (max-width: 600px) {
  body {
    background-color: red!important;
  
}


En grundregel är att kolla "när designen bryts" (när och vilket element börjar se tokigt ut vid vilken brytpunkt) och lägga till media queries för detta element vid den specifika brytpunkten. Det finns inga "generella CSS filer" för media queries, alla webbplatser har olika design och alla element bryter "fel" vid olika ställen. Det finns ramverk som har "förinställda" css regler, exempelvis Bootstrap (https://getbootstrap.com/). 

Media queries är inte specifikt för WordPress utan applicerar på majoriteten av webbplatser idag. Vi kodar både "vanliga hemsidor" och WordPress-teman och i samtliga används media queries för att få en responsiv webbplats/webbshop.

Mvh. Rebecca
Trinxy Webbyrå

 

Redigerad av Cluster
Länk borttagen av Moderator
Länk till inlägg
Dela på andra webbplatser

Skapa ett konto eller logga in för att kommentera

Du måste vara medlem för att kunna kommentera

Skapa ett konto

Skapa ett nytt konto på vårt forum. Det är lätt!

Registrera ett nytt konto

Logga in

Redan medlem? Logga in här.

Logga in nu


×
×
  • Skapa nytt...