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把自己冒充成更宽的屏幕。

本文为 H5EDU 机构官方 HTML5培训 教程，主要介绍：CSS基础教程 —— 媒体查询屏幕适配

CSS基础教程 -- 媒体查询屏幕适配相关推荐

css中的媒体查询_CSS中的媒体查询
css中的媒体查询 CSS | 媒体查询 (CSS | Media Queries) Creating a web page is not an easy task as it requires lo ...
CSS基础教程（下）
今天把看<CSS基础教程>的下半部分笔记贴出来,嘿嘿,希望也对大家有点好处. 一．文本 1. 基本字体属性下面看看字体的几个属性: 1)font-f ...
css做名单,css基础教程：2021年适合新手的7个CSS入门教程推荐
上一篇我们向同学们推荐了5个html入门教程,本篇我们继续向同学们精选推荐一些适合新手学习的CSS基础入门教程,欢迎学习! 首先我们来介绍什么是CSS?以及CSS的作用 CSS 是一种标准样式表语言, ...
DIV+CSS基础教程
DIV+CSS基础教程第一节了解DIV+CSS 一.什么是DIV+CSS DIV元素是html(超文本语言)中的一个元素,是标签,用来为HTML文档内大块(block-level)的内容提供结构 ...
移动web开发之rem布局（rem基础、媒体查询、 less 基础、rem适配方案）
移动web开发之rem布局一.rem基础 rem单位 rem (root em)是一个相对单位,类似于em,em是父元素字体大小. 不同的是rem的基准是相对于html元素的字体大小. 比如,根元素 ...
css media区间宽带显示,css媒体查询 @media适配不一样大小窗口
版权声明:本文为博主原创文章,未经博主容许不得转载. https://blog.csdn.net/Lockey23/article/details/75452536css CSS3 @media是什么 ...
教你@media媒体查询来适配ipad iphone5678plus 各种屏幕
<style lang="less" rel="stylesheet/less" type="text/less" scoped> ...
pc显示器分辨率前端_@media 响应式PC端媒体查询屏幕分辨率尺寸总结
最近在写一个PC端的活动页面,想让页面适配不同的分辨率,既然提出了这样的需求,那么我们就要去尽量满足.因为之前一直写的是固定版心,然后在将容器居中,这样写的话,就导致页面在低分辨屏幕下会出现横向的滚动 ...
css基础教程【学习笔记】
[前端总路线学习笔记] 文章目录 css基础一. css初识二. css语法规范三. 字体属性四. CSS注释五.开发工具六. 选择器七.文本属性八.css样式表: 1.内部样式表(嵌 ...
CSS基础教程（上） - 阿蜜果 - BlogJava
导读: 因为本人是个CSS盲,为了改善这种情况,特意扫了一下盲,前不久不买书时,看到一本不错的CSS基础书,顺手买了一本,觉得还不错,记了一下笔记,共享给大家. 一． CSS 入门 1. CSS 应用 ...

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

CSS基础教程 -- 媒体查询屏幕适配相关推荐

最新文章

热门文章