`

CSS3 为不同媒介设置样式的方法(CSS3 Media Queries)

阅读更多

随着智能手机、平板电脑越来越流行,许多网站都开始考虑为这些移动设备开发一套专属布局和样式。幸好 CSS3 提供了针对不同设备的查询规则,让这一目的变得非常容易实现。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<style type="text/css">
/*
    说明:CSS3 为不同媒介设置样式的方式(CSS3 Media Queries)
    来源:http://www.stuffandnonsense.co.uk/blog/about/hardboiled_css3_media_queries/
    整理:CodeBit.cn [ http://www.codebit.cn ]
*/
 
/* 智能手机 (纵向 和 横向) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
 
/* 智能手机 (横向) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}
 
/* 智能手机 (纵向) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}
 
/* iPad 系列 (纵向 和 横向) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}
 
/* iPad 系列 (横向) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
 
/* iPad 系列 (纵向) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}
 
/* 台式机 和 笔记本 ----------- */
@media only screen
and (min-width : 1224px) {
/* Styles */
}
 
/* 大屏幕 ----------- */
@media only screen
and (min-width : 1824px) {
/* Styles */
}
 
/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
</style>

当然,将所有样式放在一起不是一个好主意,你可以将不同设备特定的 CSS 放到不同文件中,然后再通过 link 节点的 media 属性来加载:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<head>
 
<link rel="stylesheet" href="smartphone.css"
media="only screen and (min-device-width : 320px)
and (max-device-width : 480px)">
 
<link rel="stylesheet" href="smartphone-landscape.css"
media="only screen and (min-width : 321px)">
 
<link rel="stylesheet" href="smartphone-portrait.css"
media="only screen and (max-width : 320px)">
 
<link rel="stylesheet" href="ipad.css"
media="only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)">
 
<link rel="stylesheet" href="ipad-landscape.css"
media="only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape)">
 
<link rel="stylesheet" href="ipad-portrait.css"
media="only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait)">
 
<link rel="stylesheet" href="widescreen.css"
media="only screen and (min-width : 1824px)">
 
<link rel="stylesheet" href="iphone4.css"
media="only screen
and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5)">
 
</head>
分享到:
评论

相关推荐

    CSS3 Media Query CSS3媒介查询

    CSS3 Media Queries是Web开发中的一个重要工具,它允许开发者根据设备的物理特性,如视口宽度、设备像素比等,来应用不同的样式规则,从而实现响应式网页设计。这一功能使得网页能更好地适应不同尺寸的屏幕,无论是...

    css级联样式表

    例如,`#para1`会选择ID为`para1`的元素,并为其设置样式。ID选择器具有唯一性,每个页面中只能有一个元素使用特定的ID。 2. **类选择器**: 类选择器使用`.`标识,可以应用于多个具有相同类属性的HTML元素。例如,`...

    CSS 2.0 样式表中文手册

    虽然媒体查询(Media Queries)是CSS 3.0的特色,但CSS 2.0中已经有了初步的`media`规则,允许根据设备特性(如屏幕宽度)应用不同的样式。 **九、打印样式** CSS 2.0考虑到了打印需求,`@media print`规则允许为...

    css3打印动画特效.rar

    在CSS3中,打印动画特效基于媒体查询(Media Queries)和动画(Animations)两大特性。媒体查询允许我们根据设备的特定特性,如屏幕尺寸、颜色深度等,来应用不同的样式。打印媒体类型(print)则专门用于定义页面...

    css判断界面大小

    在探讨如何利用CSS来判断并适应不同的界面大小时,我们首先需要理解几个核心概念:媒体查询(Media Queries)以及响应式设计(Responsive Design)。本文将详细介绍如何通过CSS媒体查询实现界面大小的判断,并据此...

    黑色扁平化设计品牌展示CSS3模板-黑色 扁平化 设计 设计 品牌 展示 css3 logo设计 名片 画册设计.rar

    同时,通过媒体查询(media queries)实现不同设备上的适配性,确保模板在手机、平板和桌面电脑上都能完美显示。 LOGO设计是品牌形象的核心部分,此模板可能包含一系列预设的LOGO模板,供设计师根据品牌特点进行...

    让IE支持CSS3 Media Query实现响应式Web设计

    Media Queries允许我们根据不同媒介类型以及特定特征(例如屏幕宽度或分辨率)来应用不同的CSS样式规则。通过Media Queries,我们可以定义多个断点(breakpoints),在这些断点处,网页的布局和样式会根据断点的条件...

    css响应式有哪些常用布局_css响应式有什么布局.docx

    **:Media Query是CSS3中的一个特性,它允许我们根据设备的特定条件(如宽度、高度、方向等)应用不同的样式。 2. **Media Query的值**:可以获取设备的宽度(width)、高度(height)、方向(orientation)、画面...

    HTML <link> 标签的 media 属性

    其中,`rel`属性定义了当前文档与被链接文档的关系,`type`属性通常设置为`text/css`表示引用的是CSS样式,而`href`属性则指定了CSS文件的URL。 `media`属性是`&lt;link&gt;`标签的一个关键属性,它允许开发者指定样式表...

    网格底纹个人web简历博客html5模板_灰色 博客 个人 简单 简历 html5 css3 幻灯.rar

    HTML5和CSS3提供了媒介查询(Media Queries)等工具,使得模板可以根据屏幕大小自动调整布局,确保在手机、平板和桌面电脑上都能良好显示。 6. **个人简历**:个人简历部分可能包含`&lt;form&gt;`元素,用于收集用户信息...

    使用CSS3制作响应式导航菜单的方法

    为了实现响应式设计,我们将利用CSS3的媒介查询(Media Queries),这允许我们根据设备特性应用不同的样式。当屏幕宽度小于某个阈值时,菜单将变为垂直堆叠。以下是一个简单的媒介查询示例: ```css @media screen ...

    css照片表白+音乐特效

    此外,CSS还支持媒体查询(Media Queries),使得表白效果可以根据设备屏幕大小进行适配,确保在不同设备上都能有良好的用户体验。例如,对于移动设备,可能需要调整照片的布局,使它们更适合小屏幕显示。 标签"css...

    响应式布局入门

    在CSS2时代,媒体类型(Media Types)如`screen`、`print`、`handheld`等被用来为不同的输出媒介指定样式。然而,由于缺乏设备支持,它们的应用并不广泛。随着CSS3的出现,媒体查询(Media Queries)引入了一种更...

    媒体查询资料整理

    `@media`是CSS3中引入的新特性,允许开发者根据不同的媒体类型定义不同的样式规则。 ##### 2.1 在样式文件中引用媒体类型 在样式文件中可以使用`@media`来定义特定媒体类型的样式规则: ```css @media screen { /...

    行业分类-物理装置-一种调整层叠样式表的方法、装置、介质和电子设备.zip

    通过媒体查询(Media Queries)可以实现CSS针对不同设备宽度进行响应式调整,提供更好的用户体验。 2. **CSS预处理器**:如Sass、Less等预处理器允许开发者使用变量、嵌套规则、混合(mixins)、函数等特性编写更...

    print-css-rocks:CSS Paged Media教程和工具回顾(print-css.rocks的存储库)

    CSS Paged Media模块,是CSS标准的一部分,专为纸质媒介(如打印机、PDF输出等)设计,确保网页内容在非屏幕设备上也能呈现出清晰、整洁的布局。它引入了一系列特性,如页面盒模型、页眉和页脚、分页控制等,使得...

    响应式布局

    Media Queries是一种CSS3特性,它可以基于不同的设备特性(如屏幕尺寸、分辨率等)来选择性地应用样式。例如,你可以设置一组样式只在屏幕宽度小于600像素时生效,或者当设备处于横屏模式时改变布局。 **2. Media ...

    W3C教程(6):W3C CSS 活动

    **CSS3 Colors**、**Backgrounds and Borders**、**Text**、**Lists**、**Line**、**Boxmodel**、**Multi column**、**Ruby**、**Border**、**Speech**、**Paged Media**、**Generated PM**、**Print**、**Values**...

    CSS样式表渐进增强的应用

    由于移动设备市场的多样性和不断变化,开发者需要考虑使用媒体查询(Media Queries)和其他响应式设计技术来适应不同的屏幕尺寸和能力。 7. **总结** 渐进增强通过逐步添加功能和样式,确保所有用户都能访问网站...

Global site tag (gtag.js) - Google Analytics