CSS基础之媒体类型（@media）样式

定义

使用 @media，可以针对不同的媒体类型定义不同的样式。
使用 @media，可以针对不同的屏幕尺寸设置不同的样式
当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

语法

在内部样式定义中使用

@media mediatype and|not|only (media feature) {CSS-Code;
}

在外部样式定义中使用

<!-- 针对不同的媒体使用不同样式 -->
<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">

media type

值	描述
all	用于所有设备
aural	用于语音和声音合成器
braille	应用于盲文触摸式反馈设备
embossed	用于打印的盲人印刷设备
handheld	用于掌上设备或更小的装置，如PDA和小型电话
print	用于打印机和打印预览
projection	用于投影设备
screen	用于电脑屏幕，平板电脑，智能手机等
speech	应用于屏幕阅读器等发声设备
tty	用于固定的字符网格，如电报、终端设备和对字符有限制的便携设备
tv	用于电视和网络电视

meida feature

值	描述
aspect-ratio	定义输出设备中的页面可见区域宽度与高度的比率
color	定义输出设备每一组彩色原件的个数。如果不是彩色设备，则值等于0
color-index	定义在输出设备的彩色查询表中的条目数。如果没有使用彩色查询表，则值等于0
device-aspect-ratio	定义输出设备的屏幕可见宽度与高度的比率
device-height	定义输出设备的屏幕可见高度
vdevice-width	定义输出设备的屏幕可见宽度
grid	用来查询输出设备是否使用栅格或点阵
height	定义输出设备中的页面可见区域高度
max-aspect-ratio	定义输出设备的屏幕可见宽度与高度的最大比率
max-color	定义输出设备每一组彩色原件的最大个数
max-color-index	定义在输出设备的彩色查询表中的最大条目数
max-device-aspect-ratio	定义输出设备的屏幕可见宽度与高度的最大比率
max-device-height	定义输出设备的屏幕可见的最大高度
max-device-width	定义输出设备的屏幕最大可见宽度
max-height	定义输出设备中的页面最大可见区域高度
max-monochrome	定义在一个单色框架缓冲区中每像素包含的最大单色原件个数
max-resolution	定义设备的最大分辨率
max-width	定义输出设备中的页面最大可见区域宽度
min-aspect-ratio	定义输出设备中的页面可见区域宽度与高度的最小比率
min-color	定义输出设备每一组彩色原件的最小个数
min-color-index	定义在输出设备的彩色查询表中的最小条目数
min-device-aspect-ratio	定义输出设备的屏幕可见宽度与高度的最小比率
min-device-width	定义输出设备的屏幕最小可见宽度
min-device-height	定义输出设备的屏幕的最小可见高度
min-height	定义输出设备中的页面最小可见区域高度
min-monochrome	定义在一个单色框架缓冲区中每像素包含的最小单色原件个数
min-resolution	定义设备的最小分辨率
min-width	定义输出设备中的页面最小可见区域宽度
monochrome	定义在一个单色框架缓冲区中每像素包含的单色原件个数。如果不是单色设备，则值等于0
orientation	定义输出设备中的页面可见区域高度是否大于或等于宽度。
resolution	定义设备的分辨率。如：96dpi, 300dpi, 118dpcm
scan	定义电视类设备的扫描工序
width	定义输出设备中的页面可见区域宽度

代码实例

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<style>
body {font-family:"Lucida Sans", Verdana, sans-serif;
}.main img {width:100%;
}h1{font-size:1.625em;
}h2{font-size:1.375em;
}.header {padding:1.0121457489878542510121457489879%;background-color:#f1f1f1;border:1px solid #e9e9e9;
}.menuitem {margin:4.310344827586206896551724137931%;margin-left:0;margin-top:0;padding:4.310344827586206896551724137931%;border-bottom:1px solid #e9e9e9;cursor:pointer;
}.main {padding:2.0661157024793388429752066115702%;
}.right {padding:4.310344827586206896551724137931%;background-color:#CDF0F6;
}.footer {padding:1.0121457489878542510121457489879%;text-align:center;background-color:#f1f1f1;border:1px solid #e9e9e9;font-size:0.625em;
}.gridcontainer {width:100%;
}.gridwrapper {overflow:hidden;
}.gridbox {margin-bottom:2.0242914979757085020242914979757%;margin-right: 2.0242914979757085020242914979757%;float:left;
}.gridheader {width:100%;
}.gridmenu {width:23.481781376518218623481781376518%;
}.gridmain {width:48.987854251012145748987854251012%;
}.gridright {width:23.481781376518218623481781376518%;margin-right:0;
}.gridfooter {width:100%;margin-bottom:0;
}@media only screen and (max-width: 500px) {.gridmenu {width:100%;}.menuitem {margin:1.0121457489878542510121457489879%;padding:1.0121457489878542510121457489879%;}.gridmain {width:100%;}.main {padding:1.0121457489878542510121457489879%;}.gridright {width:100%;}.right {padding:1.0121457489878542510121457489879%;}.gridbox {margin-right:0;float:left;}
}</style>
</head>
<body>
<div class="gridcontainer"><div class="gridwrapper"><div class="gridbox gridheader"><div class="header"><h1>Devin's home</h1></div></div><div class="gridbox gridmenu"><div class="menuitem">Xi'an 1</div><div class="menuitem">Xi'an 2</div><div class="menuitem">Xi'an 3</div><div class="menuitem">Xi'an 4</div></div><div class="gridbox gridmain"><div class="main">
<h1>Live</h1>
<p>the current live status</p>
<img src="room.jpg" alt="room" width="" height=""></div></div><div class="gridbox gridright"><div class="right">
<h2>What?</h2>
<p>what I am doing now.</p>
<h2>Where?</h2>
<p>where I am living。</p>
<h2>With who?</h2>
<p>guess!</p></div></div><div class="gridbox gridfooter"><div class="footer">
<p> Resize the browser window to see the content response to the resizing.</p></div></div></div>
</div>
</body>
</html>

CSS基础之媒体类型（@media）样式相关推荐

媒体类型@media
媒体类型允许你指定文件将如何在不同媒体呈现.该文件可以以不同的方式显示在屏幕上,在纸张上,或听觉浏览器等等. @media 规则允许在相同样式表为不同媒体设置不同的样式. 浏览器屏幕上显示一个14像素 ...
CSS基础-03-字体和文本样式
文章目录前言一.字体样式大小粗细是否倾斜字体类型拓展:层叠性字体font相关属性的连写二.文本样式文本缩进文本水平对齐方式文本修饰行高前言字体和文本样式一.字体样式大 ...
css基础(26)_表格的样式
表格的样式 border-spacing:指定边框之间的距离 border-collapse:设置边框的折叠可选值: separate: 默认值.边框会被分开.不会忽略border-spacing ...
[19/06/07-星期五] CSS基础_布局定位背景样式
一.固定布局(不适应设备的浏览器的变化) <!DOCTYPE html> <html><head><meta charset="UTF-8" ...
媒体查询Media Queries详解
@media 标签可以说是响应式网页的开发基础.其主要由媒体类型(Media Type)和媒体特性(Media Query)两部分组成. Media Type 设定后面规则生效的展示类型,包括all ...
html+css基础入门教程标记语言——打印样式
讨论了几种为文档应用CSS的方法,这一章是要研究打印样式,指定特别用来打印页面的CSS规则.只要几条CSS规则,就能确保结构化标记内容打印到纸上的效果与屏幕上显示的一样好看. 网页教学网首先来看看m ...
media属性和媒体类型
一.media属性当设定样式的时候,可以指定此样式应用于何种媒体,例如: <link rel="stylesheet" href="basic.css" ...
CSS媒体类型基本知识
1.媒体类型 @media @media 规则允许在相同样式表为不同媒体设置不同的样式.例如同一页面在浏览器屏幕上展示和打印在纸张上字体大小.背景色等属性会有区别,这是因为不同的媒体类型需要的样式 ...
教你玩转CSS 媒体类型
目录 CSS 媒体类型媒体类型 @media 规则其他媒体类型 CSS 媒体类型媒体类型允许你指定文件将如何在不同媒体呈现.该文件可以以不同的方式显示在屏幕上,在纸张上,或听觉浏览器等等. 媒体 ...

CSS基础之媒体类型（@media）样式

定义

语法

在内部样式定义中使用

在外部样式定义中使用

media type

meida feature

代码实例

CSS基础之媒体类型（@media）样式相关推荐

最新文章

热门文章