zoukankan      html  css  js  c++  java
  • 转: CSS3 @media 用法总结

    一、首先是<meta>标签

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    这段代码的几个参数解释:
    width = device-width:宽度等于当前设备的宽度
    initial-scale:初始的缩放比例(默认设置为1.0)
    minimum-scale:允许用户缩放到的最小比例(默认设置为1.0)
    maximum-scale:允许用户缩放到的最大比例(默认设置为1.0)
    user-scalable:用户是否可以手动缩放(默认设置为no,因为我们不希望用户放大缩小页面)

    二、<head>标签中引入(CSS2 media)

    其实并不是只有CSS3才支持Media的用法,早在CSS2开始就已经支持Media,具体用法,就是在HTML页面的head标签中插入如下代码:

    例如我们想知道现在的移动设备是不是纵向放置的显示屏,可以这样写:

    <link rel="stylesheet" type="text/css" media="screen and (orientation:portrait)" ;href="style.css">

    页面宽度小于960的执行指定的样式文件:

    <link rel="stylesheet" type="text/css" media="screen and (max-960px)" href="style.css">

    既然CSS2可以实现CSS的这个效果为什么不用这个方法呢,很多人应该会问,但是上面这个方法,最大的弊端是他会增加页面http的请求次数,

    增加了页面负担,我们用CSS3把样式都写在一个文件里面才是最佳的方法。

    下面来解释一下遇到冲突时的机制:

    <link rel="stylesheet" href="styleA.css" media="screen and (min- 800px)">  
    <link rel="stylesheet" href="styleB.css" media="screen and (min- 600px) and (max- 800px)">  
    <link rel="stylesheet" href="styleC.css" media="screen and (max- 600px)">
    上面将设备分成3种,分别是宽度大于800px时,应用 styleA ,宽度在600px到800px之间时应用 styleB ,以及宽度小于600px时应用 styleC 。
    那假如宽度正好等于800px时该应用那个样式?是 styleB,因为前两条表达式都成立,按CSS默认优先级规则后者覆盖了前者。

    因此,为了避免冲突,这个例子正常情况应该这样写:
    <link rel="stylesheet" href="styleA.css" media="screen">  
    <link rel="stylesheet" href="styleB.css" media="screen and (max- 800px)">  
    <link rel="stylesheet" href="styleC.css" media="screen and (max- 600px)">

    三、回归CSS3 @media

    上面我们大概讲了下CSS2的媒体查询用法,现在我们重新回到CSS3的媒体查询,在第一段代码上面我用的是小于960px的尺寸的写法,

    那现在我们来实现等于960px尺寸的代码,以下代码需要写在style标签或者css文件中:

    @media screen and (max-device-960px){
        body{background:red;}
    }

    然后就是当浏览器尺寸大于960px时候的代码了:

    @media screen and (min-960px){ 
        body{background:orange;}
    }

    我们还可以混合使用上面的用法:

    @media screen and (min-960px) and (max-1200px){
        body{background:yellow;}
    }

    上面的这段代码的意思是当页面宽度大于960px小于1200px的时候执行下面的CSS。

    四、Media所有参数汇总

    以上就是我们最常需要用到的媒体查询器的三个特性,大于,等于,小于的写法。媒体查询器的全部功能肯定不止这三个功能,

    下面是我总结的它的一些参数用法解释:

      浏览器可视宽度。
      height:浏览器可视高度。
      device-设备屏幕的宽度。
      device-height:设备屏幕的高度。
      orientation:检测设备目前处于横向还是纵向状态。
      aspect-ratio:检测浏览器可视宽度和高度的比例。(例如:aspect-ratio:16/9)
      device-aspect-ratio:检测设备的宽度和高度的比例。
      color:检测颜色的位数。(例如:min-color:32就会检测设备是否拥有32位颜色)
      color-index:检查设备颜色索引表中的颜色,他的值不能是负数。
      monochrome:检测单色楨缓冲区域中的每个像素的位数。(这个太高级,估计咱很少会用的到)
      resolution:检测屏幕或打印机的分辨率。(例如:min-resolution:300dpi或min-resolution:118dpcm)。
      grid:检测输出的设备是网格的还是位图设备。
     
    (max-599px) 
    (min-600px) 
    (orientation:portrait) 竖屏
    (orientation:landscape)        横屏
    (-webkit-min-device-pixel-ratio: 2) 像素比

    五、媒体类型

      1.all 所有媒体
      2.braille 盲文触觉设备
      3.embossed 盲文打印机
      4.print 手持设备
      5.projection 打印预览
      6.screen 彩屏设备
      7.speech '听觉'类似的媒体类型
      8.tty 不适用像素的设备
      9.tv 电视

    六、关键字

      1.and
      2.not not关键字是用来排除某种制定的媒体类型
      3.only only用来定某种特定的媒体类型
      -很多时候是用来对那些不支持媒体特性但却支持媒体类型的设备

    七、浏览器支持情况

      IE8-
      IE9+
      Chrome 5+
      Opera 10+
      Firefox 3.6+<
      Safari 4+

    八、常用的几种屏幕宽度设定:

    @media screen and (min- 1200px) {
            css-code;
    }
    @media screen and(min- 960px) and (max- 1199px) {
            css-code;
    }
    @media screen and(min- 768px) and (max- 959px) {
            css-code;
    }
    @media screen and(min- 480px) and (max- 767px) {
            css-code;
    }
    @media screen and (max- 479px) {
            css-code;
    }

    原文: https://www.jianshu.com/p/b8f375b52a61

      

  • 相关阅读:
    HDU4366 Successor 线段树+预处理
    POJ2823 Sliding Window 单调队列
    HDU寻找最大值 递推求连续区间
    UVA846 Steps 二分查找
    HDU3415 Max Sum of MaxKsubsequence 单调队列
    HDU时间挑战 树状数组
    UVA10168 Summation of Four Primes 哥德巴赫猜想
    UESTC我要长高 DP优化
    HDUChess 递推
    HDU4362 Dragon Ball DP+优化
  • 原文地址:https://www.cnblogs.com/wind-wang/p/9696049.html
Copyright © 2011-2022 走看看