关于获取设备的大小问题:

/* 本条为CSS2部分,IE8及以下只支持本条 */
@media screen{
  body{color:#f00;}
}
/* 下列为CSS3部分 */
@media screen and (min-width:960px){
body{background:#999;}
}
@media screen and (device-width:1024px){
.test{display:block;}
}
@media screen and (width:1024px){
.test2{display:block;}
}

//书写格式
@media:<media_query_list>

<media_query_list>:[<media_query>[',' <media_query>]*]?

<media_query>:[only | not]? <media_type> [and <expression>]* | <expression> [and <expression>]*

<expression>:'('<media_feature>[:<value>]?')'

media的更多相关文章

  1. Intel Media SDK H264 encoder GOP setting

    1 I帧,P帧,B帧,IDR帧,NAL单元 I frame:帧内编码帧,又称intra picture,I 帧通常是每个 GOP(MPEG 所使用的一种视频压缩技术)的第一个帧,经过适度地压缩,做为随 ...

  2. PhoneGap/cordvoa如何添加Media插件

    phonegap由2.7升级到3.7之前,只要引入一个cordova.js,就可以了.现在由于所用的插件,都需要用模块的形式进行按需加载,自然就没有以前那么安逸了. 例如,如果要在安卓平台添加一个音频 ...

  3. 实践 HTML5 的 CSS3 Media Queries

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

  4. Media Queries

    @media screen and (max-device-width: 1920px) and (min-device-width: 1920px) 指定1920分辨率的样式,使用device-wi ...

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

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

  6. CSS3 media 入门

    css3 media  严格来说是自适应布局 对不同的屏幕(正确的说应该是) 写不同的css样式.而流式布局 则才算是响应式布局. css3 media  语法: @media mediatype a ...

  7. 关于媒体查询 @Media Screen 与响应式

    其实CSS2中已经有了媒体查询的概念,但是CSS3中媒体查询功能更加的强大! 首先,我们来看一个小例子 设置媒体查询的 Max Width ,改变窗口大小到600px的时候就会触发一下代码: @med ...

  8. 利用@media screen实现网页布局的自适应

    利用@media screen实现网页布局的自适应 优点:无需插件和手机主题,对移动设备友好,能够适应各种窗口大小.只需在CSS中添加@media screen属性,根据浏览器宽度判断并输出不同的长宽 ...

  9. 一种让 IE6/7/8 支持 media query 响应式设计的方法

    在不同的浏览器宽度下使用不同的 CSS 声明,常见的方案是使用 media query,但这个方案不支持 IE9 以下浏览器. 国外比较流行的 UI 框架 bootstrap v3 版本中使用 med ...

  10. CSS3 Media Queries实现响应式布局

    概念我就不在这里写啦.大家可以看看以下网页: http://www.runoob.com/cssref/css3-pr-mediaquery.html http://www.w3cplus.com/c ...

随机推荐

  1. Python脚本运行出现语法错误:IndentationError: unindent does not match any outer indentation level

    运行环境是win7 x64 sublime text2,百度发现是对齐问题. 具体来说是由于有的地方使用了4个空格,有的地方使用了tab键. 代码区直接全选就会看到有的地方是四个点有个地方是一个横线, ...

  2. 【Alpha版本】 第五天 11.11

    一.站立式会议照片: 二.项目燃尽图: 三.项目进展: 成 员 昨天完成任务 今天完成任务 周末+下周一要做任务 问题困难 心得体会 胡泽善 完成了账户信息修改界面 完成管理员的三大界面框架.完成管理 ...

  3. Hierarchical Softmax

    When predicting over large vocabulary, softmax becomes one of the expensive computation part. There ...

  4. linux 基础 shell脚本命令

    #########shell脚本命令#### 1.diff diff file file1 ####比较两个文件的不同 -c ####显示周围的行 -u ####按照一格式统一输出生成补丁 -r ## ...

  5. BZOJ3813: 奇数国

    传送门 欧拉函数+线段树 因为只有60个素数,所以把状态压成long long的形式.用线段树维护区间和和区间和中有多少个质数.然后xjb搞搞就行了,具体参见代码. //BZOJ 3813 //by ...

  6. HTML中<meta>标签如何正确使用

    HTML中<meta>标签如何正确使用 如果我们在浏览器中按下F12或者Ctrl+shift+J,便可以打开开发者工具,在element中即可看到<head>元素中有不少< ...

  7. BZOJ3557: [Ctsc2014]随机数

    orz神犇们 clj(pw CCfCtsC2014) zyh cjj pyx vfk 吐槽一句对拍的时候发现这几份代码输出不一样. 每个数看成模2意义下的多项式: \[M_k\equiv x^kM_0 ...

  8. javascript之简单的选择排序法

    基本思想: 比对数组中元素,相等者输出元素在数组的下标,否则就输出没找到! 代码如下: function Orderseach(array,findVal){ var temp = false; // ...

  9. python学习笔记-(七)python基础--集合、文件操作&函数

    本节内容 1.集合操作 2.文件操作 3.字符编码与转码 4.函数操作 1.集合操作 集合是一个无序的.不重复的数据组合: 1.1 常用操作 它的作用是: 1)自动去重:列表变成集合,自动去重: &g ...

  10. WinForm------TreeList实现鼠标经过节点背景色改变

    转载: http://www.cnblogs.com/zfanlong1314/archive/2012/06/26/2564124.html