2016-10-31 11 views
-2

だから、これは私のテストサイトです:http://www.manukarki.comどのように応答性を達成できますか?

それが働いていない(私のモトG第一世代)、デスクトップのサイズ変更やmobiletest.meのようなオンラインモバイルエミュレーションのための本当のデバイスの応答性です。現在のところ、このメディアのクエリは@media only screen and (max-width: 640px)です。今私も "最大デバイス幅"を試してみましたが、少し変わっていますが、画面のサイズ変更やmobiletest.meテストのようなものはありません。私は本当にブートストラップ、財団などを使いたくないのです。私は本当に一から学びたいと思っています。

+1

CSSと一緒にSourceCodeを投稿できますか? – Learning

+1

ie8のような古いブラウザではメディアクエリがサポートされていないため、respond.jsを使用してください。また、デスクトップ、タブレット、モバイルなどのさまざまな画面幅でCSSの動作を定義するには、複数の@media節を持つ必要があります。それ以外の場合は、正しい軌道に乗っています。 – Aus

+0

ブートストラップやその他の対応フレームワークを使用してみませんか?それはあなたのためのものを簡単に取るでしょう。 – Learning

答えて

1

ページの<head>にビューポートメタタグを追加する必要があります。

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

あなたはhttp://www.manukarki.com/mobile.css上のあなたのリンクされたCSSファイルが404エラーにリダイレクト(およびその/code.jsを行います)mozilla developer network

+0

それは魅力のように働いた。ありがとうございました。 –

+0

あなたは大歓迎です。これは基本的に、CSSプロパティを尊重しながら、コンテンツをデバイスビューポートのサイズに拡大するよう強制します。 – Aaron

0

の詳細を読むことができます。これらのファイルを正しくアップロードしてもよろしいですか?

+0

CSSは実際にはmain.cssで、まだそこにあるはずのjavascriptファイルを作成しています。 –

0

Bootstrap、CSSだけで多くのことができます。またはすべての方法を行って、そのJavascriptを使用してください。

しかし、あなたはそれを使いたくないようです。さて、あなたの時間(他の誰かが苦労したときにホイールを再発明する必要はありません)。彼らがどのようにそれを行うか見るために有益かもしれません。

関連する問題