请选择 进入手机版 | 继续访问电脑版
开启辅助访问
帐号登录 |立即注册

如何使用CSS @media 规则,匹配不同尺寸屏幕

 
如果浏览器窗口的宽度为 768px 或更小时,把 <body> 元素的背景颜色更改为“浅蓝色”:

@media only screen and (max-width: 768px) {  body {    background-color: lightblue;  }}


@media 规则在媒体查询中用于为不同的媒体类型/设备应用不同的样式。

CSS 语法
@media +(and | not  | only) + 媒体类型 +(and+ 媒体查询){  CSS-Code;}

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

not、only 和 and 关键字的含义:
not 还原整个媒体查询。
only 关键字可防止旧版浏览器应用指定的样式,这些浏览器不支持带媒体特性的媒体查询。它对现代浏览器没有影响。
and 关键字将媒体特性与媒体类型或其他媒体特性组合在一起。

它们都是可选的。但是,如果使用 not 或 only,则还必须指定媒体类型。
    /* iPhone Portrait */手机竖排
        @media screen and (max-device-width: 480px) and (orientation:portrait) {
            #leftside{width:11%;}
        }


        /* iPad Portrait */手机竖排
        @media screen and (min-device-width: 481px) and (orientation:portrait) {
            #leftside{width:16%;}
        }
        /* iPad Landscape */IPAD横排
        @media screen and (min-device-width: 481px) and (orientation:landscape) {
            #leftside{width:16%;}
        }


@media还可以针对不同的媒体使用不同的样式表,就像这样:

<link rel="stylesheet" media="screen and (min-width: 768px)" href="style.css">....



回复

使用道具 举报

0 个回复

倒序浏览

快速回复

您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

友情链接
  • 艾Q网

    提供设计文章,教程和分享聚合信息与导航工具,最新音乐,动漫,游戏资讯的网站。