随着智能手机、平板电脑越来越流行，许多网站都开始考虑为这些移动设备开发一套专属布局和样式。幸好 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 ----------- */@mediaonly 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），在这些断点处，网页的布局和样式会根据断点的条件...
其中，`rel`属性定义了当前文档与被链接文档的关系，`type`属性通常设置为`text/css`表示引用的是CSS样式，而`href`属性则指定了CSS文件的URL。 `media`属性是`<link>`标签的一个关键属性，它允许开发者指定样式表...
**：Media Query是CSS3中的一个特性，它允许我们根据设备的特定条件（如宽度、高度、方向等）应用不同的样式。 2. **Media Query的值**：可以获取设备的宽度（width）、高度（height）、方向（orientation）、画面...
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. **总结** 渐进增强通过逐步添加功能和样式，确保所有用户都能访问网站...