html/css pour l'adapter à tous les résolution de l'écran

Je suis en train de travailler sur le site et je suis en train de le rendre réceptif à toutes les résolutions, mais sans succès..
Voici HTML:

<body>
    <div class = "container">
        <div class = "header">
        <h1 class = " naslov "> Lorem ipsum nasov je? </h1>
        <p class = "naslov-text">
    "Lorem ipsum dolor sit amet, consectetur adipisicing elit." 
        </p>
        </div>
    </div>
 </body>

Et voici le css:

body
{
    width:1920px;
    background-color: #f8e0b3;
    height:1080px;
}
div.container
{
width:100%;
height:100%;
}
div.header
{
background:url(img/header.jpg);
width:100%;
height:46%;
    margin-top:;
    margin-left:;
    border-bottom: 2px solid black;
}
h1.naslov
{
    font-size:60px;
    color:white;
    margin:0 auto;
    margin-left:28%;
    font-family: Aramis;
}
p.naslov-text
{
font-size:40px;
color:#634ea9;
margin:0 auto;
width:1000px;
margin-top:0%;
margin-left:36%;
font-family: Aramis;
}

Quand je redimensionner mon navigateur site web n'est pas redimensionnée. J'ai essayé toute la matinée et je suis vraiment à l'épuisement professionnel. Faire que quelqu'un sait ce que la logique de l'approche pour faire cet ajustement tous les écrans , mais seulement à l'aide de css.

Veuillez fournir un violon. Et dans le h1-élément, la classe a certains espaces. Je voudrais les supprimer
Vous définissez une largeur et une hauteur de corps en pixels. C'est étrange à la fois en général et pour quelque chose qui devrait être sensible.
jsfiddle.net/Ta9ML
Mais quand j'ai mis corps 100% 100%, alors il convient à mon écran à 100%. Et mon écran est 1680 x 1050. Je veux le rendre adapté à 1920 x 1080 et les plus petits.
J'ai réussi à fixer la largeur et qui fonctionne correctement. Mais maintenant, la hauteur est le problème. Hauteur de 100% de la hauteur de l'écran, mais quand je passe la hauteur de défilement et de montrer à la hauteur de 100% de problèmes. Faire quelqu'un sait comment résoudre hauteur de travailler avec le redimensionnement?

OriginalL'auteur user3477366 | 2014-04-07

  1. 2

    Que vous donner une largeur fixe à votre corps et p.naslov-texte, votre site ne sera pas redimensionner. Supprimer tous les px de dimensionnement et de les remplacer par des valeurs en pourcentage.

    Mais si vous voulez de dimensions fixes et aussi sensible, vous devez utiliser les css media queries comme ça:

    body
{
    width:1920px;
    background-color: #f8e0b3;
    height:1080px;
}

@media screen and (min-width: 500px) {
   body {
      width:420px;
   }
}

@media screen and (min-width: 800px) {
   body {
      width:720px;
   }
}

    OriginalL'auteur Cem Özer

  2. 2

    CSS:

    #gallery-1 img {
   width:375px;
}
@media screen and (min-width: 1366px) {
#gallery-1 img {width:375px;}
}
@media screen and (min-width: 1440px) {
#gallery-1 img {width:428px;}
}
@media screen and (min-width: 1600px) {
#gallery-1 img {width:434px;}
}
@media screen and (min-width: 1920px) {
#gallery-1 img {width:540px;}
}

    Référence: Pile De Flux

    JQUERY:

    Utiliser jquery pour redimensionner la fenêtre. Celui-ci est dynamique code de redimensionnement de la fenêtre pour tous les navigateurs.

    Example code here using jquery:

    $(document).ready(function(){
    $(window).resize();
});
$(window).resize(function{
    //your code
    var windowWidth=$(window).width();
    var mainContainerWidth=windowWidth-100; //For example
    $("#yourMainContainer").css({"width":mainContainerWidth+"px"});
});

    comme ça, on va essayer pour votre classe principale de largeur et de hauteur.

    OriginalL'auteur JEYASHRI R

  3. 0

    Vous ont une largeur fixe sur votre corps

    OriginalL'auteur Johansrk

  4. 0

    Supprimer largeur (en "px") de corps et aussi de p.naslov-texte. Essayez de donner un width:100%; pour obtenir responsive layout Violon

    CSS:

    body {
    background-color: #f8e0b3;
    height:1080px;
    width:100%;
}

p.naslov-text {
    font-size:40px;
    color:#634ea9;
    margin:0 auto;
    margin-top:0%;
    margin-left:36%;
    font-family: Aramis;
}

    OriginalL'auteur G.L.P

  5. 0

    Espère que cela aide..

    VIOLON

    CSS

    body
{
    width:100%;
    background-color: #f8e0b3;
    height:100%;
}
div.container
{
width:100%;
height:100%;
}
div.header
{
background:url(img/header.jpg);
width:100%;
height:100%;
    margin: 2% 2% 2% 2%;
    border-bottom: 2px solid black;
}
h1.naslov
{
    font-size:60px;
    color:white;
    margin:0 auto;
    float:none;   
    font-family: Aramis;
}
p.naslov-text
{
font-size:40px;
color:#634ea9;
margin:0 auto;
margin-top:0%;
float:left;
font-family: Aramis;
}

    Également essayer d'utiliser une media Query pour quelle que soit la résolution que vous voulez..

    OriginalL'auteur KesaVan

  6. 0

    bonjour vous devez utiliser @media screen dans votre css et vous devez utiliser % au lieu de px.

    @media screen and (min-width: 1366px) {
#gallery-1 img {width:375px;}
}
@media screen and (min-width: 1440px) {
#gallery-1 img {width:428px;}
}
@media screen and (min-width: 1600px) {
#gallery-1 img {width:434px;}
}
@media screen and (min-width: 1920px) {
#gallery-1 img {width:540px;}
}

    OriginalL'auteur Mostafa