web-dev-qa-db-ja.com

画面とモバイルのスタイルシート

この質問のスタックオーバーフロートピックといくつかのGoogle検索結果を確認しましたが、問題を解決できないようです。

私は、基本的に多くの属性に変更を加えたmain.cssのコピーであるモバイルデバイス（mobile.css）のスタイルシートを作成しました。 mobile.cssのみをスタイルシートとしてロードすると、iPhoneで見栄えがよく、希望どおりに表示されます。しかし、両方を入れると、両方のミックスが得られますが、main.cssの方が多くなります

なぜか？

<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

documents によると、特定のデバイス/条件で別のファイルをロードする構文は次のとおりです：

<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" />

これにより、widthの量ごとに1つのcssファイルのみがロードされます

Retinaディスプレイを備えたiPhone 4と新世代のiPod touchには、注意すべき点があります。 iPhone 4の幅は640多くの開発者がこの幅をモバイルブラウザの幅として数えないピクセル。これをメタタグの下に追加すると、ドキュメントの問題は解決します

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

このメタタグは画像の品質に影響します。その問題を修正したい場合は、これについて読む必要があります ここ 。

31
Mohsen

マークアップなしでは知るのは難しいですが、私はあなたが次のようなことをするべきだと思います：
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

モバイルスタイルシートは条件付きで読み込まれます。つまり、コンピューターはのみ _main.css_を読み込み、iPhoneは両方 _main.css_および_mobile.css_。

IPhoneにページをロードするときに最初から始めたい場合は、このCSSのチャンクを_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}
_

CSSを効果的にリセットします。

0
Blender

@スコット;次のようにmobile.cssの後にmain.cssを定義する必要がある場合があります。

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

または、次のようにmobile cssをmain.cssに定義できます。

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

編集：

これを<!DOCTYPE html>ではなく<DOCTYPE html>としてHTMLに記述します。

0
sandeep