1.Browser-size specific CSS

@media screen and (max/min-width:1000px){}

2.Orientation-specific CSS?

@media screen and(orientation landscape/portrait){}

3.Divice-specific CSS

@media handheld ——not be used widely

@media screen and (min-device-height: 768px) and (max-device-width: 1024px) {}
@media (device-pixel-ratio: 2) {}//iphone4 2 physical pixels to every CSS pixel
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
@media screen and (resolution: 326dpi(分辨率)) { /* */ }

@media screen and (min-resolution: 96dpi) { /* */ }

@media screen and (device-aspect-ratio: 16/9) { /* */ }





【CSS3】Advanced11:Media Queries的更多相关文章

  1. CSS3学习教程:Media Queries详解

    说起CSS3的新特性,就不得不提到 Media Queries . Media Queries 的引入,其作用就是允许添加表达式用以确定媒体的情况,以此来应用不同的样式表.换句话说,其允许我们在不改变 ...

  2. 【CSS3】Advanced5:At Rules:@import, @media, and @font-face

    1.@import bolt another stylesheet onto your existing one. @import url(**.css); must be placed at the ...

  3. 【CSS3】Advanced3:Universal, Child, and Adjacent Selectors

    1.Universal selectors eg:#target*{ } 2.Child selectors < something immediately nested within some ...

  4. 【CSS3】Advanced10:Gradient

    1.background:linear-gradient(20deg/(to) bottom right,orange,red,hsl(60,100%,50%)); 2.-webkit-chrome/ ...

  5. 【CSS3】Advanced9:Transformation

    1.transform:rotate(-10deg) skew(20deg,10deg) scaling(2/1,2) translate/移动(100px,200px) 2.transform:ma ...

  6. 【CSS3】Advanced8:CSS Backgrounds: Multiples, Size, and Origin

    1.Multiples,Size,and Origin eg:background-image:url(bg.png),url(bullet.png) 0 50% no-repeat,url(arro ...

  7. 【CSS3】Advanced7:CSS Transitions

    1.animate parts of your design without the need for the likes of JavaScrip 2.allowing smooth animati ...

  8. 【CSS3】Advanced6:Attribute Selectors

    1.with the attribute abbr[title]{color:red} 2.with the attribute and it's value input[type=text][dis ...

  9. 【CSS3】Advanced4:Advanced Colors

    1.rgba(red,green,blue,alpha(不透明度0.0(完全透明)与 1.0(完全不透明)) 2.HSLa(hue(色调 0red 120green 240blue),saturati ...

随机推荐

  1. 为什么a标签中使用img后的高度多了几个像素?

    a元素下有一个匿名文本,这个文本外有一个匿名行级盒子,它有的默认vertical-align是baseline的,而且往往因为上文line-height的影响,使它有个line-height,从而使其 ...

  2. oracle11g 表或视图连接时有可能发生的问题

    ---------背景--------- oracle11g 有2个视图,都有一个id字段,且id字段的值相同 例如:id都有 A01 ,A02 ,A03 --------问题--------- 把2 ...

  3. python27读书笔记0.3

    #-*- coding:utf-8 -*- ##D.has_key(k): A predicate that returns True if D has a key k.##D.items(): Re ...

  4. CGAL 介绍

    CGAL组织 内核 数值健壮 基础库 扩展性 2.4 命名约定 Naming In order to make it easier to remember what kind of entity a ...

  5. Linux-ubuntu

    在VMware安装ubuntu时磁盘分配如下: /boot 100MB / 2G swap 512MB /home 5G /var 1G /usr 5G+. 设置root权限:sudo passwd ...

  6. 创建共享内存函数CreateFileMapping()详解

    测试创建和打开文件映射的时候老是得到"句柄无效"的错误, 仔细看了MSDN以后才发觉是函数认识不透, 这里把相关的解释翻译出来 HANDLE CreateFileMapping( ...

  7. js格式化数字,金额按千位逗号分隔,负号用括号

    // 返回数字 function removeFormatMoney(s) { s = s.toString().replace("(","-").replac ...

  8. 简单方法打包.net程序集脱离framework

    最近业余捣鼓monogame,自然而然就关注到了.net程序脱离framework发布的问题上了, 度娘,谷歌娘 都经过一番查找,无非分为如下几类方法: 1.直接使用mono运行时,附带 bin.li ...

  9. jquery怎么实现左右滑动的问题

    var len = $("#b span").length, curindex = 0; $("#leftRun").click(function(){ if( ...

  10. [JavaScript] 怎么使用JS禁止复制粘贴

    1. 将彻底屏蔽鼠标右键,其实是禁止快捷菜单,因为不光右键可以弹出这个菜单,键盘上空格键右边的windows键也可以激活这个快捷菜单 <table border oncontextmenu=re ...