您现在的位置是:首页 > 前端学习 > 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种。
media query媒体特性说明
<!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,都会忽略样式。
在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 | 电脑显示器 |
用于打印机或者打印预览 | |
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,都会忽略样式。
很赞哦! ()
上一篇:动画和渐变(第十七章)(图文)
相关文章
随机图文
-
网页的文本设计(第三节)(图文)
静态页面中的绝大部分内容由4类属性的物质组成,文本,图像,视频音频等多媒体文件和超链接。本章的知识点如下: 1了解HTML语言,区分清楚旧的使用规则和新规则CSS之间的联系和不同。 2文本排版格式,学会如何使用标签实现在页面中规范写作格式 3文本样式学会如何改变页面中文本的基本属性和如何使用一些特殊的符号。 4文本列表,学会在页面中使用无序列表和有序列表来罗列条目 5通过实例,学会在页面中编写文本,项目列表 -
网页中的表单(第六章)(图文)
现在,大多数网站都具备收集用户信息的功能,如发表留言,输入账号,而通过使用表单能够令浏览者和页面互动起来,HTML5不但增加了一系列功能性的表单,表单元素,表单特性,还增加了自动验证表单的功能。本章的主要知识点如下: 1表单时如何工作的 2如何创建表单 3不同功能多种样式的表单 4表单域能够做什么 5HTML5表单发生了什么变化 -
多列布局(第十六章)(图文)
我们经常阅读的报纸中,通常会将一个版面分成多个列进行排版,在传统的网页设计中,会使用表格布局或者浮动布局,但总会遇到错位的问题,因此需要反复调整,但是仍然不够完美,针对这种情况,CSS3提供了更好的方法,可以直接定义列数,列宽等,也可以定义列与列之间的间距,间隔线等。。还可以定义栏目跨栏和栏目高度,本章将详细讲解多列布局的基本属性及其用法,本章的主要知识点如下: 1理解多列布局的基本属性 2发现常见多列布局页面的布局原理 3实现自己的多列布局 -
文本、背景、边框不再单调(第十三章)(图文)
再制作网页的时候,经常会围绕文本,背景和边框几个方面进行样式表设置,但在CSS2.0中,如果涉及如阴影、圆角、多重背景等效果,常常因为不能实现,转而寻求其他办法,再颜色选择及半透明颜色使用方面也极不方便,这些问题,再CSS3中都有很好的解决方案。本章知识点如下: 1文本与字体的设计 2色彩模式和不透明度的设置 3背景和边框的使用