zoukankan      html  css  js  c++  java
  • 媒体查询

    媒体查询

    清单 1. 使用媒体类型
    <link rel="stylesheet" type="text/css" href="site.css" media="screen" />
    清单 2. 媒体查询规则
    1
    @media all and (min- 800px) { ... }
    清单 3. 简写语法
    1
    @media (min-800px) { ... }
    清单 4. 复杂表达式
    1
    @media (min-800px) and (max-1200px) { ... }
    清单 5. and 条件
    1
    @media (min-800px) and (max-1200px) and (orientation:portrait) { ... }
    清单 6. or 关键词
    1
    @media (min-800px) or (orientation:portrait) { ... }
    清单 7. 使用 not
    1
    @media (not min-800px) { ... }
    清单 8. orientation 媒体查询
    1
    @media (orientation:portrait) { ... }
    清单 9. 高度和宽度媒体查询
    1
    @media (min-800px) and (min-height:400px) { ... }


    常见媒体查询
    因为 Apple 首次向市场推出了用户智能手机和平板电脑产品,所以下列大多数媒体查询都是基于这些型号的设备。
    如果目标是横向模式智能手机,则使用: @media (min- 321px) { ... }
    如果目标是纵向模式智能手机,则使用: @media (max- 320px) { ... }
    如果目标是横向模式 Apple iPad,则使用: @media (orientation: landscape) { ... }
    如果目标是纵向模式 iPad,则使用: @media (orientation: portrait) { ... }
    您可能已经注意到了,iPad 上使用的是 orientation 媒体特性,而 width 用于 Apple iPhone 之上。主要是因为 iPhone 不支持 orientation 媒体特性。您必须使用 width 模拟这些方向断点。

    <<愿你被这世界温柔以待...>>
  • 相关阅读:
    poj_2352树状数组
    poj_2187凸包,暴力解法
    zoj_3735,dp,长沙站j题
    hdu_1698线段树成段更新
    poj_2828线段树,逆序插入
    poj_3371
    poj_3071概率dp
    hdu_2191多重背包
    poj_1185状压dp
    css-margin
  • 原文地址:https://www.cnblogs.com/NotePad-chen/p/7366085.html
Copyright © 2011-2022 走看看