`
周大帅
  • 浏览: 26304 次
社区版块
存档分类
最新评论

CSS基础教程 -- 媒体查询屏幕适配

阅读更多
本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍:CSS基础教程 —— 媒体查询屏幕适配


响应式布局

Media Query 的使用方法
在上例中, 我们使用Media Queries来根据3种不同尺寸的窗口使用3种不同的样式。通过不同的媒体类型和条件定义样式表规则,媒体查询让CSS可以更精确作用于不同的媒体类型和同一媒体的不同条件。媒体查询的大部分媒体特性都接受min和max用于表达”大于或等于”和”小与或等于”。如:width会有min-width和max-width媒体查询可以被用在CSS中的@media和@import规则上,也可以被用在HTML和XML中。通过这个标签属性,我们可以很方便的在不同的设备下实现丰富的界面,特别是移动设备,将会运用更加的广泛。媒体查询能够获取的值如下:
 设备的宽和高device-width,device-heigth显示屏幕/触觉设备。
 渲染窗口的宽和高width,heigth显示屏幕/触觉设备。
 设备的手持方向,横向还是竖向orientation(portrait|lanscape)和打印机等。
 画面比例aspect-ratio点阵打印机等。
 设备比例device-aspect-ratio-点阵打印机等。
 对象颜色或颜色列表color,color-index显示屏幕。
 设备的分辨率resolution。

 语法结构及用法

媒体查询有两种使用方式, 一种是在CSS样式中内嵌“@media”,在同一个CSS中通过不同窗口编写不同的样式去选择。 另一种是使用外部样式表的引用, 在@import和link中使用“@media”,根据不同的窗口大小选择对应的样式文件。这两种方式的使用方法是一样的。Media Queries的使用方法如下所示:

@media 设备类型 only (选取条件)  not (选取条件)  and  (设备特性),设备二 { 样式代码 }

在CSS3中的Media Queries模块中支持对外部样式表的引用, 使用方法类型如下代码:

@import url(color.css) screen and (min-width: 1000px);                /*使用@import导入css文件*/
或:
<link rel="stylesheet" type="text/css" media="only screen and (max-width: 480px),only screen and (max-device-width: 480px)" href="link.css" rel="external nofollow" />   /*使用link导入外部css文件*/
简写:
<link rel="stylesheet" type="text/css" media="screen and (max-width: 480px)  href="link.css" />

上面使用中only可省略,限定于计算机显示器,第一个条件max-width是指渲染界面最大宽度,第二个条件max-device-width是指设备最大宽度。在样式表中内嵌@media的代码示例如下所示:

@media screen (min-device-width:1024px) and (max-width:989px), screen and (max-device-width:480px), (max-device-width:480px) and (orientation:landscape), (min-device-width:480px) and (max-device-width:1024px) and (orientation:portrait) { 样式代码 }
简写:
@media screen and (max-width:640px)  { 样式代码 }
在上面的示例代码中,设置了电脑显示器分辨率(宽度)大于或等于1024px(并且最大可见宽度为989px);屏宽在480px及其以下手持设备;屏宽在480px以及横向(即480尺寸平行于地面)放置的手持设备;屏宽大于或等于480px小于1024px以及垂直放置设备的css样式。从上面的例子可以看出,字符间以空格相连,选取条件包含在小括号内,样式代码为兼容设置的样式表,包含在中括号里面。only(限定某种设备,可省略),and(逻辑与),not(排除某种设备)为逻辑关键字,多种设备用逗号分隔,这一点继承了css基本语法。

 可用的设备类型

在上面的语法中,例如在CSS中嵌入“@media”的方式, 开头必须书写“@media”,然后指定设备类型(上例使用screen代表电脑显示器)。CSS中定义了10种设备类型,可以指定的值与该值所代表的设备类型如表1-20所示:
表1-20 在Media Queries中可以指定的值与该值所代表的设备类型
可以指定的值 设置类型
All 所有设备
Braille 盲文,即盲人用点字法触觉回馈设备
embossed 盲文打印机
handheld 手持的便携设备
Print 文档打印用纸或打印预览视图模式
projection 各种投影设备
Screen 彩色电脑显示器屏幕
Speech 语言和音频合成器
Tty 固定字母间距的网格的媒体,比如电传打字机和终端
Tv 电视机类型的设备

 可用的设备特性参数

通过设备类型可以区分使用的设备,再通过设备特性参数来设置同一设备的不同型号。例如,通过设备类型指定电脑显示器, 再通过设备特性参数指用多大屏幕的显示器。设备特性的书写方式与样式的书写方式很相似, 分为两个部分,当中由冒号分割, 冒号前书写设备的某种特性, 冒号后书写该特性的具体值。例如“(min-width:320px)”。CSS中的设置特性共有13种, 是一个类似于CSS属性的集合。但与CSS属性不同的是,大部分设备特性的指定接受min/max的前缀, 用来表示大于等于或小于等于的逻辑,以此避免使用“<”和“>”这些字符。对于这13种设备特性参数的说明如表1-21所示:
表1-21 13种设备特性的说明
特性 可指定值 可用媒体类型 是否接受
min/max前缀 特性说明
width 带单位的长度值
例如:640px 视觉屏幕/触摸设备 允许 定义输出设备中的页面可见区域宽度(单位一般为px),即浏览器窗口的宽度
heigth 带单位的长度值
例如:320px 视觉屏幕/触摸设备 允许 定义输出设备中的页面可见区域高度(单位一般为px),即浏览器窗口的高度
device-width 带单位的长度值
例如:640px 视觉屏幕/触摸设备 允许 定义输出设备的屏幕可见宽度(单位一般为px),即设备屏幕分辨率的宽度值
device-heigth 带单位的长度值
例如:320px 视觉屏幕/触摸设备 允许 定义输出设备的屏幕可见高度(单位一般为px) ,即设备屏幕分辨率的高度值
orientation 只能指定两个值:
portrait 或 landscape 位图介质类型 不允许 浏览器窗口的方向是纵向还是横向, 当窗口商度大于等于宽度值是该特性值为portait(横向),否则为landscape(竖向)
aspect-ratio 比例值
例如16/9 位图介质类型 允许 定义’width’与’height’的比率,即浏览器的长宽比
device-aspect-ratio 比例值
例如16/9 位图介质类型 允许 定义’device-width’与’device-height’的比率,即设备屏幕长宽比。如常见的显示器比率:4/3, 16/9,16/10
color 整数值 视觉媒体 允许 设备使用多少位的颜色值,如果不是彩色设备,则值等于0
color-index 整数值 视觉媒体 允许 色彩表中的色彩数
monochrome 整数值 视觉媒体 允许 定义在一个单色框架缓冲区中每像素包含的单色原件个数。如果不是单色设备,则值等于0
resolution 分辨率值
例如300dpi 位图介质类型 允许 定义设备的分辨率。如:96dpi,300dpi,118dpcm
scan 只能指定两个值:
progressive 或interlace 电视类 不允许 定义电视类设备的扫描方式, progressive逐行扫描,interlace隔行扫描
grid 只能指定两个值:
0 或1 栅格设备 不允许 用来查询输出设备是否使用栅格或基于位图。1代表是,0代表否

可以使用and关键字来指定当某种设备类型的某种特性的值满足某个条件时所使用的样式, 例如以下语句指定了当设备窗口宽度小于640px时所使用的样式:

@media screen and (max-width: 640px) { 样式代码 }

可以使用多条语句来将同一个样式应用于不同的设备类型和设备特性中, 指定方式类似如下所示:

@media handheld and (min-width:360px), screen and (max-width: 480px) { 样式代码 }

可以在表达式中加上not关键字或only关键字, not关键字表示对后面的表达式执行取反操作, 书写方法类似如下所示:

/* 样式代码将被使用在除便携设备之外的其他设备或非彩色便携设备中 */
@media not handheld and (color) { 样式代码 }
/* 样式代码将被使用在非彩色设备中 */
@media all and (not color) { 样式代码 }
使用only关键字的作用是让那些不支持Media Queries但是能够读取Media Type的设备的浏览器将表达式的样式隐藏起来。 例如:

@media only screen and (color) { 样式代码 }

上面的语句对于支持Media Queries的设备来说,将能够正确应用样式, 就像only不存在一样。对于不支持Media Queries但能够读取Media Type的设备(例如IE8只支持“@media screen”)来说, 由于先读到的是only而不是screen, 将忽略这个样式。对于不支持Media Queries的浏览器(例如IE8之前的浏览器)来说, 无论是否有only, 都将忽略这个样式。
在移动设备上设置原始大小显示

在iPhone系列和iPod touch使用的是Safari浏览器, 支持前面介绍的媒体查询表达式。 例如,使用iPhone分辨率是320px × 480px 去访问我们前面的布局示例,却不是我们想看到的结果, 并不是从上到下排列显示, 而是和电脑显示器访问的布局是一样的。为什么会这样?因为在iPhone中使用的Safari浏览器在进行页面显示时是将窗口的宽度作为980px进行显示的, 因为太多网页是按照800px左右标准进行制作的, 所以Safari浏览器默认按照980px的宽度来显示,就可以正常显示绝大多数的网页了。所以即使在页面中已经写好了页面在小尺寸窗口中运行的样式, iPhone中的Safari浏览器也不会使用这个样式, 而是选择窗口宽度为980px时所使用的样式。 所以我们需要在移动设备上设置原始大小显示和是否缩放的声明。是在页面的头部<head></head>之间加上下面这样的语句∶

<meta name="viewport" content="width=device-width; initial-scale=1.0" />

<meta name="viewport" content="width=600px " />
meta 标签的viewport属性是在移动设备上设置原始大小显示和是否缩放的声明。可以使用的参数设置如下∶
 width : viewport的宽度
 height : viewport的高度
 initial-scale : 初始的缩放比例
 minimum-scale : 允许用户缩放到的最小比例
 maximum-scale : 允许用户缩放到的最大比例
 user-scalable : 用户是否可以手动缩放

如果在页面中已经准备好了在小尺寸的窗口中使用的样式, 并且有可能在iPhone或iPod touch中被打开时,请不要忘记了加入<meta>标签并在标签中写入指定的窗口宽度。其实还可以通过viewport把自己冒充成更宽的屏幕。
分享到:
评论

相关推荐

    曹鹏CSS视频教程-61.CSS与媒体.rar

    【曹鹏CSS视频教程-61.CSS与媒体.rar】是一个针对网页设计师的教育资源,由知名讲师曹鹏主讲,旨在帮助学习者掌握CSS(层叠样式表)在网页设计中的应用,尤其是其与媒体查询相关的知识。CSS是构建美观、响应式网站的...

    CSS基础教程PDF

    ### CSS基础教程知识点详解 #### 一、CSS简介 **CSS**,全称为 **Cascading Style Sheets**(级联样式表),是一种用于定义HTML文档布局的语言。它可以帮助开发者更好地控制网页的外观,如字体、颜色、间距、大小...

    CSS-User-Profile-Card.rar

    - **响应式设计**:使用媒体查询(@media)适应不同设备的屏幕尺寸,实现响应式布局。 2. **用户资料卡设计**: - **卡片布局**:通常采用流式布局(如flexbox或grid)创建卡片结构,使内容在不同设备上适配显示...

    CSS经典电子教程大全

    1. **CSS基础**:教程可能会从CSS的基本语法开始讲解,包括选择器(如元素选择器、类选择器、ID选择器等)、属性(如颜色、字体、大小、边距等)以及如何将样式应用于HTML元素。 2. **盒模型**:CSS盒模型是理解...

    织梦地带CSS精彩教程.rar

    1. **CSS基础**:教程可能会从最基础的CSS语法开始,包括选择器的使用(如ID选择器、类选择器、元素选择器等)、属性定义(如颜色、字体、边距等)以及盒模型概念的解释。这些都是初学者入门CSS时必须掌握的基本知识...

    精通CSS--DIV网页样式

    - **响应式设计**:使用媒体查询(`media queries`)实现不同设备和屏幕尺寸下的样式适配。 4. **DIV布局** - **DIV基本概念**:理解`&lt;div&gt;`元素作为块级容器的角色,以及如何通过CSS控制其大小和位置。 - **...

    CSS3媒体查询Media Queries基础学习教程

    CSS3媒体查询(Media Queries)是网页设计中用于实现响应式布局的关键技术,它允许开发者根据设备特性,如视口宽度、颜色深度等,来应用不同的样式规则。媒体查询的基本结构包括媒体类型和一个或多个媒体特性表达式...

    iPhoneX 媒体查询适配的方法教程

    在本文中,我们将深入探讨如何使用媒体查询对iPhone X进行适配,以便在这款设备上获得最佳的用户体验。媒体查询是Web开发中的一个重要工具,它允许我们根据设备的特性,如屏幕尺寸、分辨率和方向来应用不同的样式。...

    基础的CSS教程.rar

    5. **响应式设计**:利用媒体查询(`@media`)实现不同设备和屏幕尺寸下的适配。 6. **动画和过渡**:使用`transition`和`animation`属性创建动态效果。 7. **预处理器**:如Sass、Less等,它们提供变量、嵌套规则、...

    div+css float 布局,适配手机

    在高洛峰老师的 `div+css` 视频教程中,他可能详细讲解了如何创建浮动布局,包括设置 `div` 的宽高、设置 `float` 属性、清理浮动(clear floats)以防止父元素高度塌陷,以及如何使用媒体查询进行响应式设计。...

    HTML5与CSS3基础教程(第8版)中文高清版

    4. **响应式设计**:媒体查询`@media`使页面可以根据设备的不同特性(如屏幕尺寸、分辨率)进行适配。 5. **转换与动画**:`transform`和`transition`属性实现了元素的平滑移动和变形,而`animation`则可以创建复杂...

    CSS大师教程

    8. **响应式设计**:理解媒体查询@media,实现不同设备和屏幕尺寸下的样式适配。 9. **浏览器兼容性**:了解不同浏览器对CSS特性的支持情况,学习如何使用Can I Use网站进行查阅,以及使用polyfill和fallback策略...

    div+css网页布局入门+XHTML与CSS基础

    7. **响应式设计**:利用媒体查询(media queries)实现不同设备和屏幕尺寸下的适配,确保网页在手机、平板电脑和桌面电脑上的良好显示。 8. **浏览器兼容性**:了解不同浏览器对CSS特性的支持情况,学习如何使用...

    DIV+CSS的网站设计教程下载

    - **响应式设计**:利用媒体查询(`@media`)实现不同屏幕尺寸下的适配,使网站在各种设备上呈现良好效果。 - **Flexbox**:弹性盒子模型允许灵活地对元素进行布局,支持动态调整元素的大小和位置。 - **Grid布局**:...

    css经典压缩包教程

    4. **响应式设计**:利用媒体查询实现不同设备的适配,打造跨平台的用户体验。 5. **动画与过渡**:利用CSS动画和过渡效果增强用户交互。 6. **CSS预处理器**:如Sass和Less,让CSS编写更高效,更易于维护。 7. **...

    关于CSS知识的学习教程

    - 媒体查询:允许内容根据设备特性(如屏幕尺寸、分辨率等)进行适配。 - 弹性布局(Flexbox)和网格布局(Grid)都支持响应式设计,可轻松创建适应不同屏幕尺寸的布局。 5. **CSS预处理器(如Sass、Less)** - ...

    Div+CSS基础代码网页布局+实例教程.pdf

    【Div+CSS基础代码网页布局+实例教程】 Div+CSS是一种网页设计技术,它通过将内容(HTML元素)和样式(CSS样式表)分离,提高了网页的可维护性和可访问性。CSS全称Cascading Style Sheets,中文译为层叠样式表,...

    css-quickstart.rar_css_site:www.pudn.com

    5. **响应式设计**:学习媒体查询@media,实现网页在不同设备和屏幕尺寸上的适配。 6. **CSS动画和过渡**:了解如何创建动态效果,如淡入淡出、滑动等,以及如何使用transition和animation属性。 7. **CSS预处理器...

    精通CSS(英语版)

    - 媒体查询:实现响应式设计,适配不同屏幕和设备。 - 动画和转换:CSS3提供的transform、transition和animation属性。 - 多列布局:创建多列文本布局的样式规则。 - Flexbox:弹性盒子模型布局,用于更加灵活地...

Global site tag (gtag.js) - Google Analytics