文档章节

CSS3教程:Responsive框架常见的Media Queries片段

快乐地编程
 快乐地编程
发布于 2015/02/09 17:27
字数 1012
阅读 18
收藏 0

Responsive设计在现代Web设计中可谓是越来越流行,但很同学们并未理解其真正的设计概念,往往把Responsive视为一种自适应布局。当然有很多同学也在尝试动写Responsive的案例,但如何取其断点左右纠结,如何设置哪几个断点?又从何入手?

Responsive中的断点都依赖于CSS3的Media Queries来决断。曾在CSS3 Media Queries模板使用em单位创建CSS3的Media QueriesiPads和iPones的Media Queries有过这方面的介绍。今天特意根据一些Responsive框架整理了一些常见的Media Queries片段,以供大家参考:

CSS3 Media Queries片段

在这里主要分成三类:移动端、PC端以及一些常见的响应式框架的Media Queries片段。

移动端Media Queries片段

iPhone5

 screen  (device-aspect- /) {}
或者: screen  (device- px)  (device- px)  (-webkit-device-pixel- ){}

iPhone 5 In Portrait & Landscape

 only screen (min-device-width  px) (max-device-width  px){  }

iPhone 5 In Landscape

 only screen (min-device-width  px) (max-device-width  px) (orientation  landscape){  }

iPhone 5 In Portrait

 only screen (min-device-width  px) (max-device-width  px) (orientation  portrait){  }

iPone4

 only screen  (-webkit-min-device-pixel-ratio  ), only screen  (min-device-pixel-ratio  ) {}

iPhone 3G

 screen  (device- px)  (device- px)  (-webkit-device-pixel- ){}

iPhone

/ screen  (max-device-width: px) {}

/ screen  (max-device-width: px) {}

Blackberry Torch

 screen  (max-device- px) {}

Samsung S3

 only screen  (-webkit-device-pixel- ) {}

Google Nexus 7

 screen  (device- px)  (device- px)  (-webkit-min-device-pixel- )  (-webkit-max-device-pixel- ) {}

Samsung Galaxy S3

 only screen  (-webkit-device-pixel- ) {}

Samsung Galaxy S2

 screen  (device- px)  (device- px)  (-webkit-device-pixel- ) {}

Galaxy Tab 10.1

/ (max-device-width: px)  (orientation: landscape) {}

/ (max-device-width: px)  (orientation: portrait) {}

iPad In Portrait & Landscape

 only screen (min-device-width  px) (max-device-width  px){  }

iPad In Landscape

 only screen (min-device-width  px) (max-device-width  px) (orientation  landscape){  }

iPad In Portrait

 only screen (min-device-width  px) (max-device-width  px) (orientation  portrait){  }

Retina iPad In Portrait & Landscape

 only screen (min-device-width  px) (max-device-width  px) (-webkit-min-device-pixel- ){  }

Retina iPad in landscape

 only screen (min-device-width  px) (max-device-width  px) (orientation  landscape) (-webkit-min-device-pixel- ){  }

Retina iPad in portrait

 only screen (min-device-width  px) (max-device-width  px) (orientation  portrait) (-webkit-min-device-pixel- ){  }

iPad Mini In Portrait & Landscape

 only screen (min-device-width  px) (max-device-width  px) (-webkit-min-device-pixel- ){  }

iPad Mini In Landscape

 only screen (min-device-width  px) (max-device-width  px) (orientation  landscape) (-webkit-min-device-pixel- ){  }

iPad Mini In Portrait

 only screen (min-device-width  px) (max-device-width  px) (orientation  portrait) (-webkit-min-device-pixel- ) {  }

桌面端

320px

 screen  (max- px) {}

640px

 screen  (max- px) {}

800px

 screen  (max- px) {}

1024px

 screen  (max- px) {}

1028px

 screen  (max- px) {}

除了上面的常见Media Queries片段之外,下面的网站还提供了一些其他的片段:

BEM

框架Media Queries片段

Boilerplate

/:http:5boilerplate.com/         only screen (min-width : px) (max-width : px) {

} only screen (min-width : px) {

} only screen (max-width : px) {

} only screen (min-width : px) (max-width : px) {

} only screen (min-width : px) (max-width : px) (orientation : landscape) {

} only screen (min-width : px) (max-width : px) (orientation : portrait) {

} only screen (min-width : px) {

} only screen (min-width : px) {

}only screen  (-webkit-min-device-pixel-ratio : ),
only screen  (min-device-pixel-ratio : ) {

}

Bootstrap的Media Queries

      { ... } 
{ ... } 
{ ... } 
{ ... }

Foundation的Media Queries

/:http:.zurb.com/         only screen { } only screen  (min-width: px) {} only screen  (min-width: px) {} only screen  (min-width: px) {} only screen  (orientation: landscape) {} only screen  (orientation: portrait) {}

Skeleton的Media Queries

/:http:.getskeleton.com    only screen  (max-width: px) {} only screen  (min-width: px)  (max-width: px) {} only screen  (max-width: px) {} only screen  (min-width: px)  (max-width: px) {} only screen  (max-width: px) {}

FRAMELESS的Media Queries

/:http:.com/ screen  (max-width: em){} screen  (min-width: em)  (max-width: em),        
screen  (min-width: em)  (max-width: em),        
screen  (min-width: em)  (max-width: em),     
screen  (min-width: em){} screen  (min-width: em)  (max-width: em),      
screen  (min-width: em){} screen  (min-width: em){} screen  (min-width: em){} screen  (min-width: em){} screen  (min-width: em){} screen  (min-width: em)  (max-width: em){} screen  (min-width: em){}

Susy的Media Queries

{}{}{}{}{}

Less Framework 4

/:http:.com/   only screen  (min-width: px)  (max-width: px) {} only screen  (max-width: px) {}

/ Mobile Layout: px (em) only screen  (min-width: px)  (max-width: px) {}

Golden Grid System的Media Queries

/:http:.com/ screen  (min-width: em) {} screen  (min-width: em) {} screen  (min-width: em) {} screen  (min-width: em) {} screen  (min-width: em) {} screen  (min-width: em) {} screen  (min-width: em) {} screen  (min-width: em) {} screen  (min-width: em) {}

Fluid baseline的Media Queries

/:http:.com/ only screen  (min-width: px) {} only screen  (min-width: px) {} only screen  (min-width: px) {} only screen  (min-width: px) {} only screen  (min-width: px) {} only screen  (min-width: px) {} only screen  (min-width: px) {}

320andUP

{
  
}{
  
}{
  
}{
  
}{
  
 
}{
  
}

Gridless

{
        
}{ 
        
}{ 
        
}

TotanTHEMES

/:http:.com/ only screen  (max-width: px) {} only screen  (min-width: px)  (max-width: px) {} only screen  (max-width: px) {} only screen  (min-width: px)  (max-width: px) {} only screen  (max-width: px) {}

Responsive Grid System

       
 {} 
 {} {} 
 {} 
 {}

本文搜集的是Media Queries在各种设备下的代码片段,希望这些片段能帮大家更好的理解Responsive断点的设置。如果大家有更好的方案,希望能在评论中分享。

2014年04月19日更新

基于视窗宽度的媒体查询断点设置

前提设置body的字体为100%。其具有一个简单的计算公式:100% = 16px = 1em = 14pt

/ = px screen  (max-width: em){

}
/ = px screen  (max-width: em){

}
/ = px screen  (max-width: em){

}
/ = px screen  (max-width: em){

}
/ = px screen  (max-width: em){

}
/ = px screen  (max-width: em){

}
/ = px screen  (max-width : em){

}

/ = px screen  (max-width : em){

}

/ = px screen  (max-width: em){

}

/ = px screen  (max-width: em){
}

/ = px screen  (max-width: em){

}

/ = px screen  (max-width: em){

}



/ Density (-webkit-min-device-pixel-ratio: ),(min-resolution: dpi){

}
/ Density (-webkit-min-device-pixel-ratio: ),(min-resolution: dpi){

}
/ Density (-webkit-min-device-pixel-ratio: ),(min-resolution: dpi){

}
/ Density (-webkit-min-device-pixel-ratio: ),(min-resolution: dpi){

}



/ Resolution  dpi   (min-resolution: dpi){

}

/ Resolution  dpi   (min-resolution:dpi){

}

/ Resolution  dpi   (min-resolution:dpi){

}

/ Resolution  dpi   (resolution:dpi){

}

出处:http://www.w3cplus.com/css3/media-query-snippets.html

本文转载自:http://www.w3cplus.com/css3/media-query-snippets.html

快乐地编程
粉丝 0
博文 2
码字总数 575
作品 0
昌平
程序员
私信 提问
18 个详细的响应式 Web 设计教程

在这篇文章中,我想跟你分享 18 个很有用的响应式 Web 设计的教程,这些教程可以帮助你学习响应式设计,包括瀑布流表格、图片和 media queries。 创建移动优先的响应式设计 使用 Sass 和 Co...

小编辑
2013/06/18
10.6K
5
CSS3 动画媒体查询(Animated Media Queries)

网站设计的一个新趋势是使用media queries(媒体查询),这是因为如今有大量的设备可以访问因特网,因此所有的网站都需要适应各种设备。responsive design(响应设计)应运而生。它可以发现用...

虫虫
2012/04/25
2.8K
1
什么是响应式Web设计?怎样进行?

说正事儿。准备在近期的几篇里集中翻译学习一下"响应式Web设计"的相关话题,包括概念、实践方式、案例及观点讨论等方面。相比于从前做的文档译文,这些文章篇幅要长的多(甚至要加分页了!),...

山哥
2012/02/28
140
0
17 款常用响应式 web UI 框架

1. Bootstrap Bootstrap是快速开发Web应用程序的前端工具包。它是一个CSS和HTML的集合,它使用了最新的浏览器技术,给你的Web开发提供了时尚的版式,表单,buttons,表格,网格系统等等。 官...

bypass
2013/01/13
14.1K
14
16个快速启动 Web 项目样板

样板是可以重用在许多地方的一套代码文件,只需很少或根本不需修改。然而,这里我们正在谈论的boilerplates通常可以作为您项目的坚实基础。另外,这也是学习编码技巧和窍门的好地方! 样板是...

虫虫
2012/03/18
7K
2

没有更多内容

加载失败,请刷新页面

加载更多

崛起于Springboot2.X之5分钟解决单点登陆(53)

SpringBoot2.X心法总纲 1、pom文件依赖 <dependency> <groupId>com.majiaxueyuan</groupId> <artifactId>sso-core</artifactId> <version>1.2.2</version></dependency> 2、......

木九天
28分钟前
16
0
面向对象和面向过程的区别

面向过程 优点:性能比面向对象高,因为类调用时需要实例化,开销比较大,比较消耗资源;比如单片机、嵌入式开发、Linux/Unix等一般采用面向过程开发,性能是最重要的因素。 缺点:没有面向对...

无名氏的程序员
30分钟前
13
0
OpenStack大事记

2010年7月19日,Rackspace、NASA、Citrix、Dell共同开发并发布OpenStack第一个版本。 2011年10月,Rackspace放弃OpenStack控制权,交由一新成立的OpenStack基金会管理。 2012年5月NASA宣布退...

大别阿郎
30分钟前
10
0
面向对象的简单应用—以交通工具(Vehicle)为列

请定义一个交通工具(Vehicle)的类其中有: 属性: 速度(speed)、 体积(size)等,方法:移动(move())、设置速度(setSpeed(int speed))、加速 speedUp()、减速 speedDown()等。最后在测试类 Ve...

INEVITABLE
41分钟前
9
0
通往艺术家之路

通往艺术家之路 并发编程中,开发者往往需要权衡锁的颗粒粗细,锁住的代码块太大呢会导致可能的线程堵塞,锁的颗粒太细呢又会因为频繁地加锁解锁导致系统用户态内核态的转换从而消费很多时间...

StupidZhe
42分钟前
24
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部