共有私のメディアのクエリに行く!

こんにちは!このブログでは、私の試みにメディアのクエリの組み合わせは私のプロジェクトをどのようにそれらを使用する方法を学ぶことができるように応答を得るために話をするつもりです.
あなたが私のようなコード初心者ならば、一緒に学びましょう!あなたがもっと進んでいるならば、私があなたがより多くを学ぶことを望むので、何がリソースに行くかについて知らせてください!

まず、メディアクエリーは何ですか？

私がLaymanの用語で記述することができるベストは、メディアクエリーがCSSテクニックであるということです、あるいは、あなたが設定されたブレークポイントごとにそれらのデザイン要素が異なって振る舞うセットされたブレークポイントでDOMインラインで要素/メディアを操作する方法です.

YES! You can manipulate elements on the DOM with it! 
A couple of ways to do so is through HTML, CSS or JavaScript.

私の行くルートはCSSですが、間違いなくすべての組み合わせを使用することができます.

ここに私のメディアのクエリの組み合わせに行く：

私は私が取り組んでいるプロジェクトにそれらのすべてを使用し、現在私はこれらを使用して私の古いプロジェクトを更新しています.

SIZES MAY VARY DEPENDING ON WHAT DEVICES YOU WANT TO FOCUS ON

/*low resolution tablets, mobiles (portrait)*/
@media (min-width: 320px) and (max-width: 480px){

}


/*low resolution tablets, mobiles (landscape)*/
@media (min-width: 481px) and (max-width: 767px){
}


/*tablets, ipads (portrait)*/
@media (min-width: 768px) and (max-width: 1024px){

}


/*tablets, ipads (landscape)*/
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape){

}

アクションでそれを見たいですか?私たちの例として私のWebアプリのいずれかをみましょう.
下記のすべてのスクリーングラブとトグルモバイルビューは、ブラウザからコンソールを使用することです.
デフォルトでは、もちろん我々はWebAppのデスクトップバージョンで起動します.
-ここから注目されて、私はすでにクラスの' profilestra sidenav 'を持つ要素のためのセットされたCSSを持っています.

NOW, ADDING OUR PORTRAIT LOW-RES MOBILE & TABLET MEDIA QUERY
@media (min-width: 320px) and (max-width: 480px){  
}

-いくつかの値が変更され、いくつかの新しいものが追加されたことを参照してください.しかし、まだその要素の同じCSSセレクタを使用して操作します.

WE CAN SAY THE SAME FOR LANDSCAPE, KEEPING THE SAME VALUES
@media (min-width: 481px) and (max-width: 767px){
}

WHAT ABOUT PORTRAIT TABLETS YOU SAY?
@media (min-width: 768px) and (max-width: 1024px){

}

YES-CAN-DO FOR IPADS AND TABLETS ON LANDSCAPE TOO!
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape){
}
As you noticed values are the same from portrait to landscape. 
You might be wondering why declare if its the same values?

-私の経験に従って、あなたが支配するデスクトップ版値を望まないならば、我々はまだそれをする必要があります.
私は、メディアのクエリを定式化し、要素/コンポーネントによって移動するときに最初にモバイルを行うには、このプロセス中に学んだことがあります.私にとって、それは従うのがより簡単で、私のワークフローのより少ない混乱を持ちます.
私は、CSS-tricks guide to media queryからそれらのサイズの各々の役割のために大きな解剖学的破壊を見ました.私は、鉱山がメディア質問を学ぶために始めている私のようなもう一つのCodenewbieを助けることができるという望みのためにどのように鉱山が出るかについて示しています.
これは私のアプリで行われた違いを見て誰も助けてほしい!
参考文献
CSS Tricks
Query generator
SplashGlam -デモのために使用される私のskincareウェブアプリ.
次まで!