ウェブサイトは機能し、デスクトップ上では完璧に見えます。私がそれをモバイルにロードすると、完全にオフに見えますが、CSSの一部だけが読み込まれ、より奇妙になります。時にはうまく機能しないことがあります。レスポンシブコードが動作するように、ヘッドセクションのすべてのタグをチェックし、そのすべてが正しいことを確認しました。何が間違っているのか分かりません。ここには、ウェブサイトへのリンクがありますhttp://flits.live/ありがとう！モバイル上の一部のCSSロードのみがデスクトップ上で完璧に動作します
Mediaクエリ固有のCSSのインスタンスが多数あります。
ここ幅要素はウィンドウが768px- 991px範囲内にあるときはその後、240ピクセルの幅がphone-screenクラスに適用されるだけことを指定
@media (max-width: 991px) and (min-width: 768px)
.phone_screen {
width: 240px;
-webkit-transform: translateY(80px);
transform: translateY(80px);
}
、のは、例えば、あなたのクラス.phone-screenを見てみましょう。
技術的にロードされずに出力に実装される唯一のCSSは、偽のメディアクエリーの中にあります。ウィンドウの幅が768px（ブートストラップの標準 "xs"ブレークポイント）未満または991px（ブートストラップの標準 "md"ブレークポイント）未満の場合、このコードは「ロードされません」。
（ブートストラップのブレークポイントに関する詳細：http://getbootstrap.com/css/#grid-options）
構造が貧弱で、実際にブートストラップを実装することを強くお勧めします。http://getbootstrap.com/で見つけたことは、どのように応答性のために構造化が必要かを理解するのに役立ちます。あなたはdivを互いに隣り合わせに投げつけることはできず、小さなウィンドウでは物事が消え始めるとは限りません（前述のようにメディアクエリのため実際には画面外になる）。
携帯電話の最大幅は767ではないので768です。この点を考慮してください。 ipad用のメディアクエリをモバイル用ではありません。 このように書かれています。
@media (max-width: 767px) and (min-width: 320px)
.phone_screen {
width: 240px;
-webkit-transform: translateY(80px);
transform: translateY(80px);
}
私はブートストラップを実装します。私はあなたのためにHTMLをきれいにしました。あなた自身があなたのheadタグに次のコードを追加し、コードをクリーンアップしたら
https://jsfiddle.net/w8crtf2p/
。必要に応じて、オプションのテーマを削除することができます。
次に、bootstrapを見て、あなたのウェブサイトに必要なものを見てください。
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>