Media Queries——媒体类型

最新推荐文章于 2022-10-04 10:18:55 发布

weixin_34402090

最新推荐文章于 2022-10-04 10:18:55 发布

阅读量74

点赞数

原文链接：http://www.cnblogs.com/amy-1205/p/5829331.html

版权

媒体类型（Media Type）在CSS2中是一个常见的属性，也是一个非常有用的属性，可以通过媒体类型对不同的设备指定不同的样式。

在CSS2中常碰到的就是all(全部)、screen(屏幕)、print(页面打印或打印预览模式),也是最常见的三种媒体类型。

媒体类型的引用方法也有多种，常见的有：link标签、@import和CSS3新增的@media几种：

link方法

通过link标签中的media属性来指定不同的媒体类型

<link rel="stylesheet" type="text/css" href="style.css" media="screen" />


@import方法

第一种：

在样式中通过@import调用另一个样式文件
<style type="text/css">
@importurl(reset.css) screen;  屏幕
@importurl(print.css) print;  打印
</style>


第二种：

在<head>中的<style>标签中引入媒体类型方法。

<head>
<style type="text/css">
@importurl(style.css) all;
</style>
</head>


@media方法

第一种，在样式文件中引用媒体类型：

<style type="text/css">
@media screen {
选择器{/*你的样式代码写在这里…*/}
}
</style>


第二种，在<head>标签中的<style>中引用。

<head>
<style type="text/css">
@media screen{
    选择器{/*你的样式代码写在这里…*/}
}
</style>
</head>

最大宽度max-width

@media screen and (max-width:480px){
.ad {
display:none;
}
}
当屏幕小于或等于480px时,页面中的（.ad）都将被隐藏。

最小宽度min-width

@media screen and (min-width:900px){
.wrap{width: 980px;}
}
当屏幕大于或等于900px时，“.wrap”的宽度为980px。


多个媒体特性使用

当屏幕在600px~900px之间时，body的背景色渲染为“#f5f5f5”

@media screen and (min-width:600px) and (max-width:900px){
body {background-color:#f5f5f5;}
}

iPhone、iPad等，还可以根据屏幕设备

“max-device-width”或“min-device-width” 所指的是设备的实际分辨率，也就是指可视面积分辨率。

<link rel="stylesheet" media="screen and (max-device-width:480px)" href="iphone.css" />

上面的代码指的是“iphone.css”样式适用于最大设备宽度为480px

转载于:https://www.cnblogs.com/amy-1205/p/5829331.html

weixin_34402090

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Media Queries——媒体类型

媒体类型（Media Type）在CSS2中是一个常见的属性，也是一个非常有用的属性，可以通过媒体类型对不同的设备指定不同的样式。在CSS2中常碰到的就是all(全部)、screen(屏幕)、print(页面打印或打印预览模式),也是最常见的三种媒体类型。媒体类型的引用方法也有多种，常见的有：link标签、@import和CSS3新增的@media几种：link方法通过link标签中的media属...
复制链接

扫一扫