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

    css3 媒体查询

    定义:使用 @media 查询,可以针对不同的媒体类型定义不同的样式。

    @media 可以针对不同的屏幕尺寸设置不同的样式,特别是如果你需要设置设计响应式的页面。

     

    css媒体查询语法

    @media only screen and|not(max- 768px) {
        div{
                background: red;
        }
    }
    

     

    你也可以针对不同的媒体使用不同 stylesheets :

    <link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">
    

      

       媒体类型

     

    描述

    all

    用于所有设备

    aural

    已废弃。用于语音和声音合成器

    braille

    已废弃。 应用于盲文触摸式反馈设备

    embossed

    已废弃。 用于打印的盲人印刷设备

    handheld

    已废弃。 用于掌上设备或更小的装置,如PDA和小型电话

    print

    用于打印机和打印预览

    projection

    已废弃。 用于投影设备

    screen

    用于电脑屏幕,平板电脑,智能手机等。

    speech

    应用于屏幕阅读器等发声设备

    媒体功能

    描述

    aspect-ratio

    定义输出设备中的页面可见区域宽度与高度的比率

    color

    定义输出设备每一组彩色原件的个数。如果不是彩色设备,则值等于0

    color-index

    定义在输出设备的彩色查询表中的条目数。如果没有使用彩色查询表,则值等于0

    device-aspect-ratio

    定义输出设备的屏幕可见宽度与高度的比率。

    device-height

    定义输出设备的屏幕可见高度。

    device-width

    定义输出设备的屏幕可见宽度。

    grid

    用来查询输出设备是否使用栅格或点阵。

    height

    定义输出设备中的页面可见区域高度。

    max-aspect-ratio

    定义输出设备的屏幕可见宽度与高度的最大比率。

    max-color

    定义输出设备每一组彩色原件的最大个数。

    max-color-index

    定义在输出设备的彩色查询表中的最大条目数。

    max-device-aspect-ratio

    定义输出设备的屏幕可见宽度与高度的最大比率。

    max-device-height

    定义输出设备的屏幕可见的最大高度。

    max-device-width

    定义输出设备的屏幕最大可见宽度。

    max-height

    定义输出设备中的页面最大可见区域高度。

    max-monochrome

    定义在一个单色框架缓冲区中每像素包含的最大单色原件个数。

    max-resolution

    定义设备的最大分辨率。

    max-width

    定义输出设备中的页面最大可见区域宽度。

    min-aspect-ratio

    定义输出设备中的页面可见区域宽度与高度的最小比率。

    min-color

    定义输出设备每一组彩色原件的最小个数。

    min-color-index

    定义在输出设备的彩色查询表中的最小条目数。

    min-device-aspect-ratio

    定义输出设备的屏幕可见宽度与高度的最小比率。

    min-device-width

    定义输出设备的屏幕最小可见宽度。

    min-device-height

    定义输出设备的屏幕的最小可见高度。

    min-height

    定义输出设备中的页面最小可见区域高度。

    min-monochrome

    定义在一个单色框架缓冲区中每像素包含的最小单色原件个数

    min-resolution

    定义设备的最小分辨率。

    min-width

    定义输出设备中的页面最小可见区域宽度。

    monochrome

    定义在一个单色框架缓冲区中每像素包含的单色原件个数。如果不是单色设备,则值等于0

    orientation

    定义输出设备中的页面可见区域高度是否大于或等于宽度。

    resolution

    定义设备的分辨率。如:96dpi, 300dpi, 118dpcm

    scan

    定义电视类设备的扫描工序。

    width

    定义输出设备中的页面可见区域宽度。

    实例一  

    当浏览器的宽度在 520 到 699px, 改变背景色

    @media screen and (max- 699px) and (min- 520px) {
            background: red;
    }
    

    实例二  

    创建适应不同设备的方向(横屏landscape、竖屏portrait等)的布局。

    orientation:portrait | landscape

    portrait:指定输出设备中的页面可见区域高度大于或等于宽度

    landscape: 除portrait值情况外,都是landscape

    @media only screen and (orientation: landscape) {
        body {
            background-color: lightblue;
        }
    }
    

      

  • 相关阅读:
    安装wampserver时提示丢失MSVCR110.dll(在windows server上可用)
    前端开发必备!Emmet使用手册
    Markdown 新手指南
    封装系统(以封装Windows 7为例)
    简体中国版文档的Markdown语法
    sublime text 3 快捷键大全以及配置编译环境
    windows下的命令行工具babun
    Android屏幕适配全攻略(最权威的官方适配指导)
    JMETER第五节课jenkis集成常态化压测的实战?主从压力机实战??
    性能测试5--Jmeter命令行与以及普罗米修斯的原理
  • 原文地址:https://www.cnblogs.com/wenaq/p/13548422.html
Copyright © 2011-2022 走看看