Comment modifier le CSS quand la taille de l'écran change

Donc, j'ai regardé dans le code pour mon site web, qui lui change le css et même le code html de certaines parties de mon code lorsque la taille de l'écran change. Ce que je recherche en tant que commencer, c'est quand j'ai mis mon site en écran partagé sur Windows 10, ou sur un Mac, je veux l'en-tête "un Titre" pour le déplacer vers le côté gauche de la tête de la section. J'espère que cela va m'aider à changer certains aspects de mon site, lorsque la taille de l'écran change. Mon code est ci-dessous.

HTML:

 <!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Some Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href= "Logo.png" type="img/SVG" style="width: 100%; height: 100%">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<link rel = "stylesheet" href="stylesheet.css">
</head>
<body>
<div class="Header" id="myHeader">
<a class = "headerLogo">
<a href="file:///C:/Noah's%20stuff/Home.html" ><h1 style="color:white; font-family: Verdana; font-style: italic; font-size: x-large;
text-align: center; padding-top: 20px">Some Title</h1></a>
<style>
a{text-decoration: none;}
a:hover{
text-decoration:none;
}
</style>
</a>
<div class="socialmedia">
<a class = "Facebook">
<a href="https://www.facebook.com/" target="_blank"><img src = "https://images.seeklogo.net/2016/09/facebook-icon-preview-1.png" width="50px" height="50px"></a>
</a>
<a class = "Instagram">
<a href="https://www.instagram.com/"><img src = "https://images.seeklogo.net/2016/06/Instagram-logo.png"  width="50px" height="50px"></a>
</a>
<a class = "Youtube">
<a href="https://www.youtube.com/channel/" target="_blank"><img src = "https://images.seeklogo.net/2016/06/YouTube-icon.png" width="50px" height="50px"></a>
</a>
<a class = preorder>
<button style = "background-color: white;">Pre-Order</button>
</a>
</div>
</div>
My CSS
body {
margin: 0;
}
.Header {
position: fixed;
z-index:1;
width: 100%;
height: 70px;
background-color: black;
text-align: right;
}
.headerLogo {
}
.socialmedia {
position: fixed;
right: 100px;
top: 35px;
transform: translate(0, -50%);
display: flex;
/* add this */
align-items: center;
/* add this */
}
.preorder button {
background-color: white;
border: 0;
height: 35px;
width: 110px;
margin-left: 35px;
}
.footer {
display: flex;
align-items: center;
width: 100%;
height: 90px;
background-color: black;
}
.img-fluid{
width: inherit;
height: 782px;
}
.mySlides~.mySlides {
position: absolute;
top: 0;
left: 100%;
transition: 0.7s;
}

En savoir plus sur media requêtes: w3schools.com/css/css_rwd_mediaqueries.asp
Je sais que j'ai lu à leur sujet, je ne comprenais pas ce que max-width: à utiliser pour les téléphones mobiles et pour le split d'écran sur un ordinateur
Pour le téléphone portable quelque chose comme 480px est générique (c'est ce que Bootstrap utilise pour mobile point d'arrêt), mais je ne sais pas sur les écrans partagés.
Vous êtes déjà compris Bootstrap 4. Ils ont fait tout le travail dur pour vous. Il suffit d'utiliser leur système de grille. v4-alpha.getbootstrap.com/layout/grid
Je suis un peu confus sur la façon de mettre en œuvre le code de démarrage sur mon site, je sais que j'ai besoin d'utiliser le <link rel> tag. J'ai eu un peu d'aide avec elle la dernière fois, parce que je ne savais pas où trouver les feuilles de style css.
lire "prise en main" v4-alpha.getbootstrap.com/getting-started/introduction
Oui, les requêtes de média ou de plus simple, utiliser un framework comme Bootstrap ou Foundation.

InformationsquelleAutor Noah Tanenholtz | 2017-04-06

Les requêtes de média peuvent vous aider à définir les différents styles pour différentes tailles d'écran. Aussi, je vous recommande un autre hébergement des éléments HTML, par exemple:

<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Some Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href= "Logo.png" type="img/SVG" style="width: 100%; height: 100%">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<style>
body {
margin: 0;
}
.Header {
background-color: black;
text-align: right;
}
.socialmedia {
transform: translate(0, -50%);
align-items: center;
}
.socialmedia a{
display:inline;
}
h1 {
color:white; 
font-family: Verdana; 
font-style: italic; 
font-size: x-large;
text-align: center; padding-top: 20px;
}
@media (max-width:700px){
.headerLogo h1 {
text-align:left;
}
}
@media (min-width:1000px){
.socialmedia {
margin-right:100px;
}
}
.preorder button {
background-color: white;
border: 0;
height: 35px;
width: 110px;
margin-left: 35px;
}
.footer {
display: flex;
align-items: center;
width: 100%;
height: 90px;
background-color: black;
}
.img-fluid{
width: inherit;
height: 782px;
}
.mySlides~.mySlides {
position: absolute;
top: 0;
left: 100%;
transition: 0.7s;
}
a{text-decoration: none;}
a:hover{
text-decoration:none;
}
</style>
</head>
<body>    
<div class="Header" id="myHeader">
<a class="headerLogo" href="file:///C:/Noah's%20stuff/Home.html" ><h1>Some Title</h1></a>
<div class="socialmedia">
<a class="Facebook" href="https://www.facebook.com/" target="_blank"><img src = "https://images.seeklogo.net/2016/09/facebook-icon-preview-1.png" width="50px" height="50px"></a>
<a class="Instagram" href="https://www.instagram.com/"><img src = "https://images.seeklogo.net/2016/06/Instagram-logo.png"  width="50px" height="50px"></a>
<a class="Youtube" href="https://www.youtube.com/channel/" target="_blank"><img src = "https://images.seeklogo.net/2016/06/YouTube-icon.png" width="50px" height="50px"></a>
<button style = "background-color: white;">Pre-Order</button>
</div>
</div>
</body>
</html>

Lorsque la taille de l'écran < 700 pixels de puis le texte sera aligné à gauche, et lorsque la taille de l'écran est >= 1000 puis de médias sociaux de la case ajouter une marge à droite.

InformationsquelleAutor Ricardo Enrique Ibarra Cabrera

Exemple

  @media screen and (max-width: 600px){
ul.topnav li.right,
ul.topnav li {float: none;}
.seged{position: relative;}
#lab{border-right: 0px;}
}

InformationsquelleAutor Tamas B.

Eh bien, nous pouvons le faire de deux façons:-

1) en Utilisant les media queries. veuillez vous référer ici

2) Vous pouvez également le faire en utilisant un simple code JavaScript. Voir Ci-Dessous:-

JS:

$(window).on('resize', function() {
if($(window).width() > 600) {
$('#body').addClass('limit1200');
$('#body').removeClass('limit400');
}
else {
$('#body').addClass('limit400');
$('#body').removeClass('limit1200');
}
})

CSS:

.limit400 h1 { font-size:12px; }
.limit1200 h1 { font-size:50px; }

HTML:

<div id="body" class="limit400">
<h1>Hello :Professor</h1>
<span>[ change the screen width to understant the effect ]</span>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

J'ai également créé une démo sur codepen. Voir Ce

Merci pour roulement avec moi.

InformationsquelleAutor hemant

-1

Comme mentionné dans les commentaires, vous voulez des requêtes de média:

CSS:

@media (max-width: 800px) {
h1 {
text-align: left !important;
}
}

HTML:

<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Some Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href= "Logo.png" type="img/SVG" style="width: 100%; height: 100%">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<link rel = "stylesheet" href="stylesheet.css">
</head>
<body>
<div class="Header" id="myHeader">
<a class = "headerLogo">
<a href="file:///C:/Noah's%20stuff/Home.html" ><h1 style="color:blue; font-family: Verdana; font-style: italic; font-size: x-large;
text-align: center; padding-top: 20px">Some Title</h1></a>
<style>
a{text-decoration: none;}
a:hover{
text-decoration:none;
}
</style>
</a>
<div class="socialmedia">
<a class = "Facebook">
<a href="https://www.facebook.com/" target="_blank"><img src = "https://images.seeklogo.net/2016/09/facebook-icon-preview-1.png" width="50px" height="50px"></a>
</a>
<a class = "Instagram">
<a href="https://www.instagram.com/"><img src = "https://images.seeklogo.net/2016/06/Instagram-logo.png"  width="50px" height="50px"></a>
</a>
<a class = "Youtube">
<a href="https://www.youtube.com/channel/" target="_blank"><img src = "https://images.seeklogo.net/2016/06/YouTube-icon.png" width="50px" height="50px"></a>
</a>
<a class = preorder>
<button style = "background-color: white;">Pre-Order</button>
</a>
</div>
</div>
My CSS
body {
margin: 0;
}
.Header {
position: fixed;
z-index:1;
width: 100%;
height: 70px;
background-color: black;
text-align: right;
}
.headerLogo {
}
.socialmedia {
position: fixed;
right: 100px;
top: 35px;
transform: translate(0, -50%);
display: flex;
/* add this */
align-items: center;
/* add this */
}
.preorder button {
background-color: white;
border: 0;
height: 35px;
width: 110px;
margin-left: 35px;
}
.footer {
display: flex;
align-items: center;
width: 100%;
height: 90px;
background-color: black;
}
.img-fluid{
width: inherit;
height: 782px;
}
.mySlides~.mySlides {
position: absolute;
top: 0;
left: 100%;
transition: 0.7s;
}

InformationsquelleAutor sn3ll

Vous devez vous connecter pour publier un commentaire.