CSS3MediaQuery のさまざまなデバイスの並べ替えと書き込みメソッド_html/css_WEB-ITnose

レスポンシブ レイアウト

レスポンシブ レイアウトの問題は、各サイズを CSS で定義する必要があることです。これは実際には面倒なことです。以下はさまざまなサイズの CSS メディア クエリ コンテンツです。コレクションのソース: media-queries-for-standard。 -デバイス。

これを読んだ後、これらを書く唯一の方法はスタイラスを使うことです。スタイラスの使用を開始するには、ここをお読みください。 メソッド

スタイラス

// Media queriesmq-mobile = "screen and (max-width: 479px)"mq-tablet = "screen and (min-width: 480px) and (max-width: 767px)"mq-iPhones4 = "only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2)"mq-normal = "screen and (min-width: 768px)".page-number    display: inline-block    @media mq-mobile        display: none    @media mq-tablet        color:red    @media mq-iPhones4        font-size:12px    @media mq-normal        background:yellow

css.page-number {  display: inline-block;}@media screen and (max-width: 479px) {  .page-number {    display: none;  }}@media screen and (min-width: 480px) and (max-width: 767px) {  .page-number {    color: #f00;  }}@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {  .page-number {    font-size: 12px;  }}@media screen and (min-width: 768px) {  .page-number {    background: #ff0;  }}

携帯電話とハンドヘルド

iPhone

css/* ----------- iPhone 4 and 4S ----------- *//* Portrait and Landscape */@media only screen   and (min-device-width: 320px)   and (max-device-width: 480px)  and (-webkit-min-device-pixel-ratio: 2) {}/* Portrait */@media only screen   and (min-device-width: 320px)   and (max-device-width: 480px)  and (-webkit-min-device-pixel-ratio: 2)  and (orientation: portrait) {}/* Landscape */@media only screen   and (min-device-width: 320px)   and (max-device-width: 480px)  and (-webkit-min-device-pixel-ratio: 2)  and (orientation: landscape) {}/* ----------- iPhone 5 and 5S ----------- *//* Portrait and Landscape */@media only screen   and (min-device-width: 320px)   and (max-device-width: 568px)  and (-webkit-min-device-pixel-ratio: 2) {}/* Portrait */@media only screen   and (min-device-width: 320px)   and (max-device-width: 568px)  and (-webkit-min-device-pixel-ratio: 2)  and (orientation: portrait) {}/* Landscape */@media only screen   and (min-device-width: 320px)   and (max-device-width: 568px)  and (-webkit-min-device-pixel-ratio: 2)  and (orientation: landscape) {}/* ----------- iPhone 6 ----------- *//* Portrait and Landscape */@media only screen   and (min-device-width: 375px)   and (max-device-width: 667px)   and (-webkit-min-device-pixel-ratio: 2) { }/* Portrait */@media only screen   and (min-device-width: 375px)   and (max-device-width: 667px)   and (-webkit-min-device-pixel-ratio: 2)  and (orientation: portrait) { }/* Landscape */@media only screen   and (min-device-width: 375px)   and (max-device-width: 667px)   and (-webkit-min-device-pixel-ratio: 2)  and (orientation: landscape) { }/* ----------- iPhone 6+ ----------- *//* Portrait and Landscape */@media only screen   and (min-device-width: 414px)   and (max-device-width: 736px)   and (-webkit-min-device-pixel-ratio: 3) { }/* Portrait */@media only screen   and (min-device-width: 414px)   and (max-device-width: 736px)   and (-webkit-min-device-pixel-ratio: 3)  and (orientation: portrait) { }/* Landscape */@media only screen   and (min-device-width: 414px)   and (max-device-width: 736px)   and (-webkit-min-device-pixel-ratio: 3)  and (orientation: landscape) { }

Galaxy Phones

css/* ----------- Galaxy S3 ----------- *//* Portrait and Landscape */@media screen   and (device-width: 320px)   and (device-height: 640px)   and (-webkit-device-pixel-ratio: 2) {}/* Portrait */@media screen   and (device-width: 320px)   and (device-height: 640px)   and (-webkit-device-pixel-ratio: 2)   and (orientation: portrait) {}/* Landscape */@media screen   and (device-width: 320px)   and (device-height: 640px)   and (-webkit-device-pixel-ratio: 2)   and (orientation: landscape) {}/* ----------- Galaxy S4 ----------- *//* Portrait and Landscape */@media screen   and (device-width: 320px)   and (device-height: 640px)   and (-webkit-device-pixel-ratio: 3) {}/* Portrait */@media screen   and (device-width: 320px)   and (device-height: 640px)   and (-webkit-device-pixel-ratio: 3)   and (orientation: portrait) {}/* Landscape */@media screen   and (device-width: 320px)   and (device-height: 640px)   and (-webkit-device-pixel-ratio: 3)   and (orientation: landscape) {}/* ----------- Galaxy S5 ----------- *//* Portrait and Landscape */@media screen   and (device-width: 360px)   and (device-height: 640px)   and (-webkit-device-pixel-ratio: 3) {}/* Portrait */@media screen   and (device-width: 360px)   and (device-height: 640px)   and (-webkit-device-pixel-ratio: 3)   and (orientation: portrait) {}/* Landscape */@media screen   and (device-width: 360px)   and (device-height: 640px)   and (-webkit-device-pixel-ratio: 3)   and (orientation: landscape) {}

HTC Phones

css/* ----------- HTC One ----------- *//* Portrait and Landscape */@media screen   and (device-width: 360px)   and (device-height: 640px)   and (-webkit-device-pixel-ratio: 3) {}/* Portrait */@media screen   and (device-width: 360px)   and (device-height: 640px)   and (-webkit-device-pixel-ratio: 3)   and (orientation: portrait) {}/* Landscape */@media screen   and (device-width: 360px)   and (device-height: 640px)   and (-webkit-device-pixel-ratio: 3)   and (orientation: landscape) {}

タブレット

iPad

すごい

Galaxy タブレット

css/* ----------- iPad mini ----------- *//* Portrait and Landscape */@media only screen   and (min-device-width: 768px)   and (max-device-width: 1024px)   and (-webkit-min-device-pixel-ratio: 1) {}/* Portrait */@media only screen   and (min-device-width: 768px)   and (max-device-width: 1024px)   and (orientation: portrait)   and (-webkit-min-device-pixel-ratio: 1) {}/* Landscape */@media only screen   and (min-device-width: 768px)   and (max-device-width: 1024px)   and (orientation: landscape)   and (-webkit-min-device-pixel-ratio: 1) {}/* ----------- iPad 1 and 2 ----------- *//* Portrait and Landscape */@media only screen   and (min-device-width: 768px)   and (max-device-width: 1024px)   and (-webkit-min-device-pixel-ratio: 1) {}/* Portrait */@media only screen   and (min-device-width: 768px)   and (max-device-width: 1024px)   and (orientation: portrait)   and (-webkit-min-device-pixel-ratio: 1) {}/* Landscape */@media only screen   and (min-device-width: 768px)   and (max-device-width: 1024px)   and (orientation: landscape)   and (-webkit-min-device-pixel-ratio: 1) {}/* ----------- iPad 3 and 4 ----------- *//* Portrait and Landscape */@media only screen   and (min-device-width: 768px)   and (max-device-width: 1024px)   and (-webkit-min-device-pixel-ratio: 2) {}/* Portrait */@media only screen   and (min-device-width: 768px)   and (max-device-width: 1024px)   and (orientation: portrait)   and (-webkit-min-device-pixel-ratio: 2) {}/* Landscape */@media only screen   and (min-device-width: 768px)   and (max-device-width: 1024px)   and (orientation: landscape)   and (-webkit-min-device-pixel-ratio: 2) {}

Nexus タブレット

css/* ----------- Galaxy Tab 10.1 ----------- *//* Portrait and Landscape */@media   (min-device-width: 800px)   and (max-device-width: 1280px) {}/* Portrait */@media   (max-device-width: 800px)   and (orientation: portrait) { }/* Landscape */@media   (max-device-width: 1280px)   and (orientation: landscape) { }

Kindle Fire

css/* ----------- Asus Nexus 7 ----------- *//* Portrait and Landscape */@media screen   and (device-width: 601px)   and (device-height: 906px)   and (-webkit-min-device-pixel-ratio: 1.331)   and (-webkit-max-device-pixel-ratio: 1.332) {}/* Portrait */@media screen   and (device-width: 601px)   and (device-height: 906px)   and (-webkit-min-device-pixel-ratio: 1.331)   and (-webkit-max-device-pixel-ratio: 1.332)   and (orientation: portrait) {}/* Landscape */@media screen   and (device-width: 601px)   and (device-height: 906px)   and (-webkit-min-device-pixel-ratio: 1.331)   and (-webkit-max-device-pixel-ratio: 1.332)   and (orientation: landscape) {}

ラップトップ

css/* ----------- Kindle Fire HD 7" ----------- *//* Portrait and Landscape */@media only screen   and (min-device-width: 800px)   and (max-device-width: 1280px)   and (-webkit-min-device-pixel-ratio: 1.5) {}/* Portrait */@media only screen   and (min-device-width: 800px)   and (max-device-width: 1280px)   and (-webkit-min-device-pixel-ratio: 1.5)   and (orientation: portrait) {}/* Landscape */@media only screen   and (min-device-width: 800px)   and (max-device-width: 1280px)   and (-webkit-min-device-pixel-ratio: 1.5)   and (orientation: landscape) {}/* ----------- Kindle Fire HD 8.9" ----------- *//* Portrait and Landscape */@media only screen   and (min-device-width: 1200px)   and (max-device-width: 1600px)   and (-webkit-min-device-pixel-ratio: 1.5) {}/* Portrait */@media only screen   and (min-device-width: 1200px)   and (max-device-width: 1600px)   and (-webkit-min-device-pixel-ratio: 1.5)   and (orientation: portrait) {}/* Landscape */@media only screen   and (min-device-width: 1200px)   and (max-device-width: 1600px)   and (-webkit-min-device-pixel-ratio: 1.5)   and (orientation: landscape) {}

ウェアラブル

Apple Watch

css/* ----------- Non-Retina Screens ----------- */@media screen   and (min-device-width: 1200px)   and (max-device-width: 1600px)   and (-webkit-min-device-pixel-ratio: 1) { }/* ----------- Retina Screens ----------- */@media screen   and (min-device-width: 1200px)   and (max-device-width: 1600px)   and (-webkit-min-device-pixel-ratio: 2)  and (min-resolution: 192dpi) { }

Moto 360 Watch

css/* ----------- Apple Watch ----------- */@media  (max-device-width: 42mm)  and (min-device-width: 38mm) { }