Question Écran et feuilles de style mobiles


J'ai parcouru les sujets de débordement de pile sur cette question, ainsi que certains résultats de recherche Google mais je n'arrive pas à résoudre mon problème.

J'ai créé une feuille de style pour les appareils mobiles (mobile.css) qui est essentiellement une copie de mon main.css avec des modifications apportées à de nombreux attributs. Lorsque je charge uniquement mobile.css comme feuille de style, cela a fière allure sur mon iPhone, comme je le souhaite. Cependant, quand je les mets tous les deux, je reçois un mélange des deux, mais plus de main.css

Une idée pourquoi?

<head>
<link rel="stylesheet" href="styles/main.css" type="text/css" media="screen" />
<link rel='stylesheet' media='screen and (max-device-width: 480px)' href='styles/mobile.css' type='text/css' />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>

19
2017-09-20 03:39


origine


Réponses:


Selon documents, la syntaxe de chargement d'un autre fichier dans un périphérique / condition spécifique est la suivante:

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" media="only screen and (max-width: 400px)" href="mobile.css" />
<link rel="stylesheet" media="only screen and (min-width: 401px)" href="desktop.css" />

Cela ne chargera qu'un seul fichier CSS pour chaque quantité de width 

Pour l'iPhone 4 et l'iPod touch nouvelle génération avec écran Retina, vous devez noter quelque chose. iPhone 4 largeur est 640 pixels que de nombreux développeurs ne considèrent pas cette largeur comme une largeur de navigateur mobile. Si vous ajoutez cette balise META ci-dessous dans votre document, le problème sera résolu

<meta name="viewport" content="width=320">

Cette balise meta impact sur la qualité de vos images. Si vous voulez résoudre ce problème, vous devez lire à ce sujet ici.


31
2017-09-20 04:00



C'est difficile à savoir sans balisage mais je suppose que vous devriez faire quelque chose comme:
http://www.stuffandnonsense.co.uk/blog/about/hardboiled_css3_media_queries

<link rel="stylesheet" href="base.css" /> // has all the common classes
<link rel="stylesheet" href="mobile.css" media="screen and (max-device-width: 320px)" />
<link rel="stylesheet" href="largescreen.css" media="screen and (min-device-width: 321px)" />

3
2017-09-20 03:59



Votre feuille de style mobile est chargée de manière conditionnelle, ce qui signifie que l'ordinateur se chargera seulement la main.css, tandis que l'iPhone se chargera tous les deux  main.css et mobile.css.

Si vous voulez recommencer à zéro lorsque vous chargez la page sur l’iPhone, ajoutez simplement ce morceau de CSS en haut de votre page. mobile.css:

/*
YUI 3.4.0 (build 3928)
Copyright 2011 Yahoo! Inc. All rights reserved.
Licensed under the BSD License.
http://yuilibrary.com/license/
*/
html{color:#000;background:#FFF}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}li{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}q:before,q:after{content:''}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:text-top}sub{vertical-align:text-bottom}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit}input,textarea,select{*font-size:100%}legend{color:#000}

Il réinitialise efficacement le CSS.


0
2017-09-20 04:18



@ scott; peut-être vous devez définir votre mobile.css après main.css comme ça:

<link rel="stylesheet" href="main.css" media="screen" /> 
<link rel="stylesheet" href="mobile.css" media="screen and (max-device-width: 480px)" />

ou vous pouvez définir votre mobile css dans ton main.css comme ça:

@media screen and (max-device-width: 480px){
  body {
    background: #ccc;
  }
}

MODIFIER:

écrire cela <!DOCTYPE html> au lieu de <DOCTYPE html> dans votre HTML.


0
2017-09-20 04:01