CSS3（四）Media Queries 与Responsive 设计

最新推荐文章于 2020-05-06 00:52:05 发布

灵熙兔

最新推荐文章于 2020-05-06 00:52:05 发布

阅读量507

点赞数

分类专栏：【HTML5+CSS3】文章标签： css

本文链接：https://blog.csdn.net/qq_25178609/article/details/52648841

版权

【HTML5+CSS3】专栏收录该内容

8 篇文章 0 订阅

订阅专栏

本文介绍了CSS3中的Media Queries和Responsive设计，讲解了媒体类型、引用方法及使用，强调了响应式设计的关键——媒体查询。内容涵盖流体网格、弹性图片、屏幕分辨率、断点设置和响应式布局技巧，同时提到了meta标签在响应式设计中的作用。

摘要由CSDN通过智能技术生成

随着科学技术不断的向前发展，网页的浏览终端越来越多样化，用户可以通过：宽屏电视、台式电脑、笔记本电脑、平板电脑和智能手机来访问你的网站。尽管你无法保证一个网站在不同屏幕尺寸和不同设备上看起来完全一模一样，但至少要让你的Web页面能适配用户的终端，让他更好的呈现在你的用户面前。

首先我们要了解常见的媒体类型：
Screen、All和Print为最常见的三种媒体类型。
Screen——电脑显示器
All——所有设备
Print——打印用纸或打印预览视图
1.媒体类型的引用方法
媒体类型的引用方法也有多种，常见的有：link标签、@import和CSS3新增的@media几种：
(1) link方法：通过link标签中的media属性来指定不同的媒体类型

<link rel="stylesheet" type="text/css" href="style.css" media="screen" />

(2) @import方法：@import可以引用样式文件，同样也可以用来引用媒体类型。@import引入媒体类型主要有两种方式，
一种是在样式中通过@import调用另一个样式文件；
另一种方法是在<head></head>标签中的<style></style>中引入，但这种使用方法在IE6~7都不被支持

@importurl(reset.css) screen;    //样式文件中调用另一个样式文件时，就可以指定对应的媒体类型。
@importurl(print.css) print;

<head>
<style type="text/css">
    @importurl(style.css) all;
</style>
</head>

(3) @media方法:
@media是CSS3中新引进的一个特性，被称为媒体查询。在页面中也可以通过这个属性来引入媒体类型。@media引入媒体类型和@import有点类似也具有两方式。

a. 在样式文件中引用媒体类型：

@media screen {
   选择器{/*你的样式代码写在这里…*/}
}

b.用@media引入媒体类型的方式是在<head>标签中的<style>中引用。

<head>
<style type="text/css">
    @media screen{
    选择器{/*你的样式代码写在这里…*/}
}
</style>
</head>

2 . Media Queries使用方法

@media 媒体类型and （媒体特性）{你的样式}

(1)媒体特性的书写方式和样式的书写方式非常相似，主要分为两个部分，第一个部分指的是媒体特性，第二部分为媒体特性所指定的值，而且这两个部分之间使用冒号分隔。例如：

(max-width: 480px)

媒体特性是通过min/max来表示大于等于或小于做为逻辑判断，而不是使用小于（<）和大于（>）这样的符号来判断

(2)实际项目中常用的方式

@media screen and (max-width:480px){    //媒体类型小于或等于指定的宽度时，样式生效
 .ads {   
   display:none;
  }
}
@media screen and (min-width:900px){  //媒体类型大于或等于指定宽度时，样式生效
.wrapper{width: 980px;}
}
@media screen and (min-width:600px) and (max-width:900px){      //多个媒体特性结合
  body {background-color:#f5f5f5;}
}

设备屏幕的输出宽度Device Width
在智能设备上，例如iPhone、iPad等，还可以根据屏幕设备的尺寸来设置相应的样式（或者调用相应的样式文件）。同样的，对于屏幕设备同样可以使用“min/max”对应参数，如“min-device-width”或者“max-device-width”。

<link rel="stylesheet" media="screen and (max-device-width:480px)" href="iphone.css" />

上面的代码指的是“iphone.css”样式适用于最大设备宽度为480px，比如说iPhone上的显示，这里的“max-device-width”所指的是设备的实际分辨率，也就是指可视面积分辨率。
not和only关键字
使用关键词“not”是用来排除某种制定的媒体类型，也就是用来排除符合表达式的设备。

@media not print and (max-width: 1200px){样式代码}
//式代码将被使用在“除”打印设备和设备宽度小于1200px下所有设备中。

only用来指定某种特定的媒体类型，可以用来排除不支持媒体查询的浏览器。

<linkrel="stylesheet" media="only screen and (max-device-width:240px)" href="android240.css" />

到目前为止，CSS3 Media Queries得到了众多浏览器支持，除了IE6-8浏览器不支持之外，在所有现代浏览器中都可以完美支持。还有一个与众不同的时，Media Queries在其他浏览器中不要像其他CSS3属性一样在不同的浏览器中添加前缀。

3.Responsive设计
RWD能让你的网页在不同的设备中展现不同的设计风格。”从这一点描述来说，RWD不是流体布局，也不是网格布局，而是一种独特的网页设计方法。

响应式设计要考虑元素布局的秩序，而且还需要做到“有求必应”，那就需要满足以下三个条件：
网站必须建立灵活的网格基础；
引用到网站的图片必须是可伸缩的；
不同的显示风格，需要在Media Queries上写不同的样式。

常见术语：
（1）流体网格
流体网格是一个简单的网格系统，这种网格设计参考了流体设计中的网格系统，将每个网格格子使用百分比单位来控制网格大小。这种网格系统最大的好处是让你的网格大小随时根据屏幕尺寸大小做出相对应的比例缩放。
（2）弹性图片
弹性图片指的是不给图片设置固定尺寸，而是根据流体网格进行缩放，用于适应各种网格的尺寸。而实现方法是比较简单，一句代码就能搞定的事情。

img {max-width:100%;}

不幸的是，这句代码在IE8浏览器存在一个严重的问题，让你的图片会失踪。

（3）媒体查询

媒体查询在CSS3中得到了强大的扩展。使用这个属性可以让你的设计根据用户终端设备适配对应的样式。这也是响应式设计中最为关键的。可以说Responsive设计离开了Medial Queries就失去了他生存的意义。简单的说媒体查询可以根据设备的尺寸，查询出适配的样式。Responsive设计最关注的就是：根据用户的使用设备的当前宽度，你的Web页面将加载一个备用的样式，实现特定的页面风格。
（4）屏幕分辨率
用户显示器的分辨率，是用户使用的设备浏览您的Web页面时的显示屏幕的分辨率，比如说智能手机浏览器、移动电脑浏览器、平板电脑浏览器和桌面浏览器的分辨率。Responsive设计利用Media Queries属性针对浏览器使用的分辨率来适配对应的CSS样式。因此屏幕分辨率在Responsive设计中是一个很重要的东西，因为只有知道Web页面要在哪种分辨率下显示何种效果，才能调用对应的样式。
（5）主要断点
简单的描述就是，设备宽度的临界点。其中媒体特性“min-width”和“max-width”对应的属性值就是响应式设计中的断点值。简单点说，就是使用主要断点和次要断点，创建媒体查询的条件。而每个断点会对应调用一个样式文件（或者样式代码）

4.Responsive布局技巧
在Responsive布局中，可以毫无保留的丢弃：
第一，尽量少用无关紧要的div；
第二，不要使用内联元素（inline）；
第三，尽量少用JS或flash；
第四，丢弃没用的绝对定位和浮动样式；
第五，摒弃任何冗余结构和不使用100%设置。

能帮助Responsive确定更好的布局呢？
第一，使用HTML5 Doctype和相关指南；
第二，重置好你的样式（reset.css）；
第三，一个简单的有语义的核心布局；
第四，给重要的网页元素使用简单的技巧，比如导航菜单之类元素。

5.Responsive设计——meta标签
在响应式设计中如果没有这个meta标签，你就是蹩脚的，响应式设计就是空谈。

其使用方法如下。

<meta name=”viewport” content=”” />

在content属性中主要包括以下属性值，用来处理可视区域。
width=宽度（数值 / device-width）
height=高度（数值 / device-height）
initial-scale=初始的缩放比例（范围从>0 到10）
minimum-scale=允许用户缩放到的最小比例
maximum-scale=允许用户缩放到的最大比例
user-scalable=用户是否可以手动缩 (no,yes)

针对移动浏览器端开发页面，不期望用户放大屏幕，且要求“视口（viewport）”宽度等于设备宽度，如何设置？

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />

在IE6-8中完全是不支持CSS3 Media。大家可以把这些样式加到你的样式文件中，或者单独创建一个名为“responsive.css”文件，并在相应的条件中写上你的样式，让他适合你的设计需求。

media-queries.js(http://code.google.com/p/css3-mediaqueries-js/)      

respond.js(https://github.com/scottjehl/Respond)

 <!—[if lt IE9]>
      <scriptsrc=http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js></script>
 <![endif]>

6.不同设备的分辨率设置

//1024px显屏
@media screen and (max-width : 1024px) {                    

}     
//800px显屏
@media screen and (max-width : 800px) {              

}     
//640px显屏
@media screen and (max-width : 640px) {              

}     
//iPad横板显屏
@media screen and (max-device-width: 1024px) and (orientation: landscape) {              

}     
//iPad竖板显屏
@media screen and (max-device-width: 768px) and (orientation: portrait) {         

}     
//iPhone 和 Smartphones
@media screen and (min-device-width: 320px) and (min-device-width: 480px) {              

}