Groups > dk.edb.internet.webdesign > #10182

Re: Responsive design?

From	Morten Bonderup <morten2good@gmail.com>
Newsgroups	dk.edb.internet.webdesign
Subject	Re: Responsive design?
Date	2019-06-02 21:35 +0200
Organization	Aioe.org NNTP Server
Message-ID	<qd18eo$p0k$1@gioia.aioe.org> (permalink)
References	<qd08d2$gmr$1@dont-email.me>

Show all headers | View raw

Den 02/06/2019 kl. 12.28 skrev Kurt Hansen:
> Jeg har aldrig forsøgt mig med responsive webdesign og forventer heller 
> ikke at få det hele forklaret her, men et par spørgsmål trænger sig på:
> 
> Jeg var af den opfattelse at sidens elementer wrappes neden under 
> hinanden, f.eks. div'er og tabelller.
> 
> Hvis jeg tester http://danacord.com/CSS-mesteren/ på 
> http://responsivetesttool.com/, så kan jeg se at det ikke er tilfældet. 
> Er det min kode der er forkert, eller har jeg vare misforstået noget?
> 
> Og hvad med "max-width"? Hvis jeg f.eks. skriver 50% for at få det til 
> at se ordentligt ud på en stor skærm, så ser det ikke særligt 
> brugervenligt ud på en mobil.


max-width vs width på et billede: max-width udfolder billedet til dets 
maksimale dimensioner eller derunder; width udfolder billedet efter den 
ledige plads i billedets forælder-container også selvom det betyder at 
billedet skal strækkes ud.

Der er en html tag - picture - som giver dig mulighed for at skifte 
billedet ud i takt med at skærmbredden ændrer sig:
https://www.w3schools.com/tags/tag_picture.asp

Klassisk responsiv webdesign involverer bl.a.

* <meta name="viewport" ... tagget fortæller mobilbrowseren, at den ikke 
skal zoome ud, fordi udvikleren har designet det til mobile enheder 1:1
* @media queries ... hvor du fortæller browseren, hvornår der skal ske 
ændringer i indhold/layout. Det kaldes breakpoints.
* relative størrelsesangivelser (% ol.)

Jeg har lavet eksemplet herunder til dig - måske du kan bruge det. Jeg 
har indsat et enkelt breakpoint (skærmbredde >= 800px), hvor boks1 og 2 
får besked på at ligge sig side om side.

Det regnes for at være god praksis at designe og implementere efter 
"mobile first" princippet - dvs. at der designes og bestemmes indhold 
efter mobile enheder først og "op efter", og at der også kodes efter 
dette princip. Derfor har jeg også lavet et breakpoint der bruger 
"min-width". Det har den konsekvens, at CSS som står uden for 
breakpointet er forbeholdt den mindste skærm.

---------------------------------------------------------------------



<!DOCTYPE html>
<html>

<head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">

     <title>Mortens min-width eksempel</title>


     <style>
         /* Centrerer indholdet */
         .wrapper {
             width: 700px;
             margin: 0 auto;
             border: 1px solid blue;
         }

         .boks1,
         .boks2 {
             margin-top: 15px;
             width: 340px;
             border: 1px solid red;
             margin-bottom: 15px;
         }

         .boks2 {
             float: none;
             margin-left: 0;
         }

         .boks3 {
             width: 100%;
             clear: both;
             border: 1px solid cyan;
         }



         @media only screen and (min-width: 800px) {

             .boks1,
             .boks2 {
                 float: left;
             }

             .boks2 {
                 margin-left: 15px;
             }

         }
     </style>

</head>

<body>
     <div class="wrapper">
         <div class="boks1">
             <h3>Boks 1</h3>
             <ul>
                 <li>Jens</li>
                 <li>Lise</li>
                 <li>Hans</li>
                 <li>Bente</li>
             </ul>
         </div>

         <div class="boks2">
             <h3>Boks 2</h3>
             <ul>
                 <li>Jens</li>
                 <li>Lise</li>
                 <li>Hans</li>
                 <li>Bente</li>
             </ul>
         </div>

         <div class="boks3">
             <h3>Boks 3</h3>
             <ul>
                 <li>Jens han sad på en knold og sang</li>
                 <li>Lise hun sad på en knold og sang</li>
                 <li>Hans han sad på en knold og sang</li>
                 <li>Bente hun sad på en knold og sang</li>
             </ul>
         </div>
     </div>
</body>
</html>


-- 
Med venlig hilsen
Morten Bonderup
http://www.mortenbonderup.eu

Back to dk.edb.internet.webdesign | Previous | Next — Previous in thread | Next in thread | Find similar

Thread

Responsive design? Kurt Hansen <kurt@invalid.dk> - 2019-06-02 12:28 +0200
  Re: Responsive design? Kim Ludvigsen <kim@kimsside.dk> - 2019-06-02 18:26 +0200
  Re: Responsive design? "Dennis Munding" <nospa@mplease.dk> - 2019-06-02 16:49 +0000
  Re: Responsive design? Morten Bonderup <morten2good@gmail.com> - 2019-06-02 21:35 +0200
    Re: Responsive design? Kurt Hansen <kurt@invalid.dk> - 2019-06-04 08:32 +0200
      Re: Responsive design? Morten Bonderup <morten2good@gmail.com> - 2019-06-04 20:33 +0200
        Re: Responsive design? "Dennis Munding" <nospa@mplease.dk> - 2019-06-05 03:49 +0000
          Re: Responsive design? Morten Bonderup <morten2good@gmail.com> - 2019-06-05 11:47 +0200
            Re: Responsive design? Kurt Hansen <kurt@invalid.dk> - 2019-06-05 12:36 +0200

csiph-web