Using CSS media queries allows you to design responsive layout in your web apps and website. We will go over the media query basics in this lesson.

body{
background-color: limegreen;
} /*
@media not|only mediatype and (expression)
CSS-Code
*/ @media (min-width: 600px){
body{
background-color: pink;
}
} @media (max-width: 300px){
body{
background-color: red;
}
} @media (min-width: 400px) and (max-width: 500px){
body{
background-color: yellow;
color: black;
}
}

[CSS3] CSS Media Queries的更多相关文章

  1. 移动设备上的媒体查询 CSS media queries for mobile device

    CSS的媒体查询虽然在传统的互联网页面可能发挥的余地不是很大,但是自从苹果和安卓的风靡之后,移动平台上的web开发变得越来越流行了,同时CSS的媒体查询可谓派上了大用场了. 以下为翻译内容,原文来自这 ...

  2. css:Media Queries: How to target desktop, tablet and mobile?

    <!doctype html> <html> <head> <meta name="viewport" content="wid ...

  3. CSS media queries

    最近在做一些页面打印时的特殊处理接触到了media queries,想系统学习一下,在MOZILLA DEVELOPER NETWORK看到一篇文章讲的很不错,结合自己的使用总结一下. CSS2/me ...

  4. css3之Media Queries 媒体查询

    一.初步了解 Media Queries是CSS3新增加的一个模块功能,其最大的特点就是通过css3来查询媒体,然后调用对应的样式. 了解Media Queries之前需要了解媒体类型以及媒体特性: ...

  5. CSS media queries 媒体查询

    最近在做一些页面打印时的特殊处理接触到了media queries,想系统学习一下,在MOZILLA DEVELOPER NETWORK看到一篇文章讲的很不错,结合自己的使用总结一下. CSS2/me ...

  6. 实践 HTML5 的 CSS3 Media Queries

    先来介绍下 media,确切的说应该是 CSS media queries(CSS 媒体查询),媒体查询包含了一个媒体类型和至少一个使用如宽度.高度和颜色等媒体属性来限制样式表范围的表达式.CSS3 ...

  7. CSS3 Media Queries 实现响应式设计

    在 CSS2 中,你可以为不同的媒介设备(如屏幕.打印机)指定专用的样式表,而现在借助 CSS3 的 Media Queries 特性,可以更为有效的实现这个功能.你可以为媒介类型添加某些条件,检测设 ...

  8. 【CSS3 入门教程系列】CSS3 Media Queries 实现响应式设计

    在 CSS2 中,你可以为不同的媒介设备(如屏幕.打印机)指定专用的样式表,而现在借助 CSS3 的 Media Queries 特性,可以更为有效的实现这个功能.你可以为媒介类型添加某些条件,检测设 ...

  9. 基于 CSS3 Media Queries 的 HTML5 应用

    先来介绍下 media,确切的说应该是 CSS media queries(CSS 媒体查询),媒体查询包含了一个媒体类型和至少一个使用如宽度.高度和颜色等媒体属性来限制样式表范围的表达式.CSS3 ...

随机推荐

  1. oracle特殊字符的ascii值

  2. RB1001: IE6 IE7 IE8(Q) 负边距 (margin) 导致元素溢出 hasLayout 容器时显示异常

    标准参考 根据W3C CSS2.1规范第8.3节中的描述,边距属性设置了一个框的边距区的宽度.'margin' 缩写属性设置所有四边的边距,而其它的边距属性( 'margin-top' ,'margi ...

  3. tomcat启动报错:Neither the JAVA_HOME nor the JRE_HOME environment variable is defined At least one of these environment variable

    linux 下 启动tomcat 报: Neither the JAVA_HOME nor the JRE_HOME environment variable is definedAt least o ...

  4. How to Enable or Disable a cell in DataGridview Row ?

    Following link http://msdn.microsoft.com/en-us/library/ms171619.aspxhttp://windowsclient.net/blogs/f ...

  5. 原创 HTML5:JS操作SVG实践体会

    在工业信息化系统里,常常需要动态呈现系统的数据在一张示意图里,用于展现系统状态,分析结果等.这样用JavaScript操作svg 元素就有现实意义.本人近期做了一些实践,现分享一下. 需求: 你下面这 ...

  6. 【java】基于Tomcat的WebSocket转帖 + 自己理解

    网址:http://redstarofsleep.iteye.com/blog/1488639 原帖时间是2012-5-8,自己书写时间是2013年6月21日10:39:06 Java代码 packa ...

  7. 【Maven实战】Maven开发环境的搭建和案例展示

    1.首先到www.apache.org中下载maven,得到一个apache-maven-3.1.0-bin.zip的压缩包. 2.将此压缩包解压,这里解压到D:\docs中,然后找到maven的bi ...

  8. 常用的JQuery UI框架

    http://www.ligerui.com/ http://www.jeasyui.com/index.php http://www.jqwidgets.com/

  9. LED驅動芯片 兩種恒流控制方式

    下面要說的是,兩種恒流控制模式的開關電源,從而產生兩種做法.這兩種做法無論是原理,還是器件應用,還是性能差別,相當都較大.     首先說原理.第一種以現在恒流型LED專用IC為代表,主要如9910系 ...

  10. 【HDOJ】2416 Treasure of the Chimp Island

    bfs().题目的数据乱码.应该如下: *****#********* *.......$...* *..***.......* *....*****..* *....******37A *****. ...