随着智能手机、平板电脑越来越流行,许多网站都开始考虑为这些移动设备开发一套专属布局和样式。幸好 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 Queries是Web开发中的一个重要工具,它允许开发者根据设备的物理特性,如视口宽度、设备像素比等,来应用不同的样式规则,从而实现响应式网页设计。这一功能使得网页能更好地适应不同尺寸的屏幕,无论是...
例如,`#para1`会选择ID为`para1`的元素,并为其设置样式。ID选择器具有唯一性,每个页面中只能有一个元素使用特定的ID。 2. **类选择器**: 类选择器使用`.`标识,可以应用于多个具有相同类属性的HTML元素。例如,`...
虽然媒体查询(Media Queries)是CSS 3.0的特色,但CSS 2.0中已经有了初步的`media`规则,允许根据设备特性(如屏幕宽度)应用不同的样式。 **九、打印样式** CSS 2.0考虑到了打印需求,`@media print`规则允许为...
在CSS3中,打印动画特效基于媒体查询(Media Queries)和动画(Animations)两大特性。媒体查询允许我们根据设备的特定特性,如屏幕尺寸、颜色深度等,来应用不同的样式。打印媒体类型(print)则专门用于定义页面...
在探讨如何利用CSS来判断并适应不同的界面大小时,我们首先需要理解几个核心概念:媒体查询(Media Queries)以及响应式设计(Responsive Design)。本文将详细介绍如何通过CSS媒体查询实现界面大小的判断,并据此...
同时,通过媒体查询(media queries)实现不同设备上的适配性,确保模板在手机、平板和桌面电脑上都能完美显示。 LOGO设计是品牌形象的核心部分,此模板可能包含一系列预设的LOGO模板,供设计师根据品牌特点进行...
Media Queries允许我们根据不同媒介类型以及特定特征(例如屏幕宽度或分辨率)来应用不同的CSS样式规则。通过Media Queries,我们可以定义多个断点(breakpoints),在这些断点处,网页的布局和样式会根据断点的条件...
**:Media Query是CSS3中的一个特性,它允许我们根据设备的特定条件(如宽度、高度、方向等)应用不同的样式。 2. **Media Query的值**:可以获取设备的宽度(width)、高度(height)、方向(orientation)、画面...
其中,`rel`属性定义了当前文档与被链接文档的关系,`type`属性通常设置为`text/css`表示引用的是CSS样式,而`href`属性则指定了CSS文件的URL。 `media`属性是`<link>`标签的一个关键属性,它允许开发者指定样式表...
HTML5和CSS3提供了媒介查询(Media Queries)等工具,使得模板可以根据屏幕大小自动调整布局,确保在手机、平板和桌面电脑上都能良好显示。 6. **个人简历**:个人简历部分可能包含`<form>`元素,用于收集用户信息...
为了实现响应式设计,我们将利用CSS3的媒介查询(Media Queries),这允许我们根据设备特性应用不同的样式。当屏幕宽度小于某个阈值时,菜单将变为垂直堆叠。以下是一个简单的媒介查询示例: ```css @media screen ...
此外,CSS还支持媒体查询(Media Queries),使得表白效果可以根据设备屏幕大小进行适配,确保在不同设备上都能有良好的用户体验。例如,对于移动设备,可能需要调整照片的布局,使它们更适合小屏幕显示。 标签"css...
在CSS2时代,媒体类型(Media Types)如`screen`、`print`、`handheld`等被用来为不同的输出媒介指定样式。然而,由于缺乏设备支持,它们的应用并不广泛。随着CSS3的出现,媒体查询(Media Queries)引入了一种更...
`@media`是CSS3中引入的新特性,允许开发者根据不同的媒体类型定义不同的样式规则。 ##### 2.1 在样式文件中引用媒体类型 在样式文件中可以使用`@media`来定义特定媒体类型的样式规则: ```css @media screen { /...
通过媒体查询(Media Queries)可以实现CSS针对不同设备宽度进行响应式调整,提供更好的用户体验。 2. **CSS预处理器**:如Sass、Less等预处理器允许开发者使用变量、嵌套规则、混合(mixins)、函数等特性编写更...
CSS Paged Media模块,是CSS标准的一部分,专为纸质媒介(如打印机、PDF输出等)设计,确保网页内容在非屏幕设备上也能呈现出清晰、整洁的布局。它引入了一系列特性,如页面盒模型、页眉和页脚、分页控制等,使得...
Media Queries是一种CSS3特性,它可以基于不同的设备特性(如屏幕尺寸、分辨率等)来选择性地应用样式。例如,你可以设置一组样式只在屏幕宽度小于600像素时生效,或者当设备处于横屏模式时改变布局。 **2. Media ...
**CSS3 Colors**、**Backgrounds and Borders**、**Text**、**Lists**、**Line**、**Boxmodel**、**Multi column**、**Ruby**、**Border**、**Speech**、**Paged Media**、**Generated PM**、**Print**、**Values**...
由于移动设备市场的多样性和不断变化,开发者需要考虑使用媒体查询(Media Queries)和其他响应式设计技术来适应不同的屏幕尺寸和能力。 7. **总结** 渐进增强通过逐步添加功能和样式,确保所有用户都能访问网站...