La requête média n'affecte que les éléments/classes dans Index.html, pas d'autres routes

J'essaie donc de rendre mon site Web compatible avec les mobiles, comme je l'ai, comme je le souhaite sur un bureau. Cependant, mes requêtes médias ne fonctionneront pas pour les classes dans une autre vue que l'index.html et je ne peux pas comprendre pourquoi.La requête média n'affecte que les éléments/classes dans Index.html, pas d'autres routes

Index.html:

html ng-app = 'skypeClone'

<head> 
    <meta charset="utf-8"> 
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"/> Have tried media queries with and without this--> 
    <link rel="stylesheet" type="text/css" href="styles.css"> 
    <title>Skype Clone</title> 
    </head> 
    <body ng-controller='mainCtrl'> 

<ui-view class="view"></ui-view> 

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.18/angular-ui-router.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.js"></script> 
<script src="//cdn.temasys.com.sg/skylink/skylinkjs/0.6.x/skylink.complete.min.js"></script> 
<script src="js/app.js"></script> 
<script src="js/mainCtrl.js"></script> 
<script src="js/helpCtrl.js"></script> 
<script src="js/loginCtrl.js"></script> 
<script src="js/loginSvc.js"></script> 
<script src="js/createUserCtrl.js"></script> 
<script src="js/createUserSvc.js"></script> 
<script src="js/service.js"></script> 
<script src="js/userHomeCtrl.js"></script> 
</body 
</html>

` Si le code commenté ne montre pas, je l'ai essayé requêtes des médias avec et sans méta name = "viewport" content = "largeur = largeur de périphérique, échelle initiale = 1.0"

Autre route:

<div id="background-setter-homepage"> 
    <div id="header-wrap"> 
    <div id="header"> 
     <button class="button" id="help" ui-sref='help'>Help</button> 
     <button class="button" id="about" ui-sref='about'>About</button> 
     <button class="button" id="login" ui-sref='login'>Login</button> 
    </div> 
    </div> 
    <br><br> 
    <div class="middleOfPage" id="container"> 
     <div id="text-and-button"> 
     <h2 id="phrase">Skyclone keeps the world talking, for free</h2> <br> 
     <button class="button" id="getStarted" ui-sref='createUser'>Create An Account</button> 
     <div> 
    </div> 

</div>

Tout ce que je veux tester juste pour le faire fonctionner est d'avoir la classe « phrase » du rouge tourner élément h2 lorsque l'écran arrive à un certain maxi- largeur.

CSS:

@media (max-width: 375px) { 
    #phrase{ 
    color: lightgreen; 
    } 
}

` J'ai aussi essayé

@media only screen and (max-width: 800px) { 
    #phrase{ 
     color: lightgreen; 
    } 
}

` Le code ci-dessus ne fonctionne pas, mais il sera travailler si je sélectionne la classe sur ui-view dans le index.html et définir la visibilité à aucun à la même largeur. Donc ça marche plutôt ... mais pas vraiment.

Avez-vous déjà rencontré ce problème? Je suis actuellement à perte. Toute aide est SUPER APPRECIEE !! Merci à l'avance (:

Source

2017-01-11 atrev

Si la mise en visibilité sans pareil dans la même requête médiatique fonctionne, peut-être tout ce que vous avez besoin est de changer color: lightgreen;-color: lightgreen !important;

Avez-vous essayé encore

Source

2017-01-11 02:52:55

je n'avais pas essayé? ça encore, ça a marché! Merci beaucoup! – atrev

Je suis content que ça ait aidé :) si c'est ce que tu cherchais s'il te plaît marque ma réponse comme acceptée –

La requête média n'affecte que les éléments/classes dans Index.html, pas d'autres routes

Répondre

Questions connexes