用媒体查询实现web响应式开发小记
2017-07-02 16:46
525 查看
一、是什么响应式开发
不同设备电脑、平板、手机的屏幕大小是不一样的，如何在不同大小屏幕的设备上正常的显示网页？有两中方案：
服务器端实现响应式：服务器根据不同设备发来的请求，返回不一样的网页。这样的缺点很明显，就是针对不同设备都需要开发多个版本的网页，开发成本和时间高，而且不利于后期的维护。
客户端实现响应式：一个web界面可以在不同的设备上正常显示，网页根据不同的设备屏幕自适应的排版。这样开发起来比较方便，维护也相对简单。缺点就是一个设备需要加载所有的css文件，流量消耗大。
二、利用媒值体查询实现响应式的布局
css3定义了媒体查询@media，可以在css中获取得到设备的width和height。一般我们的页面适应是根据宽度来设置的。用法如下：
@media 设备类型 限制条件 { }
其中有如下的设备类型：
我们常用的是screen。其他的作为仅作为了解。
后面的限制条件中的值的设置主要用到以下几种：
height 定义输出设备中的页面可见区域高度
width 定义输出设备中的页面可见区域宽度
device-height 定义输出设备的屏幕可见高度
device-width 定义输出设备的屏幕可见宽度
resolution 定义设备的分辨率。如：96dpi, 300dpi，118dpcm
color 定义输出设备每一个彩色原件的个数，如果不是彩色设备，则值等于0。
具体的区别简单来讲是：width 指的是显示区域的宽度，比如浏览器的显示区域宽度，device-width 指的是设备整个渲染（显示）区域的宽度，比如设备的大小 。
如果想了解这里面的具体差异可以参考这两篇文章，了解设备分辨率、像素等概念： http://justcode.ikeepstudying.com/2016/07/css3-%E7%A7%BB%E5%8A%A8%E7%AB%AF%E5%BC%80%E5%8F%91%E4%B8%AD-max-device-width-%E4%B8%8E-max-width-%E7%9A%84%E5%8C%BA%E5%88%AB/ https://www.qcloud.com/community/article/646185 一般来讲，如何你需要调整浏览器大小查看页面的变化，那开发过程中就使用 max-width，CSS媒体查询4级草案中废弃了一些特性，特别是device-height、device-width和device-aspect-ratio（参见：https://drafts.csswg.org/mediaqueries-4/#mf-deprecated）。虽然已经支持它们的浏览器还会继续支持，但不建议在新写的样式表中再使用它们。
接下来，我们举个例子说明一下：@media screen and (min-width: 680px) {
div {
background-color: black ;
}
}上述代码意思就是浏览器的宽度大于等于680px时，设置div的背景颜色为黑色。
同样，我们可以使用max-width来限制css代码的执行条件，也可以使用and链接多个限制：@media screen and (max-width: 680px) {
div {
background-color: white ;
}
}
@media screen and (min-width: 480px) and (max-width: 680px) {
div {
background-color: white ;
}
}也可以在表达式中加入only关键字，作用让那些不支持Media Queries但是能够读取Media Type的设备的浏览器将表达式的样式隐藏起来。@media only screen and ( color ) {
div {
background-color: black ;
}
}在css3中媒体查询支持堆外部样式表的引用，使用如下：
在css中引入@import url(temp.css) screen and (min-width:1000px) ;或者
在html中引入<link rel="stylesheet" type="text/css" media="screen and (max-width:480px)" href="temp.css"> 从浏览器的角度看，CSS属于“阻塞渲染”的资源。换句话说，浏览器需要下载并解析链接的CSS文件，然后再渲染页面。
不过，现代浏览器都很聪明，知道哪些样式表（在头部通过媒体查询链接的样式表）必须立即分析，而哪些样式可以等到页面初始渲染结束后再处理。
在这些浏览器看来，不符合媒体查询指定条件（比如屏幕比媒体查询指定的小）的CSS文件可以延缓执行（deferred），到页面初始加载后再处理。
所以，这样的好处是可以根据不同的设备宽度来优先加载不同的css文件，便让用户感觉页面加载速度更快。
但是，需要强调的是所有链接的文件都会被下载下来，只是如果有的文件不必立即应用，那浏览器就不会让它影响页面的渲染。
三、特殊处理
在开发中我们可能出现这样的情况，明明已经写好了针对小屏幕的网页样式，但是在手机浏览器中页面显示不是按照小屏幕的网页样式显示，而是跟PC端一样。这时因为有的浏览器是将浏览器宽度伪装成了电脑端的宽度，一般是980px，这样css显示的时候是按照浏览器宽度是980px来显示的，而不是按照设备实际的屏幕大小。这个比较明显的就是苹果的浏览器Safari。
关于这个具体问题的解释参见： https://www.qcloud.com/community/article/646185 中讲解视口部分。
要解决这个问题，只需要在html的<head></head>加入：<meta name="viewport" content="width=device-width"; initial-scale="1.0">这样的话就成功设置了浏览器的宽度是为设备宽度，而不是自己定义的宽度。initial-scale是初始的放缩比还可以在该标签中设置如下参数：
minimum-scale:允许用户放缩到的最小比例
maximum-scale:允许用户放缩到的最大比例
user-scalable:用户是否可以手动放缩。
老式浏览器（IE6、7、8）不支持媒体查询，所以需要手动加入加入媒体查询的js文件：<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></s
四、响应式文字显示问题
字体的单位有px、em、百分比、rem、
px实际上就是像素，用PX设置字体大小时，比较稳定和精确。所有浏览器和设备中的字体保持相同大小。但是这种特性与我们需要的响应式相违背。
em是相对值，是根据基准来缩放字体的大小，而非具体值。em是根据父元素的属性值计算的。比如我们设置一个div的font-size为16px，那么在它的子元素中1em指的是16px，2em是32px，0,。5em是8px。em控制不太精确，而且对于元素字体的设置，总需要确定父元素的字体大小。
百分比:把 font-size 设置为基于父元素的一个百分比值。与em类似。
rem也是一个相对值，不同于em的是rem是的基准元素不是父类元素，而是根元素<html>。这样我们只需要在根元素设置一个参考值就可以了。
兼容性:所有浏览器都支持px, IE6到8不支持em和rem。在iPhone上使用
-webkit-text-size-adjust: none;
}
五、响应式图片、视频显示问题
一种是根据不同大小的屏幕，加载不同分辨率的图片，这样效果好些。
还有一种可以写上如下代码：img { max-width: 100%;}
/*老版本的IE不支持max-width，所以只好写成：*/
img { width: 100%; }或者：img {
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}对于视频：.video embed,
.video object,
.video iframe {
width: 100%;
height: auto;
}对于大多数嵌入视频的网站以下代码也有用：
不同设备电脑、平板、手机的屏幕大小是不一样的，如何在不同大小屏幕的设备上正常的显示网页？有两中方案：
服务器端实现响应式：服务器根据不同设备发来的请求，返回不一样的网页。这样的缺点很明显，就是针对不同设备都需要开发多个版本的网页，开发成本和时间高，而且不利于后期的维护。
客户端实现响应式：一个web界面可以在不同的设备上正常显示，网页根据不同的设备屏幕自适应的排版。这样开发起来比较方便，维护也相对简单。缺点就是一个设备需要加载所有的css文件，流量消耗大。
二、利用媒值体查询实现响应式的布局
css3定义了媒体查询@media，可以在css中获取得到设备的width和height。一般我们的页面适应是根据宽度来设置的。用法如下：
@media 设备类型 限制条件 { }
其中有如下的设备类型：
我们常用的是screen。其他的作为仅作为了解。
后面的限制条件中的值的设置主要用到以下几种：
height 定义输出设备中的页面可见区域高度
width 定义输出设备中的页面可见区域宽度
device-height 定义输出设备的屏幕可见高度
device-width 定义输出设备的屏幕可见宽度
resolution 定义设备的分辨率。如：96dpi, 300dpi，118dpcm
color 定义输出设备每一个彩色原件的个数，如果不是彩色设备，则值等于0。
具体的区别简单来讲是：width 指的是显示区域的宽度，比如浏览器的显示区域宽度，device-width 指的是设备整个渲染（显示）区域的宽度，比如设备的大小 。
如果想了解这里面的具体差异可以参考这两篇文章，了解设备分辨率、像素等概念： http://justcode.ikeepstudying.com/2016/07/css3-%E7%A7%BB%E5%8A%A8%E7%AB%AF%E5%BC%80%E5%8F%91%E4%B8%AD-max-device-width-%E4%B8%8E-max-width-%E7%9A%84%E5%8C%BA%E5%88%AB/ https://www.qcloud.com/community/article/646185 一般来讲，如何你需要调整浏览器大小查看页面的变化，那开发过程中就使用 max-width，CSS媒体查询4级草案中废弃了一些特性，特别是device-height、device-width和device-aspect-ratio（参见：https://drafts.csswg.org/mediaqueries-4/#mf-deprecated）。虽然已经支持它们的浏览器还会继续支持，但不建议在新写的样式表中再使用它们。
接下来，我们举个例子说明一下：@media screen and (min-width: 680px) {
div {
background-color: black ;
}
}上述代码意思就是浏览器的宽度大于等于680px时，设置div的背景颜色为黑色。
同样，我们可以使用max-width来限制css代码的执行条件，也可以使用and链接多个限制：@media screen and (max-width: 680px) {
div {
background-color: white ;
}
}
@media screen and (min-width: 480px) and (max-width: 680px) {
div {
background-color: white ;
}
}也可以在表达式中加入only关键字，作用让那些不支持Media Queries但是能够读取Media Type的设备的浏览器将表达式的样式隐藏起来。@media only screen and ( color ) {
div {
background-color: black ;
}
}在css3中媒体查询支持堆外部样式表的引用，使用如下：
在css中引入@import url(temp.css) screen and (min-width:1000px) ;或者
在html中引入<link rel="stylesheet" type="text/css" media="screen and (max-width:480px)" href="temp.css"> 从浏览器的角度看，CSS属于“阻塞渲染”的资源。换句话说，浏览器需要下载并解析链接的CSS文件，然后再渲染页面。
不过，现代浏览器都很聪明，知道哪些样式表（在头部通过媒体查询链接的样式表）必须立即分析，而哪些样式可以等到页面初始渲染结束后再处理。
在这些浏览器看来，不符合媒体查询指定条件（比如屏幕比媒体查询指定的小）的CSS文件可以延缓执行（deferred），到页面初始加载后再处理。
所以，这样的好处是可以根据不同的设备宽度来优先加载不同的css文件，便让用户感觉页面加载速度更快。
但是，需要强调的是所有链接的文件都会被下载下来，只是如果有的文件不必立即应用，那浏览器就不会让它影响页面的渲染。
三、特殊处理
在开发中我们可能出现这样的情况，明明已经写好了针对小屏幕的网页样式，但是在手机浏览器中页面显示不是按照小屏幕的网页样式显示，而是跟PC端一样。这时因为有的浏览器是将浏览器宽度伪装成了电脑端的宽度，一般是980px，这样css显示的时候是按照浏览器宽度是980px来显示的，而不是按照设备实际的屏幕大小。这个比较明显的就是苹果的浏览器Safari。
关于这个具体问题的解释参见： https://www.qcloud.com/community/article/646185 中讲解视口部分。
要解决这个问题，只需要在html的<head></head>加入：<meta name="viewport" content="width=device-width"; initial-scale="1.0">这样的话就成功设置了浏览器的宽度是为设备宽度，而不是自己定义的宽度。initial-scale是初始的放缩比还可以在该标签中设置如下参数：
minimum-scale:允许用户放缩到的最小比例
maximum-scale:允许用户放缩到的最大比例
user-scalable:用户是否可以手动放缩。
老式浏览器（IE6、7、8）不支持媒体查询，所以需要手动加入加入媒体查询的js文件：<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></s
四、响应式文字显示问题
字体的单位有px、em、百分比、rem、
px实际上就是像素，用PX设置字体大小时，比较稳定和精确。所有浏览器和设备中的字体保持相同大小。但是这种特性与我们需要的响应式相违背。
em是相对值，是根据基准来缩放字体的大小，而非具体值。em是根据父元素的属性值计算的。比如我们设置一个div的font-size为16px，那么在它的子元素中1em指的是16px，2em是32px，0,。5em是8px。em控制不太精确，而且对于元素字体的设置，总需要确定父元素的字体大小。
百分比:把 font-size 设置为基于父元素的一个百分比值。与em类似。
rem也是一个相对值，不同于em的是rem是的基准元素不是父类元素，而是根元素<html>。这样我们只需要在根元素设置一个参考值就可以了。
兼容性:所有浏览器都支持px, IE6到8不支持em和rem。在iPhone上使用
-webkit-text-size-adjust:none来禁用文本大小调整。html {
-webkit-text-size-adjust: none;
}
五、响应式图片、视频显示问题
一种是根据不同大小的屏幕，加载不同分辨率的图片，这样效果好些。
还有一种可以写上如下代码：img { max-width: 100%;}
/*老版本的IE不支持max-width，所以只好写成：*/
img { width: 100%; }或者：img {
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}对于视频：.video embed,
.video object,
.video iframe {
width: 100%;
height: auto;
}对于大多数嵌入视频的网站以下代码也有用：
img, object { max-width: 100%;}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 前端开发响应式设计之媒体查询（bootstrap）
- web 开发中的条件查询实现
- 通过媒体查询实现响应式
- 响应式开发从原理到实战案例（四）：媒体查询语法介绍
- 用百分比布局和媒体查询@media来实现响应式网页的编码
- Spring开发复习小记（1）-实现一个不需要写Web.xml的Web App
- css媒体查询实现响应式设计
- web移动端开发(3)-媒体查询
- 项目开发之rem加媒体查询实现移动端布局
- 响应式媒体查询小记
- 响应式开发中的媒体查询
- 响应式开发从原理到实战案例（五）：使用媒体查询改进响应式页面
- 媒体查询实现响应式设计
- 【C#】对异步请求处理程序IHttpAsyncHandler的理解和分享一个易用性封装 【手记】走近科学之为什么明明实现了IEnumerable<T>的类型却不能调用LINQ扩展方法 【手记】手机网页弹出层后屏蔽底层的滑动响应 【手记】ASP.NET提示“未能创建类型”处理 【Web】一个非常简单的移动web消息框 【手记】解决EXCEL跑SQL遇“查询无法运行或数据库表无法打开...”
- 移动端开发-viewport实现响应式设计
- lotus notes 开发中BS下实现组合查询的方法
- AspNet.WebAPI.OData.ODataPQ实现WebAPI的分页查询服务-（个人拙笔）
- iOS开发之利用web表单上传媒体资源（照片／视频）
- 利用jetty实现超轻量级web开发
- EBS Form开发利用QUERY_FIND来实现最简单的查询功能