当前位置:Gxlcms > html代码 > 一些实用的CSSMediaQuery代码片段,个人采集_html/css_WEB-ITnose

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

时间:2021-07-01 10:21:17 帮助过:14人阅读

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) {
  2. }

人气教程排行