您现在的位置是:首页 > 前端学习 > Web前端Web前端

CSS3的跨设备支持(第十八章)(图文)

第十三双眼睛2020-03-16【Web前端】人已围观

简介伴随移动互联网的到来,越来越多的人开始使用手机等移动设备上网,终端屏幕尺寸也趋于多元化发展,CSS3迎合了这种趋势,提出了媒体查询的概念,以使得样式表的设计,能够再多种终端设备下,能够更好的呈现网页。本章的主要内容如下:
1什么是跨设备
2跨设备的原理
3CSS3提供的媒体查询

媒体查询
在CSS种,与媒体相关的样式表设计是从CSS2.1开始的。CSS中,可以通过mediaType来区别终端设备,以指定不同的样式表,例如,需要打印网页时,设计针对打印的样式表,但是MediaType极不灵活,很多设备部支持。
CSS3新增了Media Query模块,该模块中,允许添加媒体查询表达式,以指定媒体类型及设备特性,从而精确的为不同的设备应用不同的样式,最终改善用户体验。
@media规则的语法
media query模块中的媒体查询是使用@media规则来区别媒体设备的,并实现样式表定义的。media query模块获得了火狐,谷歌,欧鹏等六浏览器的支持。
@media规则是包含有查询表达式的媒体样式表定义规则,语法如下:
@media media query {css styles}
<media_query>:only ont <media_type> and expresstion
<expression>:media feature  value?
media_type:all  aural braille handheld print  projection screen tty tv embossed
media_feature:width  min-width  max-width  height  min-height  max-height device-width min-device-width max-device-width
device-height  min-device-height  max-device-height
device-aspect-ratio  min-device-aspect-ratio max-device-aspect-ratio
color  min-color  max-color  color-index  min-color-index max-color-inx
monochrome  min-monochrome  max-monochrome
resolution  min-resolution  max-resolution  scan  grid
css_style:定义样式表
media_query:设置媒体查询关键字,如and,not,only
media_type:设置设备类型,语法中提供了种媒体类型,
media_feature:定义媒体特性,该特性放在括号中,如(man-width:800px),媒体特性有13种。
all 所有设备
screen 电脑显示器
print 用于打印机或者打印预览
handheld 便携或手持设备
tv 电视机类型的设备
speech 语音和音频合成器
braile 用于盲人触觉反馈设备
embossed 盲文打印/印刷设备
projection 投影设备
tty 用于使用固定间距字符格的设备,如电传打字机和终端

media query媒体特性说明
媒体特性 可用媒体类型 接受max/min
width length visual,tactile yes
height length visual,tactile yes
device-width length visual,tactile yes
device-height length visual,tactile yes
orientation portrait|landscape bitmap no
aspect-ratio ratio bitmap yes
device-aspect-ratio tatio bitmap yes
color integer visual yes
color-index integer visual yes
monochrome integer visual yes
resolution resolution bitmap yes
scan progressive|interlace tv no
grid integer visual,tactile no

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>根据窗口大小选择样式表</title>
        <style type="text/css">
            *{
                font-size:36px;
                font-weight: bold;
                font-family: arial;
                color: #fff;
            }
            nav{
                background-color: #0066ff;
                height: 300px;
            }
            section{
                background-color: #f90;
                height: 300px;
            }
            aside{
                background-color: #009900;
                height: 300px;
            }
            @media screen  and (min-width: 900px) {
                nav{
                    float: left;
                    width: 25%;
                }
                section{
                    float: left;
                    width: 50%;
                }
                aside{
                    float: left;
                    width: 25%;
                }
            }
            @media  screen and (min-width:600px ) and (max-width:900px) {
                nav{
                    float: left;
                    width: 40%;
                    height: 200px;
                }
                section{
                    float: left;
                    width: 60%;
                    height: 200px;
                }
                aside{
                    height: 100px;
                    float: none;
                    clear: both;
                }
            }
            @media screen and (max-width: 600px) {
                nav{
                    height: 150px;
                }
                section{
                    height: 150px;
                }
                aside{
                    height: 150px;
                }
            }
        </style>
    </head>
    <body>
        <nav>Nav</nav>
        <section>Section</section>
        <aside>Aside</aside>
    </body>
</html>


效果如下图所示:
宽屏时:
窄屏时:

使用Media query链接外部样式文件
在网页设计种,通常是直接链接外部样式表文件的,此时可以增加media query媒体查询,以适应媒体设备的需求。
1在link标签中应用media query
在<link>标签中设置media属性语法如下:
<link rel="stylesheet" type="text/css" media="<media_query>" href="xxx.css">
取值说明:<media_query>是媒体查询,遵循@media规则中的媒体从查询方式。
2实例介绍
一个media query语句包含一种媒体类型,如果没有指定媒体类型,那么就使用默认类型all
<link rel="stylesheet" type="text/css" href="xxx.css" media="(min-width:200px)">
一个media query语句也可以包含多个特性,如:
<link rel="stylesheet" type="text/css" href="xxx.css" media="handheld and (max-width:200px),screen and (max-width:300px)"> 
使用not关键字,排除符合表达式的设备。例如:
<link rel="stylesheet" type="text/css" href="xxx.css" media="not screen and (color)">
使用only关键字,对于支持media query的设备会正确的显示样式,不支持media query但能正确读取media Type的设备,由于先读取到only而不是screen等,将会忽略后面的样式,对于不支持media query的ie来说,无论是否有only,都会忽略样式。

 

Tags:HTML   HTML网页

很赞哦! ()

随机图文

文章评论

    共有条评论来说两句吧...

    用户名:

    验证码:

本站推荐

站点信息

  • 网站名称:JavaStudy
  • 建站时间:2019-1-14
  • 网站程序:帝国CMS7.5
  • 文章统计64篇文章
  • 标签管理标签云
  • 统计数据百度统计
  • 微信公众号:扫描二维码,关注我们