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. MySQL基础学习之视图

    创建新的视图 CREATE VIEW 视图名  AS SELECT  属性,属性1,属性2  FROM 表名 创建新的视图并指定数据名 CREATE VIEW 视图名(新属性,新属性1,新属性2)   ...

  2. 将ecshop中的session机制重写,从DB移植到Memcache中去

    <?php if (!defined('IN_ECS')) { die('Hacking attempt'); } /*------------------------------------- ...

  3. Python之路----文件操作

    文件操作 1.能调用方法的一定是对象,比如数值.字符串.列表.元组.字典,甚至文件也是对象,Python中一切皆为对象. str1 = 'hello' str2 = 'world' str3 = ' ...

  4. python log 层次结构

    文件结构 - run.py - b -- __init__.py run.py import logging import b log = logging.getLogger("" ...

  5. Python守护进程(多线程开发)

    本段代码主要作用是httpsqs队列的消费端守护进程,从httpsqs中取出数据,放入mongodb #!/usr/bin/python import sys,time,json,logging im ...

  6. 泛型转Datatable

    //自定义扩展方法 public static class ExtMethod { //泛型转为DataTable public static DataTable AsDataTable<T&g ...

  7. 【Git 】$ ./gradlew idea 构建一个idea的项目

    Welcome to Git (version 1.9.5-preview20150319) Run 'git help git' to display the help index.Run 'git ...

  8. 【welcome-file-list】让默认页生效

    <welcome-file-list> <welcome-file>404.html</welcome-file> <welcome-file>/vie ...

  9. 肾果手机App Store切换区域(无需Visa或者万事达)

    8月份在肾果官网买了个touch6,有时候需要换区去墙外下载app,然而一个个国家都要输入Visa或者万事达卡...今天终于找到一个不用输入信用卡号的区域:Canada!!! 办法(适用于8.X,7. ...

  10. BZOJ 4004 [JLOI 2015] 装备购买 解题报告

    哎这个题 WA 了无数遍...果然人太弱... 首先我们把这些装备按照花费从小到大排序,然后依次考虑是否能买这个装备. 至于这样为什么是对的,好像有一个叫拟阵的东西可以证明,然而我不会.TATQAQ ...