CSS - Pourcentage ou en Pixels?

J'ai été en utilisant le CSS pour de nombreuses années maintenant, et j'ai toujours été un "pourcentage" le genre de gars, comme j'ai toujours définir la hauteur et la largeur à l'aide de pourcentages plutôt que de pixels (à l'exception, par exemple, lors de la définition des choses telles que les marges, rembourrage, etc, dans ce cas j'utilise pixels).

Je voudrais faire quelque chose comme ceci:

body{
    height: 99%;
    width: 99%;
    margin-top: 10px;
}

mais je vois souvent des exemples tels que:

body{
    height: 300px;
    width: 250px;
    margin-top: 10px;
}

Ma question est: existe-il des avantages à utiliser l'un sur l'autre globale, et si oui, quels sont-ils?

  • Il n'y a pas d'avantages à l'un des deux, c'est comme dire me donner 50% de 1 kg ou 500 grammes, dépend de votre application
InformationsquelleAutor MusTheDataGuy | 2011-09-02
  1. 22

    Mobile des pages web. %s'rock pour qui. Comme il sera (évidemment) ajuster en fonction.

    Toutefois, lorsque vous voulez une largeur fixe pour dire exemple un article de texte que vous souhaitez afficher dans un certain sens, px est le gagnant.

    Les deux ont beaucoup plus et moins l'une sur l'autre 🙂

    • J'ai un netbook. Des largeurs fixes sont dégueulasses. La plupart des sites web ont quelque part. Faire un mobile design est très bien, et un gros, mais il y a un espace entre les deux.
    • La plupart des sans hésiter @Nicholas Wilson, cependant, tout se résume à une chose, quel est le but du site. Ce qui doit sa conception, comment devrait-il être navigué. Les choses qui sont les premiers éléments à être discuté lors de la prise de site web.
    InformationsquelleAutor Graeme Leighfield
  2. 9

    - Je utiliser des pixels sur mon site, et j'ai garder un maximum de largeur de 1000px. Mon site s'affiche correctement sur mon 11" netbook n'a cependant pas très bien avec les appareils mobiles, mais qu'est ce que c'est pour:

    <link rel="stylesheet" href="/styles/mobile.css" media="handheld" />

    Je trouve le développement de sites web en pourcentages très consommateur de temps, tenir compte de tous les re-dimensionnement des événements, tels que:

    overflow:scroll;

    Pixels et les pourcentages les deux ont leurs avantages, mais je dirais que les pixels serait un meilleur choix en raison de la précision, la fiabilité, et est plus facile à développer. Aussi une autre chose à considérer sont les pixels et les pourcentages pour les polices. Voici ma règle d'or:

    • Si vous développez un site web, avec des pourcentages, utiliser des pourcentages pour la police, pour des raisons de garder les proportions correctes.
    • Si vous développez un site web avec des pixels, l'utilisation de pixels pour la police.

    Si vous avez des gens qui peuvent avoir besoin d'agrandir la police, il est toujours préférable d'utiliser des pourcentages pour la police.

    • Je pense que % pour les DIVs est adapté et Px pour les polices, plus de contrôle. 🙂
    InformationsquelleAutor Glenn Dayton
  3. 3

    Utiliser À La Fois =D

    Avec Vous pouvez toujours combiner à l'aide de deux si vous êtes confus à ce sujet)

    calc() est originaire CSS façon de faire simple droit de mathématiques en CSS comme un remplacement pour toute valeur de la longueur (ou à peu près n'importe quel numéro de valeur).

    Il a quatre mathématiques simples opérateurs:
    add (+),
    subtract (-),
    multiply (*), et
    divide (/). 

    .my-class {
    widht: calc(100% - 20px);
    height: calc(50% + 10px);
}

    Prise en charge du navigateur est étonnamment bonne. Puis-je utiliser...

    Utile de lecture: CSS-Tricks

    InformationsquelleAutor Andrii Verbytskyi
  4. 2

    Si vous voulez que des objets, de la même taille n'importe quoi, alors pixels(pas affectée par le zoom ou la taille de l'écran).
    Pouvez aussi rechercher dans l'aide de EM est ainsi. Je pense que les EM sont un peu dans le milieu, où elles sont affectées par le zoom, mais pas par la taille de l'écran.

    InformationsquelleAutor Yogurt The Wise
  5. 1

    Raisons à profusion! Pourcentage largeurs sont très utiles quand il s'agit de dimensionnement des éléments par rapport à quelque chose d'autre (la taille du navigateur par exemple). Vous pouvez avoir votre page modifier dynamiquement pour s'adapter à des circonstances différentes. Pixels sont utiles lorsque vous avez besoin de précision tailles qui ne change pas sur vous. Certaines personnes (par exemple moi) utilisent à la fois les pixels et les pourcentages pour positionner les éléments comme vous le souhaitez. D'autres (par exemple d'autres personnes que moi :P) vous diront que c'est stupide.

    InformationsquelleAutor Joseph Marikle
  6. 1

    % sont la voie à suivre dans un monde moderne tout comme les graphiques Vectoriels. Comme les écrans d'obtenir de plus grandes ou plus petites, vous pouvez mettre à l'échelle correctement quelle que soit la résolution.

    InformationsquelleAutor Chris
  7. 1

    en intérieur haut de style de la propriété est en % de sorte qu'il sera considéré comme 200px*0.3=60px

    CSS:

    #outer{
  border-style: dotted;
  position: relative; 
  height: 200px;
}
#inner{
 border-style: double;
  position: absolute;
  top: 30%; <<<<<<<<<<<<<<
}

    HTML:

    <div id="outer">
outer
<div id="inner">
inner
</div>
</div>

    Ici en haut est 30px . ainsi, il sera comme il est.

    CSS:

    #outer{
  border-style: dotted;
  position: relative; 
  height: 200px;
}
#inner{
 border-style: double;
  position: absolute;
  top: 30px; <<<<<<<<<<<<
}

    HTML:

    <div id="outer">
outer
<div id="inner">
inner
</div>
</div>

    InformationsquelleAutor Mahi
  8. 0

    Il n'est évidemment pas de bonne ou de mauvaise. Son plutôt une question de fluidité.

    Il est plus facile de la position des objets les uns par rapport aux autres avec des pixels et de contrôle de hauteur et de largeur.

    De l'échelle des objets est en revanche plus facile avec des pourcentages. 50% de la largeur de la fenêtre sera toujours la moitié de la fenêtre, peu importe la taille de l'écran.

    • J'ai signalé cette question elle-même comme hors sujet car je pense qu'elle est principalement d'opinion, de sorte que les réponses ont tendance à être fondée sur une opinion au lieu de la dure réalité. Votre réponse est fondamentalement quelqu'un d'autre s'en occupe comme X, donc X doit être mieux", et ce n'est pas vraiment beaucoup d'une réponse; c'est plus un commentaire.
    InformationsquelleAutor akwasiijunior
  9. -1

    J'aime les pourcentages trop, mais dans certains cas, il ne fait pas ce que j'attends. Si par exemple j'ai deux boutons de partage la même ligne avec max-width: 50%, et la fenêtre actuelle n'est pas un nombre pair, l'un d'entre eux sera toujours nettement légèrement plus grand.

    InformationsquelleAutor Akin Hwan