Heim > Web-Frontend > HTML-Tutorial > 各种设备的CSS3MediaQuery整理及爽歪歪写法_html/css_WEB-ITnose

各种设备的CSS3MediaQuery整理及爽歪歪写法_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-21 09:13:53
Original
1114 Leute haben es durchsucht

响应式布局

响应式布局麻烦之处就是每个尺寸的都要进行css定义,这个真的不是一般的蛋疼,下面有搜集到的各种尺寸css Media Query内容,搜集来源:media-queries-for-standard-devices。

看了之后是不是非常之蛋疼呢,那么只有使用工具来写这些玩意儿了,俺用得最爽的就是 stylus ,真的爽yy了,如果 stylus 不会玩耍请看这里 stylus入门使用方法

stylus

// 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
Nach dem Login kopieren

编译成

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;  }}
Nach dem Login kopieren

Phones and Handhelds

iPhones

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) { }
Nach dem Login kopieren

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) {}
Nach dem Login kopieren

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) {}
Nach dem Login kopieren

Tablets

iPads

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) {}
Nach dem Login kopieren

Galaxy Tablets

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) { }
Nach dem Login kopieren

Nexus Tablets

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) {}
Nach dem Login kopieren

Kindle Fire

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) {}
Nach dem Login kopieren

Laptops

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) { }
Nach dem Login kopieren

Wearables

Apple Watch

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

Moto 360 Watch

css/* ----------- Moto 360 Watch ----------- */@media   (max-device-width: 218px)  and (max-device-height: 281px) { }
Nach dem Login kopieren
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage