热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

CSS3多媒体属性

一、CSS媒体类型媒体类型允许你指定文件将如何在不同媒体呈现。该文件可以以不同的方式显示在屏幕上,在纸张上,或听觉浏览器等等。二、@media规则@

一、CSS 媒体类型

媒体类型允许你指定文件将如何在不同媒体呈现。该文件可以以不同的方式显示在屏幕上,在纸张上,或听觉浏览器等等。

二、@media 规则

@media 规则允许在相同样式表为不同媒体设置不同的样式。

在视口最大为450px时,div为100*100px,背景色为红色

@media screen and (max-width:400px){
        div{width:100px;
        height:100px;
        background:#f00;}
    }
在视口最小为450px时,div为200*200px,背景色为绿色
 @media screen and (min-width:400px){
        div{width:200px;
        height:200px;
        background:#0f0;}
    }
在视口最小为750px时,div为300*300px,背景色为蓝色
@media screen and (min-width:750px){
        div{width:300px;
        height:300px;
        background:#00f;}
    }




推荐阅读
author-avatar
小鬼shenzhen
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有