zoukankan      html  css  js  c++  java
  • media文件分离

    响应式cssのmedia文件分离

    media简介

    1.媒体查询,添加自CSS3
    2.一个媒体查询由一个可选的媒体类型和零个或多个使用媒体功能的限制了样式表范围的表达式组成,允许内容的呈现针对一个特定范围的输出设备而进行裁剪,而不必改变内容本身

    语法

    1.媒体查询包含一个可选的媒体类型和媒体特性表达式(0或多个)最终会被解析为true或false
    2.如果媒体查询中指定的媒体类型匹配展示文档所使用的设备类型,并且所有的表达式的值都是true,那么该媒体查询的结果为true

    demo

    @media (max- 600px) {
      .sidebar {
        display: none;
      }
    }
    

    逻辑操作符

    and

    and操作符用来把多个媒体属性组合成一条媒体查询,对成链式的特征进行请求,只有当每个属性都为真时,结果才为真

    @media (min- 700px) and (orientation: landscape) {
        /* Write css 仅在可视区域宽度不小于700像素并在横屏时有效*/
    }
    

    逗号分隔列表

    媒体查询中使用逗号分隔效果等同于or逻辑操作符。当使用逗号分隔的媒体查询时,如果任何一个媒体查询返回真,样式就是有效的

    @media (min- 700px), handheld and (orientation: landscape) {
        /* 在最小宽度为700像素或是横屏的手持设备上应用一组样式 */
        /* orientation: portrait 竖屏 */
    }
    

    not

    not 关键字应用于整个媒体查询,在媒体查询为假时返回真
    not关键字仅能应用于整个查询,而不能单独应用于一个独立的查询

    @media not all and (monochrome) {
    
    }
    

    等价于

    @media not (all and (monochrome)) {
    
    }
    

    only

    防止老旧的浏览器不支持带媒体属性的查询而应用到给定的样式

    @media only screen and (color) {
    
    }
    

    媒体查询样式分离

    我们不必把所有的媒体查询写到一个css文件中,我们一般这样写

    
    <link rel="stylesheet" href="common.css">
    <link media="(min- 500px)" rel="stylesheet" href="desktop.css">
    <link media="(max- 500px)" rel="stylesheet" href="mobile.css">
    

    desktop.css和mobile.css中直接写样式就可以了,不必写查询条件

  • 相关阅读:
    OpenStack IceHouse版cinder模块新添加功能
    最小代价生成树
    HDU 3065 病毒侵袭持续中(AC自己主动机)
    POJ--2284--That Nice Euler Circuit【平面图欧拉公式】
    java工具类(四)之实现日期随意跳转
    Metasploit学习笔记之——情报搜集
    POJ 2378 Tree Cutting 子树统计
    cocos2d-x 3.0 touch事件官方解释
    html_entity_decode() 将 HTML 实体转成字符原型
    微信公众平台开发(81) 2014新年微信贺卡
  • 原文地址:https://www.cnblogs.com/guangzan/p/11236672.html
Copyright © 2011-2022 走看看