web-dev-qa-db-fra.com

Feuilles de style d'écran et mobiles

J'ai parcouru les rubriques de débordement de pile de cette question, ainsi que certains résultats de recherche sur 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 fichier principal.css avec des modifications apportées à de nombreux attributs. Lorsque je ne charge que mobile.css en tant que feuille de style, cela a fière allure sur mon iPhone, exactement comme je le veux. Cependant, quand je mets 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>
cssmobilescreenstylesheet
19
xIlluzionx

Selon documents , la syntaxe de chargement d'un autre fichier dans un périphérique/une 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 fichier css pour chaque montant de width 

Notez bien que pour l'iPhone 4 et l'iPod touch de nouvelle génération dotés d'un écran Retina. La largeur de l'iPhone 4 correspond à 640 pixels que de nombreux développeurs ne la considèrent pas comme une largeur de navigateur mobile. Si vous ajoutez cette balise méta ci-dessous dans votre document, le problème sera résolu.

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

Cette balise méta aura un impact sur la qualité de vos images. Si vous voulez résoudre ce problème, vous devez lire ceci ici .

31
Mohsen

Il est difficile de savoir sans balises, 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
James Khoury

Votre feuille de style mobile est chargée de façon conditionnelle, ce qui signifie que l'ordinateur chargera seulement le main.css, tandis que l'iPhone chargera 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 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
Blender

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

<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 votre main.css comme ceci:

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

MODIFIER:

écrivez ce <!DOCTYPE html> au lieu de <DOCTYPE html> dans votre code HTML.

0
sandeep