zoukankan      html  css  js  c++  java
  • 关于css中@media的一些基本使用

    最近编写响应式的时候在使用@media用的不是很顺手,所以就记录一下方便查看

    基本语法:

    @media +( not  | only) + 媒体类型 +(and+ 媒体查询)

    我们首先了解一下媒体类型,常用的不多,就几个:screen(电脑屏幕) ,print (打印或者打印预览),all(所有设备)

    (本文侧重讲述screen,因为本人最近都用这个,嘻嘻)

    然后这个设备类型的作用是什么?

    答:用来匹配查询条件的,就是你是要以什么标准去匹配,是按照屏幕大小改变的条件去匹配还是按照打印的方式去匹配

    然后后面的(and+媒体查询),这个是用来限制查询条件的,例如当屏幕小于最大宽度时,@media中的class就起作用了

    例子:当屏幕宽度小于678px的时候,.box类的背景颜色为红色

    @media screen and (max-678px){

    .box {

    background-color:red;

    }

    }

    当然你的媒体查询条件也可以有多个限制

    例子:当屏幕宽度在678px到992px之间时,.box类的背景颜色为红色

    @media screen and (min-678px) and (max-992px){

    .box {

    background-color:red;

    }

    }

    最后是两个修饰词,not,only

    先说only,用来匹配媒体类型,表示只对该媒体类型适用

    例子:只对screen类型起作用,对于print等其他设备不起作用

    @media only screen and (max-678px){

    .box {

    background-color:red;

    }

    }

    not就是对于除了该媒体类型的其他类型起作用

    例子:对于screen类型不起作用,其他类型起作用

    @media not screen and (max-678px){

    .box {

    background-color:red;

    }

    }

  • 相关阅读:
    如何看Linux服务器的load average
    java中File读取文件中文乱码
    LR代理录制
    虚拟机打开虚拟文件报不兼容,无法使用
    面向对象示例-注册登录例子
    pickle 模块
    item方法
    加密方法
    @classmethod 和 @staticmethod 用法
    python 中 @property 的用法
  • 原文地址:https://www.cnblogs.com/kongbaifeiye/p/12634850.html
Copyright © 2011-2022 走看看