responsive design de site web avec les css de positionnement absolu

Comment pourrais-je faire ce css dans un site web réactif?
J'ai pensé que je dois utiliser.

   @media (min-width: 700px) and (max-width: 1150px) {

    #div{position:absolute;left:149px;top:61px;}

    #div2{position:absolute;left:249px;top:81px;}
   #div2{position:absolute;left:249px;top:81px;}
   #div3{position:absolute;left:279px;top:181px;}
   #div4{position:absolute;left:449px;top:121px;}
    }

Mais il y a beaucoup de divs tout moyen rapide de faire cela?
D'édition comme 45 de ces divs va prendre une éternité.
Im vraiment nouveau à cela, toute aide sera appréciée.

Vous ne devriez pas être absolument positionnement que de nombreux DIVs de toute façon. CSS est conçu pour vous permettre de flotter/position des éléments naturellement, puis en utilisant les media queries, ajuster leur taille/float/position ou les cacher entièrement.

OriginalL'auteur bob12345 | 2014-02-01

  1. 8

    Afin de répondre, vous ne devez pas utiliser px-valeurs. Toujours utiliser %-valeurs à la place.

    Vous pouvez utiliser des outils comme celui-ci http://rqrwd.com/ pour calculer px en %valeurs.

    Néanmoins, je ne comprends pas pourquoi vous avez besoin autant de positionnement absolu. En responsive-desgin, le conteneur doit "flotter", - le positionnement Absolu (même avec des %des valeurs) rend cela impossible.

    but there are alot of divs any fast way to do this?

    Vous n'avez pas à écrire la conception pour chaque div. En outre, je pense que votre syntaxe #div n'est pas l'idéal - div2 et div3 ont exactement la même mise en page - utiliser une classe à la place!

    Pour appliquer les feuilles de style css styles pour tous les divs:

    div {
   width: 40%
}

    À appliquer une syntaxe pour un seul conteneur:

    HTML: <div id='unique'>content</div>

    #unique {
   width: 40%
}

    À appliquer une syntaxe pour plusieurs récipients (mais pas tous):

    HTML: <div class='flat'>content</div><div class='flat'>content</div>

    .flat {
   width: 40%
}

    ou

    #div2, #div3, .flat {
   width: 40%
}

    Vous devriez probablement prendre un coup d'oeil à ce court-css-introduction: http://www.cssbasics.com/introduction-to-css/

    Si vous avez conçu votre css correct, et toujours utilisé %-valeurs, vous éviter de définir des dizaines de media-queries. Dans les bonnes conceptions qu'ils sont nécessaires, certes, mais une mise de base, ce qui semble bon sur presque tous les appareils est également possible sans eux.
    +1 pour le "je ne comprends pas pourquoi vous avez besoin autant de positionnement absolu, en responsive design." Responsive design commence avec flexible grilles, les images flexibles et les demandes des médias.
    La bonne réponse. Du côté de la pensée: rqrwd.com Donc il y a un site web entièrement dédié à un simple calcul de pourcentage? 🙂

    OriginalL'auteur maja