Heim > Web-Frontend > HTML-Tutorial > 一些实用的CSS Media Query代码片段,个人采集_html/css_WEB-ITnose

一些实用的CSS Media Query代码片段,个人采集_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-24 11:30:48
Original
1044 Leute haben es durchsucht

CSS3的出现让响应式Web设计变得简单,CSS3提供了强大的media queries,允许你针对不同的条件设置不同的样式,可以在不修改页面内容的情况下,为不同设备提供不同的样式效果。

以下是一些CSS media queries代码片段,你可以添加在自己的项目中,让页面根据屏幕自适应:

iPhone5

Css代码

  1. @media screen and (device-aspect-ratio: 40/71) {  
  2. }  
  3. or  
  4. @media screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2){  
  5. }  


Blackberry Torch

Css代码

  1. @media screen and (max-device-width: 480px) {   
  2. }  


Samsung S3

Css代码

  1. @media only screen and (-webkit-device-pixel-ratio: 2) {  
  2. }  


Google Nexus 7

Css代码

  1. @media screen and (device-width: 600px) and (device-height: 905px) and (-webkit-min-device-pixel-ratio: 1.331) and (-webkit-max-device-pixel-ratio: 1.332) {  
  2. }  


iPad Mini

Css代码

  1. @media screen and (device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 1) {  
  2. }  


iPad 3

横向

Css代码

  1. @media (max-device-width: 1024px) and (orientation: landscape) {   
  2. }  


竖向

Css代码

  1. @media (max-device-width: 768px) and (orientation: portrait) {   
  2. }  


Galaxy Tab 10.1

横向

Css代码

  1. @media (max-device-width: 1280px) and (orientation: landscape) {   
  2. }  


竖向

Css代码

  1. @media (max-device-width: 800px) and (orientation: portrait) {   

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