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. PS初始化配置

    前端工程师在使用photoshop之前需要进行一些初始化设置,主要包括以下3个 [1]首选项设置 <ctrl+k> 编辑 > 首选项 > 单位与标尺 > 把标尺和文字的单 ...

  2. hggroup和adress

    hggroup通常放在标签内部,不过不做强制要求! ​adress 通常用于作者的联系信息.比如名字,Email,电话,地址.标签内字体显示斜体. ​ 与 标签的比较:比div简洁,更少的用到id或c ...

  3. Sqlserver循环嵌套

    1.游标的状态,游标的开启游标的选择都是需要注意的. USE [ccnu] GO /****** Object: StoredProcedure [dbo].[P_ADD_DATA_XSBLHYCQK ...

  4. 我的PHP之旅--数组的认识(初级)

    数组 PHP的数组与swift有些许不同,分为3类(初级,以后会涉及到多维数组和数组指针等). 枚举数组 关联数组 混合数组 枚举数组 枚举数组跟swift中的数组差不多: <?php $arr ...

  5. HTML5下通过response header解决跨域AJAX cookie的问题

    ajax: 通过给Response Header添加Access-Control-Allow-Origin:*  来解决跨域请求,*代表允许所有的跨域请求,或者把*换成指定的域名 cookie: 服务 ...

  6. HDU 1560 DNA sequence (IDA* 迭代加深 搜索)

    题目地址:http://acm.hdu.edu.cn/showproblem.php?pid=1560 BFS题解:http://www.cnblogs.com/crazyapple/p/321810 ...

  7. 服务器环境搭建系列(四)-mysql篇

    1.按照上一篇服务器环境搭建系列(三)-JDK篇中的方法检查系统是否已经预装Mysql并卸载. 2.下载mysql,这里是MySQL-server-5.5.25-1.linux2.6.x86_64.r ...

  8. Java编程思想(2)之一切皆对象

  9. 0xc0000428 winload.exe无法验证其数字签名的解决方法

    只要把windows/system32/boot中的winload.exe复制到windows/system32中替换即可!! 只有启动画面会有变化,可以使用魔方等软件进行修复,恢复到之前的样子

  10. 安卓接入ShareSDK问题

    平台图标错乱原因  导出的jar包 包括了 style.class R$attr.class MainActivity.class R$color.class R$drawable.class R$s ...