web-dev-qa-db-fra.com

html / css pour s'adapter à toutes les résolutions d'écran

Je travaille sur le site et j'essaye de le rendre réactif à 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 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;
}

Lorsque je redimensionne, le site Web de mon navigateur ne se redimensionne pas. J'ai essayé toute la matinée et je suis vraiment épuisé. Quelqu'un sait-il quelle logique aborder pour que cela s'adapte à tous les écrans, mais uniquement en utilisant CSS.

htmlcssresolution
6
user3477366

Comme vous donnez une largeur fixe à votre corps et à p.naslov-text, votre site Web ne sera pas redimensionné. Supprimez tous les formats px et remplacez-les par des valeurs en pourcentage.

Mais si vous voulez des tailles fixes et aussi réactives, vous devez utiliser des requêtes multimédia CSS 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;
   }
}
2
Cem Özer

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: Stack Over Flow

JQUERY:

Utilisez jquery pour redimensionner la fenêtre. Celui-ci est un code dynamique pour le redimensionnement des fenêtres 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, vous allez essayer pour la largeur et la hauteur de votre classe principale.

2
JEYASHRI R

Supprimez la largeur (en "px") du corps et également du texte p.naslov. Essayez de donner une largeur: 100%; pour obtenir une mise en page réactive Fiddle

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;
}
0
G.L.P

J'espère que cela t'aides..

[~ # ~] 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;
}

Essayez également d'utiliser Media Query pour la résolution de votre choix.

0
KesaVan

bonjour vous devez utiliser l'écran @media dans votre css et vous devez utiliser% à la place 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;}
}
0
Mostafa

Vous avez une largeur fixe sur votre corps

0
Johansrk