0

基本的に、複数のデバイス（デスクトップ、iphone、ipad、およびブラウザーを搭載したその他のスマートフォン）用のWebページを作成したいと思います。私はcss3を学び始めたばかりで、css3メディアクエリの学習は非常に混乱しています。

私はいくつかのチュートリアルを読みました、そして以下のコードは私が思いついたものです。私がこれを正しく行っているかどうか、または行う必要のある修正があるかどうかを誰かに知らせてもらえますか？

<!DOCTYPE html>
<html lang="en-US">
  <head>

    <!-- META -->
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="description" content="" />
    <meta name="keywords" content="" />
    <meta name="robots" content="noodp" />
    <title>Home</title>

    <!-- CSS RESET -->
    <link rel="stylesheet" type="text/css" href="reset.css" media="all" />

    <!-- TARGET SMARTPHONES -->
    <link rel="stylesheet" type="text/css" href="" media="only screen and (min-device-width: 320px) and (max-device-width: 480px)" />
    <link rel="stylesheet" type="text/css" href="" media="only screen and (min-width: 321px)" />
    <link rel="stylesheet" type="text/css" href="" media="only screen and (max-width: 320px)" />

    <!-- IPADS -->
    <link rel="stylesheet" type="text/css" href="" media="only screen and (min-device-width: 768px) and (max-device-width: 1024px)" />
    <link rel="stylesheet" type="text/css" href="" media="only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape)" />
    <link rel="stylesheet" type="text/css" href="" media="only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait)" />

    <!-- DESKTOP & LAPTOPS -->
    <link rel="stylesheet" type="text/css" href="" media="only screen and (min-width: 1224px)" />

    <!-- LARGE SCREEN -->
    <link rel="stylesheet" type="text/css" href="" media="only screen and (min-width: 1824px)" />

    <link rel="stylesheet" type="text/css" href="" media="only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5)" />

  </head>
<body>



</body>
</html>
4

2 に答える 2

3

次の行を追加して、ブラウザがデバイスの画面のコンテンツにどのように収まるかを通知する必要があります。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

html5rocksからのこの記事は確かにあなたを助けるでしょう。

于 2012-08-10T05:19:30.020 に答える
0

非常に多くのスタイルシートリンクを持つことは良い習慣ではありません。小さなプロジェクトのWebサイトの場合、必要なのは最大2つですが、実際には1つだけである必要があります。ページの幅に合わせて1つのcssスタイルを設計します。ページが小さくなるにつれて、いくつかのブロック要素を非表示にします。電話の幅を考慮できるほど小さくなったら、モバイルスタイルシートを使用します。グーグルレスポンシブデザインとあなたは良い例を得るでしょう。マウスを持って画面の幅を変更するだけでページがどのように反応するかを確認し、開発者ツールを使用してどの要素が非表示になるかどうかを確認してから、自分で複製してみてください。あなたは学ぶのに良い時間を過ごしました、私が言わなければならないのは、ウェブ開発はそこにあるすべてのツールで日ごとに簡単になっているということです。

于 2012-08-10T05:25:57.317 に答える