CSS3 Media Queries 片段

合集下载

css使用@media响应式适配各种屏幕的方法示例

css使⽤@media响应式适配各种屏幕的⽅法⽰例定义和使⽤使⽤ @media 查询，你可以针对不同的媒体类型定义不同的样式。

@media 可以针对不同的屏幕尺⼨设置不同的样式，特别是如果你需要设置设计响应式的页⾯，@media 是⾮常有⽤的。

当你重置浏览器⼤⼩的过程中，页⾯也会根据浏览器的宽度和⾼度重新渲染页⾯。

PC端设备屏幕的宽度页⾯宽度⼤于1000px（>=1000）且⼩于1200px（<=1200）的时候执⾏下⾯的CSS（实际刚好“>=1000”或“<=1200”的都执⾏）@media screen and (min-width:1000px) and (max-width: 1200px){.cont_li{width: 50px;margin-left: 7px;padding-left: 9px;}}注意以下顺序，如果把@media (min-width: 768px)写在了最下⽅，那么很悲剧，@media (min-width: 1200){ //>=1200的设备 }@media (min-width: 992px){ //>=992的设备 }@media (min-width: 768px){ //>=768的设备 }这是因为如果屏幕宽度是1440，由于1440>768那么1200就会失效。

所以在使⽤min-width时，⼩的在前⾯，⼤的在后⾯；同理，如果使⽤max-width时，就是⼤的在前⾯，⼩的在后⾯：@media (min-width: 768px){ //>=768的设备 }@media (min-width: 992px){ //>=992的设备 }@media (min-width: 1200){ //>=1200的设备 }@media (max-width: 1199){ //<=1199的设备 }@media (max-width: 991px){ //<=991的设备 }@media (max-width: 767px){ //<=768的设备 }PC屏幕⾃适应CSS3代码：/*当页⾯宽度⼤于1000px且⼩于1200px的时候执⾏，1000-1200*/@media screen and (min-width:1000px) and (max-width: 1200px){body{font-size:16px}}/*当页⾯宽度⼤于1280px且⼩于1366px的时候执⾏,1280-1366*/@media screen and (min-width:1280px) and (max-width: 1366px){body{font-size:18px}}/*当页⾯宽度⼤于1440px且⼩于1600px的时候执⾏,1440-1600*/@media screen and (min-width:1440px) and (max-width:1600px){body{font-size:20px}}/*当页⾯宽度⼤于1680px且⼩于1920px的时候执⾏,1680-1920*/@media screen and (min-width:1680px) and (max-width:1920px){body{font-size:22px}}电脑屏幕尺⼨的例表得到了⼏个宽度：1024、1200、1280、1366、1440、1600、1680、1920。

菜鸟教程css3

菜鸟教程css3菜鸟教程CSS3CSS3是层叠样式表（Cascading Style Sheets）的第三个版本，是一种用于描述网页样式和布局的技术。

与CSS2相比，CSS3拥有更多的新特性和功能，可以让开发者更加灵活地控制网页的外观和交互效果。

无论是在移动端还是在桌面端，CSS3都被广泛应用于网页开发中。

下面将介绍CSS3的几个重要特性和用法。

1. 选择器CSS3引入了一些新的选择器，让开发者可以更精确地选择网页中的元素。

比如：属性选择器（Attribute Selectors）允许根据元素的属性值选择元素；伪类（Pseudo-classes）可以根据元素的状态或位置选择元素；伪元素（Pseudo-elements）可以创建某些元素的特定部分。

2. 盒子模型CSS3中的盒子模型（Box Model）得到了进一步的增强。

开发者可以通过box-sizing属性来控制元素的尺寸计算方式，可以选择使用content-box（默认）或者border-box。

此外，CSS3还引入了弹性盒子布局（Flexible Box Layout）和网格布局（Grid Layout），使得网页布局更加灵活和响应式。

3. 文本效果CSS3中提供了一系列的文本效果特性，可以使得网页中的文字更加生动和丰富。

比如：text-shadow可以为文本添加阴影效果；text-overflow可以控制文本超出容器时的显示方式；word-wrap可以实现自动换行；@font-face可以引入自定义的字体等。

4. 渐变和渲染CSS3中引入了线性渐变（linear gradient）和径向渐变（radial gradient）两种新的渐变方式，可以用来创建更加丰富的背景和图形效果。

此外，CSS3还提供了多种渲染方式，比如：盒子阴影（box-shadow）、边框图像（border-image）和文本轮廓（text-outline）等。

5. 过渡和动画过渡（Transition）和动画（Animation）是CSS3中用于实现元素变化效果的重要特性。

css3响应式布局ppt课件

Байду номын сангаас
烧伤病人的治疗通常是取烧伤病人的健康皮肤进行自体移植，但对于大面积烧伤病人来讲，健康皮肤很有限，请同学们想一想如何来治疗该病人
烧伤病人的治疗通常是取烧伤病人的健康皮肤进行自体移植，但对于大面积烧伤病人来讲，健康皮肤很有限，请同学们想一想如何来治疗该病人
烧伤病人的治疗通常是取烧伤病人的健康皮肤进行自体移植，但对于大面积烧伤病人来讲，健康皮肤很有限，请同学们想一想如何来治疗该病人
烧伤病人的治疗通常是取烧伤病人的健康皮肤进行自体移植，但对于大面积烧伤病人来讲，健康皮肤很有限，请同学们想一想如何来治疗该病人
(max-width:600px)" href="link.css" /> (2)在样式表中内嵌@media:
@media screen and(max-width:600px){ 选择器{
属性:属性值; }
}
烧伤病人的治疗通常是取烧伤病人的健康皮肤进行自体移植，但对于大面积烧伤病人来讲，健康皮肤很有限，请同学们想一想如何来治疗该病人
烧伤病人的治疗通常是取烧伤病人的健康皮肤进行自体移植，但对于大面积烧伤病人来讲，健康皮肤很有限，请同学们想一想如何来治疗该病人
Media Query语法详解 <link rel="stylesheet" media="screen and(max-width:600px)" href="small.css" /> 1.screen:指的是一种媒体类型; 2.and:被称为关键词,与其相似的还有not,only.可能的操作符 3.max-width:600px这个就是属性值,媒体特性,也就是媒体条件.

css3语法教程讲义

CSS3 的一些新特性
圆角效果图形化边界块阴影与文字阴影使用 RGBA 实现透明效果渐变效果使用 @Font-Face 实现定制字体多背景图文字或图像的变形、过渡、动画多栏布局媒体查询
CSS3技术概述
CSS3选择器 CSS3文字与文字相关样式 CSS3盒相关样式 CSS3背景与边框相关样式 CSS3中的变形、过渡、动画 CSS3多栏布局 CSS3媒体查询（Media Queries） CSS3颜色相关样式 CSS3渐变
nth-child(n)和nth-last-child(n)
根据其父元素的子元素的序号来选取元素， nthchild(n)从前往后计算， nth-last-child(n)是从后往前几种写法
• 简单数字序号写法： :nth-child(number)直接匹配第 number个元素，参数number必须为大于0的整数。 • 倍数写法： :nth-child(an)匹配所有倍数为a的元素。其中参数an中的字母n不可缺省，它是倍数写法的标志，如3n、5n。
• content-box：指元素的宽度与高度不包括内部补白区域，以及边框的宽度与高度。 border-box：指元素的宽度与高度包括内部补白区域，以及边框的宽度与高度。 inherit：规定应从父元素继承 box-sizing 属性的值
css3媒体查询和allmedia除便携乊外癿其他设备戒非彩色便携设备中mediaallcolor样式代码用亍所有非彩色设备中onlyonly关键字可能显得有些多余对支持mediaqueries癿浏览器来说确实是这样但很多时候only是用来对那些丌支持mediaqueries但是却读取mediatype癿设备隐藏样式表癿mediaonlyscreenaddcolor样式代码支持mediaqueries癿设备正确应用样式就仿佛only丌存在丌支持mediaqueries但正确读取mediatype癿设备由亍先读取到only而丌是screen将忽略这个样式丌支持mediaqueries癿ie丌论是否有only都忽略样式css3技术概述css3选择器css3文字与文字相关样式css3盒相关样式css3背景与边框相关样式css3中的变形过渡劢画css3布局相关样式css3媒体查询mediaqueriescss3颜色相关样式css3渐变颜色相关样式opacity

媒体查询的概念

媒体查询（Media Query）是CSS3中的一个重要特性，它允许开发者根据设备的特定属性（如设备的宽度、高度、分辨率等）来应用不同的CSS样式。

这种设备相关的样式表被称为响应式设计，可以为不同设备和屏幕尺寸提供最佳的用户体验。

媒体查询的工作原理基于一个简单的逻辑：如果设备的属性满足查询条件，那么相应的样式就会被应用。

这些查询条件可以包括设备的类型（如打印设备、屏幕设备等）、设备的宽度和高度、设备的方向（横屏或竖屏）等。

媒体查询的语法非常直观，可以在CSS样式表中直接使用。

通过使用@media关键字，后面跟上查询条件，再定义相应的样式规则，就可以实现媒体查询。

例如，我们可以定义一个只在浏览器窗口宽度小于600像素时应用的样式规则。

媒体查询的出现，使得网页设计师和开发者能更好地控制网页在不同设备上的显示效果。

在过去，为了适配不同尺寸的屏幕，开发者往往需要创建多个版本的网站，这无疑增加了开发和维护的成本。

而有了媒体查询，开发者只需要在一个CSS样式表中定义好各种设备条件下的样式规则，就能实现一个可以在各种设备上优雅显示的响应式网站。

此外，媒体查询也使得用户可以获得更好的体验。

因为网站可以根据用户的设备特性来调整显示效果，无论用户使用的是大屏幕的桌面电脑，还是小屏幕的移动设备，都可以看到布局合理、易于阅读的网页。

媒体查询的使用方法

媒体查询的使用方法
CSS媒体查询（Media Queries）是CSS3中的一个模块，它允许网页的信息取决于访
问设备的属性和功能。

例如，你可以在一个电脑上看到网页的一个版本，而在另一台只需
要显示手机版本。

这就是CSS 媒体查询所做的。

它允许你根据不同的访问设备（例如移
动设备、平板设备），来服用不同的样式，以便让网页页面保持一致的布局，而不会受
到大小屏幕的影响。

CSS媒体查询允许在表示性状态下在网页上实现响应式设计。

基于特定的设备（比如
手机屏幕），可以隐藏，增加或者改变网页元素，让网页更加友好地展示在不同的设备上。

CSS媒体查询有很多好处。

其中最重要的收益就是，可以提供一种良好的用户体验，
可以根据用户设备的不同，自动调整网页的表现形式。

CSS媒体查询是一种利用一定的CSS规则让网页保持在多种设备上的自适应的技术。

非常实用的技术，特别是用在网站和web应用的开发中。

使用 CSS媒体查询，你需要在<style> 标签里添加代码，指定你想要表现出哪些状态，这可以用@media指令实现：
@media only screen and (min-width: 600px) {
// 代码块
}
另一方面，媒体查询还可以根据屏幕的尺寸，创建不同的视口。

通过视口的管理，可
以让用户可以看到更精致的页面，而不用担心设备的兼容性。

CSS媒体查询是未来网页设计的两个重要组成部分，更好的用户体验和更加的可玩性，能够把枯燥的网页设计变成动态的网页体验，网页设计者完全可以利用这一技术来创造出
更加好看，有趣，自适应及高品质的网页。

CSS中的媒体查询及响应式设计

CSS中的媒体查询及响应式设计在当今互联网时代，人们普遍使用各种设备来访问网页，例如电脑、手机和平板电脑等。

为了提供更好的用户体验，开发人员需要根据不同的设备特点来设计网页。

CSS中的媒体查询和响应式设计应运而生，它们可以帮助我们创建适应不同屏幕尺寸和设备类型的网页。

一、媒体查询的概念和用法媒体查询是CSS3中的一个重要特性，它可以根据设备的特性、屏幕尺寸和方向等条件来应用不同的样式。

通过媒体查询，我们可以针对不同设备做出不同的布局和样式调整，从而使网页在各种设备上都能够呈现较好的效果。

使用媒体查询非常简单，只需在CSS样式表中的规则中添加@media关键字，然后在括号内指定要匹配的条件。

例如，下面的代码片段演示了一个基本的媒体查询的用法：```css@media screen and (max-width: 600px) {/* 当屏幕宽度小于等于600像素时的样式 */}@media screen and (min-width: 601px) and (max-width: 1024px) {/* 当屏幕宽度在601像素到1024像素之间时的样式 */}@media screen and (min-width: 1025px) {/* 当屏幕宽度大于等于1025像素时的样式 */}```通过使用不同的媒体查询条件，我们可以根据屏幕宽度的不同应用不同的样式。

这样，我们就可以为手机、平板电脑和桌面电脑等不同设备提供不同的布局和样式。

二、响应式设计的原则和技巧响应式设计是一种根据设备特征和屏幕大小等因素来自适应调整网页布局和样式的设计方法。

下面介绍一些常用的响应式设计原则和技巧。

1. 流式布局（Fluid Layout）：使用百分比或弹性单位（如rem）来定义网页元素的宽度和高度，以便能够自动适应不同屏幕大小。

这样可以保证网页的内容在各种设备上都能够自然流动和适应。

2. 弹性图片（Flexible Images）：通过使用max-width属性将图片的宽度设置为百分比或最大宽度，可以确保图片在不同屏幕上按比例缩放，不会失真或超出容器。

CSS3媒体查询@media查询（响应式布局）

CSS3媒体查询@media查询（响应式布局）例：如果⽂档宽度⼩于 300 像素则修改背景颜⾊(background-color):@media screen and (max-width: 300px) {body {background-color:lightblue;}}⼀、定义使⽤ @media 查询，你可以针对不同的媒体类型定义不同的样式。

@media 可以针对不同的屏幕尺⼨设置不同的样式，特别是如果你需要设置设计响应式的页⾯，@media 是⾮常有⽤的。

当你重置浏览器⼤⼩的过程中，页⾯也会根据浏览器的宽度和⾼度重新渲染页⾯。

⼆、CSS 语法1.直接在CSS⽂件中使⽤@media 类型 and (条件1) and (条件⼆){css样式}例：@media screen and (max-width:980px ) {body{background-color: red;}}2.使⽤@import导⼊@import url("css/moxie.css") all and (max-width:980px);3.也是最常⽤的：使⽤link连接，media属性⽤于设置查询⽅式：<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">三、媒体类型值描述all⽤于所有设备aural已废弃。

⽤于语⾳和声⾳合成器braille已废弃。

应⽤于盲⽂触摸式反馈设备embossed已废弃。

⽤于打印的盲⼈印刷设备handheld已废弃。

⽤于掌上设备或更⼩的装置，如PDA和⼩型电话print⽤于打印机和打印预览projection已废弃。

⽤于投影设备screen⽤于电脑屏幕，平板电脑，智能⼿机等。

网页设计自适应网页设计

另外，绝对定位（position: absolute）的使用，也要非常小心。
6.选择加载css
"自适应网页设计"的核心，就是CSS3引入的Media Query模块
它的意思就是，自动探测屏幕宽度，然后加载相应的CSS文件。
<link rel="stylesheet" type="text/css"
media="screen and (max-device-width: 400px)"
href="tinyScreen.css" />
上面的代码意思是，如果屏幕宽度小于400像素（max-device-width: 400px），就加载tinyScreen.css文件。
<link rel="stylesheet" type="text/css"
此外，windows平台缩放图片时，可能出现图像失真现象。这时，可以尝试使用IE的专有命令：
img { -ms-interpolation-mode: bicubic; }
或者，Ethan Marcotte的imgSizer.js。
addLoadEvent(function() {
所以绝大多数的访问者并不会看到它的存在，而且对网站的权威度是没有影响的。不同的元标签起着不同的作用，但都是用来提供关于页面的附加信息。）
<meta name="viewport" content="width=device-width, initial-scale=1" />
上面这行代码的意思是，网页宽度默认等于屏幕宽度（width=device-width），原始缩放比例（initial-scale=1）为1.0，即网页初始大小占屏幕面积的100%。

CSS3的媒体查询（MediaQueries）与移动设备显示尺寸大全

CSS3的媒体查询（MediaQueries）与移动设备显⽰尺⼨⼤全媒体查询介绍我今天就总结⼀下响应式设计的核⼼C SS技术Me d ia(媒体查询器)的⽤法。

先看⼀个简单的例⼦：<link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css"/>上⾯的media语句表⽰的是：当页页宽度⼩于或等于600px,调⽤small.css样式表来渲染你的Web页⾯。

⾸先来看media的语句中包含的内容：1、screen：这个不⽤说⼤家都知道，指的是⼀种媒体类型；2、and：被称为关键词，与其相似的还有not,only，稍后会介绍；3、（max-width:600px）：这个就是媒体特性，说得通俗⼀点就是媒体条件。

前⾯这个简单的实例引出两个概念性的东西，⼀个就是媒体类型（Media Type）和媒体特性（Media Query），⾸先⼀起来理解⼀下这两个概念：媒体类型(Media Type)在css2中是⼀个常见的属性，也是⼀个⾮常有⽤的属性，可以通过媒体类型对不同的设备指定不同的样式，在css2中我们常碰到的就是all（全部）,screen（屏幕）,print（页⾯打印或打邱预览模式）,其实在媒体类型不⽌这三种，w3c总共列出了10种媒体类型。

媒体特性Media Query看成Media Type(判断条件)+CSS(符合条件的样式规则),为了更能理解Media Query，我们在次回到前⾯的实例上：<link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css"/>转换成css中的写法为：@media screen and (max-width: 600px) {选择器 {属性：属性值；}}其实就是把small.css⽂件中的样式放在了@media srceen and (max-width;600px){...}的⼤括号之中。

DIV+CSS响应式布局介绍

jquery网页前端特效
懒人之家 - 可能是JS网页特效代码收集最全的懒站！

响应式布局这件小事
2012-11-12 11:05 [小大] 来源: nrenzhijia:.com :
讲到响应式布局，相信大家都有一定的了解，响应式布局是今年很流行的一个设计理念，随着移动互联网的盛行，为解决如今各式各样的浏览器分辨率以及不同移动设备的显示效果，设计师提出了响应式布局的设计方案。今天就和大家来讲讲响应式布局这件小事，包含什么是响应式布局、响应式布局的优点和缺点以及响应式布局该怎么设计（通过 CSS3 Media Query 实现响应布局）。
jquery网页前端特效
懒人之家 - 可能是JS网页特效代码收集最全的懒站！

/* 禁用 iPhone 中 Safari 的字号自动调整 */ html { -webkit-text-size-adjust： none; } /* 设置 HTML5元素为块 */ article， aside， details， figcaption， figure， footer， header， hgroup， menu， nav， section { display： block; } /* 设置图片视频等自适应调整 */ img { max-width： 100%; height： auto; width： auto\9; /* ie8 */ } .video embed， .video object， .video iframe { width： 100%; height： auto; }
jquery网页前端特效
懒人之家 - 可能是JS网页特效代码收集最全的懒站！

示例一：在 link 中使用@media：

css3教程

css3教程CSS3是一种样式表语言，用于描述网页上的元素如何显示和排版。

CSS3是CSS的最新版本，引入了许多新的特性和功能，使得网页设计更加灵活和丰富。

下面是一个关于CSS3的简要教程，介绍了其基本语法和常用特性。

1. CSS3的基本语法CSS3的基本语法由选择器和声明块组成。

选择器用于选择要应用样式的元素，声明块包含一组样式属性和值。

例如，要将一个标题元素的文字颜色设置为红色，可以使用以下CSS3代码：h1 {color: red;}2. CSS3的常用选择器CSS3引入了一些新的选择器，使得选择元素更加灵活。

这些选择器包括：- 类选择器（.class）：选择具有相同类名的元素。

- ID选择器（#id）：选择具有指定ID的元素。

- 子元素选择器（parent > child）：选择作为指定父元素的直接子元素的元素。

3. CSS3的常用特性CSS3引入了许多新的特性和功能，下面是一些常用的特性：- 圆角（border-radius）：允许将元素的边角设置为圆形。

- 阴影（box-shadow）：允许为元素添加阴影效果。

- 渐变（linear-gradient）：允许为元素创建平滑的渐变效果。

- 过渡（transition）：允许为元素添加平滑的动画效果。

- 动画（@keyframes）：允许创建复杂的CSS动画效果。

4. CSS3的兼容性虽然CSS3在功能上更强大，但并不是所有浏览器都完全支持它的所有特性。

为了确保网页的兼容性，可以使用CSS3前缀（如-webkit，-moz，-o等）来指定特定浏览器的样式。

例如，要为Chrome浏览器设置圆角效果，可以使用以下代码：h1 {-webkit-border-radius: 10px;}总结：CSS3是一种强大的样式表语言，可以用于创建丰富多彩的网页设计效果。

本教程简要介绍了CSS3的基本语法和常用特性，希望能够帮助你了解和使用CSS3。

为了兼容不同浏览器，记得使用适当的前缀。

响应式布局一般要响应哪几个尺寸

响应式布局一般要响应哪几个尺寸响应式布局一般要响应哪几个尺寸4个1.1170px（大萤幕大桌面显示器）2.970px（中等萤幕桌面显示器）3.750px（小萤幕平板）4.小于768px （超小手机萤幕）响应式布局怎么用css写响应式css的属性值用百分比来表示，然后用JS来判断浏览装置的大小，引用相应的CSS。

简单点就是用bootstrap这个前端框架，对于响应式的表现很好。

而且简单易学，一个下午就可以初步掌握，只要你有css的基础datatables 能响应式布局吗DataTables关于table的布局主要是根据sDom标签来定以的："sDom":'<""lf<"clear">>rt<"bottom"ip<"clear">>',自定义布局sdom：l- 每行显示的记录数;f- 搜寻框;t- 表格;i- 表格资讯;p- 分页条;r- 载入时的进度条<””lf<”clear”>>：是table上边的显示资讯控制，主要显示：l- 每行显示的记录数；f- 搜寻框等rt：中间部位的控制，我们一般是显示table和进度条等资讯<”bottom”ip<”clear”>>：table最下边的控制，主要显示：i- 表格资讯;p- 分页条根据自己的需要我们可以定制相关部位显示相应的资讯块。

bootstrap响应式布局怎么写响应式设计的初衷是对于不同萤幕属性的装置进行近乎一致的呈现，当然，是使用『一份』程式码，但是，问题来了，不同装置的网路环境不同（强弱网），对样式表支援度不同（客户端属性），所以如果采用响应式的思路来玩，这里适配主要的受众装置即可，以下举例以常见装置为主：PC高分屏，PC常规屏，各种平板，各种手机以及其开启页面的client，特别的装置，诸如阅读器。

css3新单位vw、vh的使用教程

css3新单位vw、vh的使⽤教程响应式布局的单位我们第⼀时间会想到通过rem单位来实现适配，但是它还需要内嵌⼀段脚本去动态计算跟元素⼤⼩。

⽐如：(function (doc, win) {let docEl = doc.documentElementlet resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize'let recalc = function () {var clientWidth = docEl.clientWidthif (!clientWidth) returndocEl.style.fontSize = 14 * (clientWidth / 320) + 'px'}if (!doc.addEventListener) returnwin.addEventListener(resizeEvt, recalc, false)doc.addEventListener('DOMContentLoaded', recalc, false)})(document, window)那有没有⼀个单位不需要JS和CSS耦合在⼀起的单位？答案是有的，就是vw／vh。

vw = view widthvh = view height这两个单位是CSS3引⼊的，以上称为视⼝单位允许我们更接近浏览器窗⼝定义⼤⼩。

vw、vh、vmin、vmax 的含义（1）vw、vh、vmin、vmax 是⼀种视窗单位，也是相对单位。

它相对的不是⽗节点或者页⾯的根节点。

⽽是由视窗（Viewport）⼤⼩来决定的，单位 1，代表类似于 1%。

视窗(Viewport)是你的浏览器实际显⽰内容的区域—，换句话说是你的不包括⼯具栏和按钮的⽹页浏览器。

（2）具体描述如下：vw：视窗宽度的百分⽐（1vw 代表视窗的宽度为 1%）vh：视窗⾼度的百分⽐vmin：当前 vw 和 vh 中较⼩的⼀个值vmax：当前 vw 和 vh 中较⼤的⼀个值vw、vh 与 % 百分⽐的区别（1）% 是相对于⽗元素的⼤⼩设定的⽐率，vw、vh 是视窗⼤⼩决定的。

揭开CSS3媒体查询迷雾（min-width和max-width）

揭开CSS3媒体查询迷雾（min-width和max-width）本⽂参考MichelleKlann的媒体查询(media queries)是响应式设计(Responsive Web Design简称RWD)必不可少的⼀部分。

媒体查询有两个关键词min-width和max-width, 接触过媒体查询的同学可能会认同我，这两个关键词很绕；从字⾯上理解它们可能不那么容易，以⾄于我每次都需要在脑海⾥⾯不断演算，然后⼩⼼翼翼地测试效果（⼤概和写正则表达式的感觉差不多）。

在这篇⽂章中我尝试解开媒体查询的迷雾。

⾸先是名词解析：width: 通常指代视⼝宽度；另外width和device width的区别在于，device width指代是屏幕的物理宽度。

⽐如iphone5的屏幕分辨率是1136x640，竖屏时device width是640，横屏时是1136。

通常，移动设备的浏览器都是全屏的，所以⼀般情况下width等于device-width。

但是height和device-height的情况不⼀样（浏览器上⽅的地址栏和下⽅的⼯具栏有可能不算进视⼝⾼度）。

鉴于⼀般媒体查询不采⽤height，所以本⽂所有例⼦全部使⽤width，指代width的像素全部加粗便于理解。

规则1： @media only screen and (min-width: 330px) {...}指「width⼤于或者等于min-width，采⽤{...}的样式」所以，如果width是320px，这条规则返回false；返回false的媒体查询规则会直接被浏览器过滤掉，不会渲染这条规则中的CSS样式。

这种情况翻译过来就是：「如果320px⼤于等于330px，采⽤{...}的样式」问题1：有width为310px, 320px, 330px, 340px, 350px的视⼝，哪些视⼝会采⽤以上规则（指代规则1中{...}的CSS样式）？规则2： @media only screen and (max-width: 330px) {...}指「width⼩于或者等于max-width，采⽤{...}的样式」如果width是320px，这条规则会返回true，浏览器会解析这段规则中的CSS样式。

css3实现依次出现三个点（一般用于提示加载中。。。提交中。。。）

css3实现依次出现三个点（⼀般⽤于提⽰加载中。

提交中。

）<a href="javascript:" class="login">登录中<span class="dotting"></span></a>.dotting { display: inline-block; width: 10px; min-height: 2px;padding-right: 2px;border-left: 2px solid currentColor; border-right: 2px solid currentColor;background-color: currentColor; background-clip: content-box;box-sizing: border-box;-webkit-animation: dot 1.5s infinite step-start both;animation: dot 1.5s infinite step-start both;*zoom: expression(this.innerHTML = '...'); /*IE7 */}.dotting:before { content: '...'; } /* IE8 */.dotting::before { content: ''; }:root .dotting { margin-left: 2px; padding-left: 2px; } /* IE9+ */@-o-keyframes dot {25% { border-color: transparent; background-color: transparent; }50% { border-right-color: transparent; background-color: transparent; }75% { border-right-color: transparent; }}@-ms-keyframes dot {25% { border-color: transparent; background-color: transparent; }50% { border-right-color: transparent; background-color: transparent; }75% { border-right-color: transparent; }}@-moz-keyframes dot {25% { border-color: transparent; background-color: transparent; }50% { border-right-color: transparent; background-color: transparent; }75% { border-right-color: transparent; }}@-webkit-keyframes dot {25% { border-color: transparent; background-color: transparent; }50% { border-right-color: transparent; background-color: transparent; }75% { border-right-color: transparent; }}@keyframes dot {25% { border-color: transparent; background-color: transparent; }50% { border-right-color: transparent; background-color: transparent; }75% { border-right-color: transparent; }}。

媒体查询@media与css先后顺序产生的优先级问题【转】

媒体查询@media与css先后顺序产⽣的优先级问题【转】缘起：我新到⼀个公司，接⼿⼀个以前的项⽬。

在⾕歌模拟器上调试苹果系列的效果，总是调节不好。

期间：困扰了我好⼤⼀会⼉，不和常规呀，难道是⿁打墙了？
真相：@media screen and (max-width: 800px) {}的样式应该放到后⾯，不应该放到没有@media的前⾯。

原因：很简单。

@media是对条件才查询，但是它也遵守css的优先级顺序。

@media screen and (max-width: 800px) {
p {
background-color:lightblue;
font-size: 24px;
}
}
p {
background-color:lightgreen;
font-size: 48px;
}
这样的样式，即使满⾜了，查询条件，标签p⾥的⽂字还是48px。

后⾯的样式会覆盖之前的。

所以正确的写法应该是：
p {
background-color:lightgreen;
font-size: 48px;
}
@media screen and (max-width: 800px) {
p {
background-color:lightblue;
font-size: 24px;
}
}
在回到项⽬中，由于之前的⼈，把@media写在了上⾯，所以导致@media⾥的样式怎么也不起作⽤。

因为被后来的覆盖了。

来源：。

媒体查询使用方法@media

媒体查询使⽤⽅法@mediaMedia Queries能在不同的条件下使⽤不同的样式，使页⾯在不同在终端设备下达到不同的渲染效果。

前⾯简单的介绍了Media Queries如何引⽤到项⽬中，但Media Queries有其⾃⼰的使⽤规则。

具体来说,Media Queries的使⽤⽅法如下。

@media 媒体类型and （媒体特性）{你的样式}注意：使⽤Media Queries必须要使⽤“@media”开头，然后指定媒体类型（也可以称为设备类型），随后是指定媒体特性（也可以称之为设备特性）。

媒体特性的书写⽅式和样式的书写⽅式⾮常相似，主要分为两个部分，第⼀个部分指的是媒体特性，第⼆部分为媒体特性所指定的值，⽽且这两个部分之间使⽤冒号分隔。

例如：(max-width: 480px)从前⾯表中可以得知，主要有⼗种媒体类型和13种媒体特性，将其组合就类似于不同的CSS集合。

但与CSS属性不同的是，媒体特性是通过min/max来表⽰⼤于等于或⼩于做为逻辑判断，⽽不是使⽤⼩于（<）和⼤于（>）这样的符号来判断。

接下来⼀起来看看Media Queries在实际项⽬中常⽤的⽅式。

1. 最⼤宽度max-width“max-width”是媒体特性中最常⽤的⼀个特性，其意思是指媒体类型⼩于或等于指定的宽度时，样式⽣效。

如：@media screen and (max-width:480px){.ads {display:none;}}上⾯表⽰的是：当屏幕⼩于或等于480px时,页⾯中的⼴告区块（.ads）都将被隐藏。

2.最⼩宽度min-width“min-width”与“max-width”相反，指的是媒体类型⼤于或等于指定宽度时，样式⽣效。

@media screen and (min-width:900px){.wrapper{width: 980px;}}上⾯表⽰的是：当屏幕⼤于或等于900px时，容器“.wrapper”的宽度为980px。

用CSS3伪类实现书签效果

⽤CSS3伪类实现书签效果前两天想给博客上添个书签效果，类似于下⾯这样:在⽹上搜索⼀番后，发现⼀篇⽤三个div实现了这个效果。

但是博客园可没有给我这么多div，所以试着⽤伪类实现了⼀下。

before,after伪类这两个属性就像正常元素的⼩左和⼩右。

他们没有元素标签，但是却有元素的css属性，除此之外，他们还有⼀个特殊的属性叫'content'，⽤来放置⽂本内容。

他们虽然叫before和after,但是跟元素却不是兄弟关系，⽽是被浏览器当成元素的⼦元素进⾏布局。

有下图为证。

所以在⼀个空的div⾥，放⼀个有内容的伪类，在伪类没有脱离⽂档流的情况下，div⼀样会被撑开。

border实现书签效果的另⼀个要点是border,对于平时只写black 1px solid的我来说，直到这回才真正体会到border的魅⼒。

对于⼀个⾼度为0，宽度也为0的空元素，给他border,同样可以让元素现形。

border是⼀个复合的css属性。

由三个⼦复合属性构成：border-widthborder-styleborder-color这三个⼦复合属性⼜可以按上，右，下，左的顺序分开设置,以border-color为例:⼜可以分为:border-top-colorborder-right-colorborder-bottom-colorborder-left-color举个综合栗⼦：div{position:absolute;top:30px;right:5px;border:50px solid;border-width: 20px 30px 40px 50px;border-color:blue red yellow green;border-right-color:#f66;}这会画出下⾯的图形:看出来了吧，浏览器是⽤初中⼏何画出来的!!⾸先画⼀个长80(border左宽度+border右宽度)，宽60的矩形(border上宽度+border下宽度)，然后上右下左分别向⾥偏移20，30，40，50,得到border的交点，学霸告诉我，其实偏移两条边就⾏。

css判断不同分辨率显示不同宽度布局实现自适应宽度

css判断不同分辨率显⽰不同宽度布局实现⾃适应宽度CSS DIV⽹页布局中当分辨率⼩于等于1024px（像素）时，DIV布局对象显⽰1000px宽度，当分辨率⼤于1024px时候显⽰1200px宽度等需求。

使⽤CSS实现改变浏览器显⽰宽度从⽽实现布局的⽹页宽度动态改变变化（⽹页宽度⾃动随浏览器显⽰宽度⽽变宽变窄）。

随着发展，越来越多的电脑⽤户显⽰屏分辨率越来越⾼，但有的⽤户还是使⽤1024px的分辨率的显⽰屏（根据⼏个浏览器分辨率统计平台得到数据现在使⽤1200分辨率以下⽤户极少，但我们CSS布局时仍然需要⾄少考虑1024px分辨率⽤户），如果⽹页布局宽度固定到1200px，1024分辨率⽤户浏览⽹页时浏览器下⽅会出现滚动条，为了解决这个问题，⼤家可以通过使⽤CSS3样式判断⽤户浏览器宽度从⽽调⽤不同布局宽度。

使⽤CSS单词与语法复制代码代码如下:@media screen and (判断属性){ CSS样式选择器 }这⾥注意花括号⾥装要变化CSS样式选择器。

三、不同分辨率显⽰不同宽度样式案例1、DIVCSS⼩案例描述我们⾸先设置⼀个DIV盒⼦CSS命名为“.abc”，设置其⾼度为300px，css边框为⿊⾊；以及设置margin:0 auto布局居中。

预先设置这两个样式是为了便于观察。

我们通过⼿动拖拽浏览器显⽰宽度，然后观察此盒⼦宽度变化情况，当浏览器宽度调节到宽度不⼤于500px时，对应此盒⼦宽度显⽰100px；调节浏览器宽度不⼤于901px时，显⽰“.abc”对应盒⼦宽度显⽰200px;当调节浏览器宽度⼤于1201px时，盒⼦对象宽度显⽰1200px；当⼩于1200px时候显⽰宽度为900px。

2、CSS代码复制代码代码如下:.abc{ height:300px; border:1px solid #000; margin:0 auto}@media screen and (min-width: 1201px) {.abc {width: 1200px}}/* css注释：设置了浏览器宽度不⼩于1201px时 abc 显⽰1200px宽度 */@media screen and (max-width: 1200px) {.abc {width: 900px}}/* 设置了浏览器宽度不⼤于1200px时 abc 显⽰900px宽度 */@media screen and (max-width: 901px) {.abc {width: 200px;}}/* 设置了浏览器宽度不⼤于901px时 abc 显⽰200px宽度 */@media screen and (max-width: 500px) {.abc {width: 100px;}}/* 设置了浏览器宽度不⼤于500px时 abc 显⽰100px宽度 */需要注意是CSS代码顺序，由⼤到⼩排版CSS（判断浏览器宽度越⼤越放前），这样是因为逻辑关系，@media 判断CSS排错将导致判断失效。

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

CSS3 Media Queries 片段Responsive设计在现代Web设计中可谓是越来越流行，但很同学们并未理解其真正的设计概念，往往把Responsive视为一种自适应布局。

当然有很多同学也在尝试动写Responsive的案例，但如何取其断点左右纠结，如何设置哪几个断点？又从何入手？Responsive中的断点都依赖于CSS3的Media Queries来决断。

曾在CSS3 Media Queries模板、使用em单位创建CSS3的Media Queries 和iPads和iPones的Media Queries有过这方面的介绍。

今天特意根据一些Responsive框架整理了一些常见的Media Queries片段，以供大家参考：CSS3 Media Queries片段在这里主要分成三类：移动端、PC端以及一些常见的响应式框架的Media Queries片段。

移动端Media Queries片段iPhone5@media screen and (device-aspect-ratio:40/71) {}或者：@media screen and (device-width:320px) and (device-height:568px) and (-webkit-device-pixel-ratio:2){}iPhone 5 In Portrait & Landscape@media only screen and (min-device-width :320px) and(max-device-width :568px){ //CSS Style }iPhone 5 In Landscape@media only screen and (min-device-width :320px) and(max-device-width :568px) and (orientation : landscape){ //CSS Style }iPhone 5 In Portrait@media only screen and (min-device-width :320px) and(max-device-width :568px) and (orientation : portrait){ //CSS Style }iPone4@media only screen and (-webkit-min-device-pixel-ratio :1.5), only screen and (min-device-pixel-ratio :1.5) {}iPhone 3G@media screen and (device-width:320px) and (device-height:480px) and (-webkit-device-pixel-ratio:1){}iPhone/*Landscape*/@media screen and (max-device-width: 480px) {} /*Portrait*/@media screen and (max-device-width: 320px) {}Blackberry Torch@media screen and (max-device-width:480px) {}Samsung S3@media only screen and (-webkit-device-pixel-ratio:2) {}Google Nexus 7@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) {}Samsung Galaxy S3@media only screen and (-webkit-device-pixel-ratio:2) {}Samsung Galaxy S2@media screen and (device-width:320px) and (device-height:533px) and (-webkit-device-pixel-ratio:1.5) {}Galaxy Tab 10.1/*Landscape*/@media (max-device-width: 1280px) and (orientation: landscape) {} /*Portrait*/@media (max-device-width: 800px) and (orientation: portrait) {}iPad In Portrait & Landscape@media only screen and (min-device-width :768px) and(max-device-width :1024px){ //CSS Styles }iPad In Landscape@media only screen and (min-device-width :768px) and(max-device-width :1024px) and (orientation : landscape){ //CSS Styles }iPad In Portrait@media only screen and (min-device-width :768px) and(max-device-width :1024px) and (orientation : portrait){ //CSS Styles }Retina iPad In Portrait & Landscape@media only screen and (min-device-width :768px) and(max-device-width :1024px) and (-webkit-min-device-pixel-ratio: 2){ //CSS Styles }Retina iPad in landscape@media only screen and (min-device-width :768px) and(max-device-width :1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio:2){ //CSS Styles }Retina iPad in portrait@media only screen and (min-device-width :768px) and(max-device-width :1024px) and (orientation : portrait) and(-webkit-min-device-pixel-ratio:2){ //CSS Styles }iPad Mini In Portrait & Landscape@media only screen and (min-device-width :768px) and(max-device-width :1024px) and (-webkit-min-device-pixel-ratio: 1){ //CSS Style }iPad Mini In Landscape@media only screen and (min-device-width :768px) and (max-device-width :1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio:1){ //CSS Style }iPad Mini In Portrait@media only screen and (min-device-width :768px) and (max-device-width :1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio:1) { //CSS Style }桌面端320px@media screen and (max-width:320px) {}640px@media screen and (max-width:640px) {}800px@media screen and (max-width:800px) {}1024px@media screen and (max-width:1024px) {}1028px@media screen and (max-width:1028px) {}除了上面的常见Media Queries片段之外，下面的网站还提供了一些其他的片段：框架Media Queries片段Boilerplate/*URL:/*//* Smartphones (portrait and landscape) ----------- */@media only screen and (min-width : 320px) and (max-width : 480px) { /* Styles */ } /*Smartphones (landscape) ----------- */@media only screen and (min-width : 321px) { /* Styles */ } /* Smartphones (portrait)----------- */@media only screen and (max-width : 320px) { /* Styles */ } /* iPads (portrait and landscape) ----------- */@media only screen and (min-width : 768px) and (max-width : 1024px) { /* Styles */ } /* iPads (landscape) ----------- */@media only screen and (min-width : 768px) and (max-width : 1024px) and (orientation : landscape) { /* Styles */ } /* iPads (portrait) ----------- */@media only screen and (min-width : 768px) and (max-width : 1024px) and (orientation : portrait) { /* Styles */ } /* Desktops and laptops----------- */@media only screen and (min-width : 1224px) { /* Styles */ } /* Large screens ----------- */@media only screen and(min-width : 1824px) { /* Styles */ } /* iPhone 4 ----------- */@media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) { /* Styles */ }Bootstrap的Media Queries/*URL:/bootstrap*//* Large desktop */ @media (min-width: 1200px) { ... } /* Portrait tablet to landscape and desktop */@media (min-width: 768px) and (max-width: 979px) { ... } /* Landscape phone to portrait tablet */@media (max-width: 767px) { ... } /* Landscape phones and down */ @media (max-width: 480px) { ... }Foundation的Media Queries/*URL:/*//* We use this media query to add styles to any device that supports media queries */ @media only screen { } /* Used to alter styles for screens at least 768px wide. This is where the grid changes. */@media only screen and (min-width: 768px) {} /* Used to alter styles for screens at least 1280px wide. */@media only screen and (min-width: 1280px) {} /* Used to alter styles for screens at least 1440px wide. */@media only screen and (min-width: 1440px) {} /* Apply styles to screens in landscape orientation */@media only screen and (orientation: landscape) {} /* Apply styles to screens in portrait orientation */@media only screen and (orientation: portrait) {}Skeleton的Media Queries/*URL:*//* Smaller than standard 960 (devices and browsers) */@media only screen and (max-width: 959px) {} /* Tablet Portrait size to standard 960 (devices and browsers) */@media only screen and (min-width: 768px) and (max-width:959px) {} /* All Mobile Sizes (devices and browser) */@media only screen and (max-width: 767px) {} /* Mobile Landscape Size to Tablet Portrait (devices and browsers) */@media only screen and (min-width: 480px) and (max-width:767px) {} /* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */@media only screen and (max-width: 479px) {}FRAMELESS的Media Queries/*URL:/*/@media screen and (max-width: 16.875em){}@media screen and (min-width: 32.5em) and (max-width:37.4375em), screen and (min-width: 45em) and (max-width: 56.9375em), screen and (min-width: 77.5em) and(max-width: 102.4375em), screen and (min-width: 135em){}@media screen and (min-width: 102.5em) and (max-width: 117.9375em), screen and (min-width: 150em){}@media screen and (min-width: 15em){}@media screen and (min-width: 30em){}@media screen and (min-width: 37.5em){}@media screen and (min-width: 57em){}@media screen and (min-width: 57em) and (max-width: 117.9375em){} @media screen and (min-width: 118em){}Susy的Media Queries/*URL:/*/@media (min-width: 29em) {}@media (min-width: 30em) and (max-width: 60em) {}@media (min-width: 119em) {}@media (min-width: 33.75em) and (max-width: 67.5em) {}@media (min-width: 33.75em) and (max-width: 67.5em) {}Less Framework 4/*URL:/*/@media only screen and (min-width: 768px) and (max-width:991px) {} /* Mobile Layout: 320px (20em).*/@media only screen and (max-width: 767px) {} /*Wide Mobile Layout: 480px (30em)*/@media only screen and (min-width: 480px) and (max-width: 767px) {}Golden Grid System的Media Queries/*URL:/*/ /*@media screen and (min-width: 640px) */@media screen and (min-width: 40em) {} /*@media screen and (min-width: 720px) */@media screen and (min-width: 45em) {} /*@media screen and (min-width: 888px) */@media screen and (min-width: 55.5em) {} /*@media screen and (min-width: 984px) */@media screen and (min-width: 61.5em) {} /*@media screen and (min-width: 1200px) */@media screen and (min-width: 75em) {} /*@media screen and (min-width: 1392px) */@media screen and (min-width: 87em) {} /*@media screen and (min-width: 1680px) */@media screen and (min-width: 105em) {} /*@media screen and (min-width: 1872px) */@media screen and (min-width: 117em) {} /*@media screen and (min-width: 2080px) */@media screen and (min-width: 130em) {}Fluid baseline的Media Queries/*URL:/*/ /* MOBILE PORTRAIT */@media only screen and (min-width: 320px) {} /* MOBILE LANDSCAPE */@media only screen and (min-width: 480px) {} /* SMALL TABLET */@media only screen and (min-width: 600px) {} /*TABLET/NETBOOK */@media only screen and (min-width: 768px) {} /* LANDSCAPE TABLET/NETBOOK/LAPTOP */@media only screen and (min-width: 1024px) {}@media only screen and (min-width: 1280px) {} /* WIDESCREEN */ /* Increased body size for legibility */@media only screen and (min-width: 1400px) {}320andUP/*URL:/projects/320andup*/@media only screen and (min-width: 480px) { /* 480 */ }@media only screen and (min-width: 600px) { /* 600 */ }@media only screen and (min-width: 768px) { /* 768*/ }@media only screen and (min-width: 992px) { /* 992*/ }@media only screen and (min-width: 1382px) { /* 1382 */} @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { /* 2x*/ }Gridless/* URL:/gridless-boilerplate/ */@media only screen and (min-width: 480px) { /* Wide mobile (480px+) styles go here */ }@media only screen and (min-width: 768px) { /*Tablets/netbooks (768px+) styles go here */ }@media only screen and (min-width: 1024px) { /* Desktops (1024px+) styles go here */ }TotanTHEMES/*URL:/*//* Smaller than standard 960 (devices and browsers) */@media only screen and (max-width: 959px) {} /* Tablet Portrait size to standard 960 (devices and browsers) */@media only screen and (min-width: 768px) and (max-width: 989px) {} /* All Mobile Sizes (devices and browser) */ @media only screen and (max-width: 767px) {} /* Mobile Landscape Size to Tablet Portrait (devices and browsers) */@media only screen and (min-width: 480px) and (max-width:767px) {} /* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */@media only screen and (max-width: 479px) {}Responsive Grid System/*URL:http://responsive.gs/*/@media (max-width: 480px) {}@media (min-width: 480px) and (max-width: 768px) {}@media (min-width: 768px) {}@media (min-width: 1024px) {}@media (min-width: 1200px) {}本文搜集的是Media Queries在各种设备下的代码片段，希望这些片段能帮大家更好的理解Responsive断点的设置。