J'ai essayé d'utiliser @Media Queries, mais toujours, ma version de bureau ressemble à la vue mobile. Y a-t-il un moyen de le réparer via Bootstrap?
// pour la vue mobile // pour la vue de bureau Je veux que mes versions de bureau et mes versions mobiles soient différentes!
4 Réponses :
La vue de bureau n'est pas nécessairement de 1000px et plus. J'essaierais de changer votre requête médiatique à la largeur de la minute 320px et de travailler à partir de là. (320px est la largeur des écrans iPhone 5 et SE lorsque vous développez avec Google Chrome Developer Tools)
@media only screen and (min-width: 320px) {
*{
margin:0;
}
.main-head{
position:relative ;
}
.home-logo-wrapper{
height: 20px;
width: 45px;
border-width: 1px;
position:absolute;
}
.home-logo-img{
width:100px;
padding:20px;
position: absolute;
top: -80px;
}
bootstrap est une bonne option pour concevoir un site Web réactif. Dans ce système de grille est important. Vous essayez de comprendre comment utiliser le système de grille pour rendre le site Web réactif. Le lien suivant vous aidera à étudier bootstrap.
https://www.w3schools.com /bootstrap/bootstrap_grid_system.asp p>
En outre, il y a parfois un besoin de requêtes de média, soit que nous utilisons Bootstrap. Parfois, si nous utilisons la police, le rembourrage, la marge, etc. du même style sur toutes les périphériques affichent le bureau, l'onglet, le mobile, il n'a pas l'air bien. Donc, à l'aide de requêtes multimédias, vous pouvez coder le style différent de différents périphériques qui ont l'air bien sur tous les types de périphériques. P>
Suivre les requêtes de média vous aidera à vous aider à votre site Web. P>
<style>
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
/* Your CSS Code for this device size */
}
/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
/* Your CSS Code for this device size */
}
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
/* Your CSS Code for this device size */
}
/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
/* Your CSS Code for this device size */
}
/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
/* Your CSS Code for this device size */
}
/* According to Mobile Orientation */
@media only screen and (orientation: landscape) {
/* Your CSS Code for this device orientation */
}
//you can write all mobile related css to media less than 767 so use max-width:767px in media for mobile view
// write desktop related css here
// for mobile view
@media only screen and (max-width: 767px) {
.main-head{
position:relative ;
}
.home-logo-wrapper{
height: 20px;
width: 45px;
border-width: 1px;
position:absolute;
}
.home-logo-img{
width:100px;
padding:20px;
position: absolute;
top: -80px;
}
}
Please Refer below link for more detail:
https://www.w3schools.com/css/css_rwd_mediaqueries.asp
Vous avez la bonne idée à l'aide des questions Vous pouvez également utiliser une largeur maximale pour créer une plage plus solide @media , mais le bureau n'est pas de 1000px, il n'y a pas de moyen réel pour vous de connaître la taille de bureau d'autres personnes, vous devez utiliser des requêtes. qui couvrent une plage. J'utilise celles-ci par exemple:
Peut-être que votre point de vue mobile CSS doit ajouter
@MeMeia Seulement écran et (max-largeur: 999px) ?Avez-vous utilisé Bootstrap? S'il vous plaît partager votre HTML aussi
Rappelez-vous que la largeur minimale signifie d'une largeur de fenêtre d'infini jusqu'à 1000px; pas de 0 (mobile) jusqu'à 1000px. Utilisez max-largeur au lieu de cibler le mobile spécifique.