详细介绍与利用方法,响应式设计的形式

谈到响应式布局,先前也说过很多了,总体归纳成一句话:通过Media媒体查询特性,在不同尺寸的屏幕上展示不同的CSS样式,真正做到了“一次编写,各屏使用”。目前这种方法只支持在高富帅浏览器上。但是对于IE6-8我们还是要处理的。我目前处理低端浏览器的方法主要是通过判断针对IE6/7/8新增一个专属样式,然后在CSS样式中设置其最小宽度,如果在浏览器尺寸小于1000px的时候,底部就会出现滚动条。具体代码如下:

CSS3 Media Queries 详细介绍与使用方法[转],css3queries

Media Queries 就是要在支援CSS3
的浏览器中才能正常工作,IE8 以下不支援。 而Media Queries
的套用方法千变万化,要套用在什么样的装置中,都可以自己来定义。

 

一种让 IE6/7/8 支持 media query 响应式设计的方法,ie6query

在不同的浏览器宽度下使用不同的 CSS 声明,常见的方案是使用 media
query,但这个方案不支持 IE9 以下浏览器。

国外比较流行的 UI 框架 bootstrap v3 版本中使用 media query
技术实现了栅格布局 ,但要兼容 IE8 的话,( IE6/7
没有中国占比那么高,所以不用兼容)需要引入 Respond.js 的方案。

 

该方案的原理分以下 4 步:

1、在样式 link 之后,载入 respond.js ,该脚本会获取在他之前出现的 link
节点到一个数组

2、发送 ajax 请求重新获取 link 数组中 css 文件文本内容

3、通过分析文本内容中 @media 类声明,重新计算并应用相关样式

4、在 window.resize 时,触发第 3 步逻辑

 

这里的问题点有两个:

1、第 2 步是否会造成重复的请求消耗?

2、如果 css 静态资源存放域名与当前页面不同,势必会遇到 js
同源策略的限制,如何突破跨域问题?

 

问题 1 比较好回答,基本包括 IE 在内的所有浏览器都会对 GET
请求进行缓存,由于在第 1 步的时候浏览器已经请求过所有的 CSS
文件,因此在第 2 步 ajax
的时候会直接使用本地缓存,不会造成性能损耗。但由于需引用一个
respond.proxy.gif 来 hack IE 路径问题,可能会造成一个额外的请求损耗。

 

问题 2 确实存在,Respond.js 通过 iframe proxy file
的方案突破了同源策略,详细的讲解可参考这篇文章《Respond.js让IE6-8支持CSS3
Media Query》或自行百度相关JS跨域知识。但在 Respond.js
场景中会造成两个问题:

1、由于 iframe 的创建是异步的,respond.proxy.js
无法阻塞渲染,势必会造成页面样式的闪动(先应用了默认样式,第 3
步样式分析完毕后,又重新应用一次样式)

2、由于 iframe proxy file 在 css
资源请求完成时的事件无法主动回调(子iframe无法访问非同源父窗口),而是通过父窗口的一个定时器不断读取子窗口
window.name 值来实现被动通讯,因此样式的渲染就存在进一步的延迟。

 

如果使用场景无法接收问题 2
所带来的负面影响(有情怀的前端工程师都会把静态资源部署到一个独立域名,以提升网页性能,而且也无法接受页面出现明显的重绘这种体验损失),则需要考虑其他方案(另外
Respond.js 项目作者已经有几年没有维护了,部分BUG还没修复
)。本文就此问题发散出一个基于 SASS + JS
的解决方案,以供参考。思路如下:

 

1、通常屏幕的分辨率宽度是符合一定规范的,而PC端网站栅格布局的常见宽度是可以穷举的:1024px、1280px、1440px、1600px、
1920px

2、在样式中,针对不同的浏览器宽度,我们可以复写多条样式规则,例如 body{}
、.w1280px body{} 、.w1440px body{},达到个性化的目的

3、当 window.resize 时,动态的在 html 节点上改变预设好的宽度 className
,例如宽度 width = 1620px 时,满足 width > 1600px && width <
1920px ,因此 html.classList.add(‘w1600px’)

 

以上方法十分直观,IE6/7/8 使用以上方案,其他支持 media query
的浏览器则使用 @media only screen and (min-width: 1620px)  的 css
样式方案。对于样式维护性的问题(写一大坨 @media 和 .w1440px body
之类的相同样式肯定不利于维护),我们通过 SASS mixin
来解决,具体代码参考以下样式:

 

@mixin mediaWidth($min-width: 1024px, $max-width: null) {
    $widthSet: (1024px, 1280px, 1440px, 1600px, 1920px);
    $selector: ();

    @if $max-width {
        @media only screen and (min-width: $min-width) and (max-width: $max-width){ 
            @content; 
        }
    } @else {
        @media only screen and (min-width: $min-width) {
            @content; 
        }
    }

    @each $item in $widthSet {
        @if $max-width {
            @if $item >= $min-width and $item < $max-width {
                $selector: append($selector, unquote('.w#{$item} &'), 'comma');
            }
        } @else {
            @if $item >= $min-width{
                $selector: append($selector, unquote('.w#{$item} &'), 'comma');
            }
        }
    }

    #{$selector}{
        @content;
    }

}

body{
    width: 1024px;
    background-color: red;

    @include mediaWidth(1024px) {
        width: 1024px;
        background-color: orange;
    }

    @include mediaWidth(1280px, 1440px) {
        width: 1280px;
        background-color: green;
    }

    @include mediaWidth(1600px) {
        width: 1600px;
        background-color: blue;
    }

}

 

以上 SASS 编译之后的 CSS 为:

 

body {
    width: 1024px;
    background-color: red;
}
@media only screen and (min-width: 1024px) {
    body {
        width: 1024px;
        background-color: orange;
   }
}
.w1024px body, .w1280px body, .w1440px body, .w1600px body, .w1920px body {
    width: 1024px;
    background-color: orange;
}
@media only screen and (min-width: 1280px) and (max-width: 1440px) {
    body {
        width: 1280px;
        background-color: green;
   }
}
.w1280px body {
    width: 1280px;
    background-color: green;
}
@media only screen and (min-width: 1600px) {
    body {
        width: 1600px;
        background-color: blue;
   }
}
.w1600px body, .w1920px body {
    width: 1600px;
    background-color: blue;
}

 

问题一:如果项目中没用到 SASS 怎么办?

从实际项目经验来看,SASS
的引入可以大幅提高样式文件的维护性,而且不会对前端项目流程带来任何影响,因为你可以直接用编辑器的编译工具在保存文件时同步编译出
CSS 文件,例如 sublime text 的 sass build 和 build on save
插件,更不用说 sass 命令行、compass、grunt、gulp 之类的工具了。

 

问题二:如果不会 SASS 怎么办?

学就是了,看看这个就知道有多简单了《SASS用法指南》。

 

以上代码示例,参看此 demo:

 

IE6/7/8 支持 media query
响应式设计的方法,ie6query 在不同的浏览器宽度下使用不同的 CSS
声明,常见的方案是使用 media query,但这个方…

在介绍新方法之前,我们可以先回顾一下先前发表过的相关响应式的知识:

关于Media Queries

到底什么是Media Queries ? 一般我们在开发HTML + CSS 网页中,都会有一份CSS
来控制网页的样式表。 而随着各式各样不同大小、长宽与解析度的装置的兴起,我们在开发网页只考虑到自己的萤幕显示的如何,是多么的肤浅哪。 So,在开发者的萤幕看到的网页或许很漂亮,那,其他人的萤幕呢? 所以,我们需要的是能够控制不同大小的萤幕(装置),在其上所显示出来的样式,让各式各样来自不同地方的User
都能够有最佳的浏览体验。

  • 出生年代:CSS3
  • 支援状况:除IE8以下不支援外,其余较新款浏览器接皆支援(详细支援状况:  )

较佳的开发步骤:

■ 蓦然回首,PC网站移动化已经不再是梦■ Media
Query实现响应式布局的判断汇总■ 如何实现网页中字体响应式■ 用Media
Query实现响应式Web布局■ 推荐15款响应式Web设计工具■
蓦然回首,PC网站移动化已经不再是梦

你可以先看例子

在国外有一个网站专门搜集各式各样的Media
Queries效果,网站名称就叫做「 Media
Queries 」,网址: 。 进到该网站之后,你会看到每一列都有4
张网站的截图,从左开始是萤幕宽度较小的行动装置,一直到右边则是在传统PC
的较大萤幕上。 而在传统PC
中,会将许多元素并排;在手机中,会变成只有一行。

图片 1

其实上面的方法是最简单的处理方法了,今天主要是想说下另外一种方法:使用Javascript来实现响应式布局。其原理是:针对浏览器状态做出不同反应的JavaScript代码。

 

先前在百度博客上看过方法,我自己也总结了下,主要分为两种方法:

Media Queries 怎么写

Media Queries
其实说简单也很简单,你可以只使用下面的几行CSS,再针对不同装置去设CSS
属性就好了。 这个段落将由浅入深,从最简单、最Easy、最没挑战性的使用宽度来玩。

onresize

Media Queries 有两种使用方法

  • 在同一个CSS 档案中,用Media Queries @media
    来判断使用者之萤幕宽度,选择载入哪一段CSS。
  • 在HTML 的<link> 载入的地方,用media
    属性判断使用者之装置/ 视窗宽度,选择载入哪一个CSS 档案。

以上两种则一即可,使用第一种的话要写好几遍<link>
标签,另一种要在同一个CSS 档案中写好几遍@media。效果相同,选择自己喜欢的方式即可。 (网路上的Framework
都是第1种,如Bootstrap。)

Onresize其实就是一个浏览器事件啊,在IE中也是可以使用的,我们来看下面的代码:

@media 用宽度( width ) 判断

下面的语法,是最常用到的Media
Queries:(下方为同一档案之内容)

Html代码  图片 2

  1. //全部的使用者都會載入這裡的 CSS。  
  2.    
  3. @media screen and (min-width: 1200px) {  
  4.     // 如果使用者之視窗寬度 >= 1200px,將會再載入這裡的 CSS。  
  5. }  
  6.    
  7. @media screen and (min-width: 768px) and (max-width: 979px) {  
  8.     // 如果使用者之視窗寬度介於 768px ~ 979px,將會再載入這裡的 CSS。     
  9. }  
  10.    
  11. @media screen and (max-width: 767px) {  
  12.     // 如果使用者之視窗寬度 <= 768px,將會再載入這裡的 CSS。     
  13. }  
  14.    
  15. @media screen and (max-device-width: 480px) {  
  16.     // 如果使用者之裝置寬度 <= 480px,將會再載入這裡的 CSS。  
  17. }  

 

在Media Queries 中,我们最常使用min-width
和max-width 来判断使用者的视窗宽度,而max-device-width
则是使用者「装置」的最大宽度。 width
和device-width 差在哪里?

  • width :
    因为浏览器可以自由调整宽度,所以这边指的是该浏览视窗的宽度。
  • device-width :
    就算你把浏览器视窗弄到符合最大(小)宽度,还是不会生效。 因为,device-width
    指的是使用者的「装置」最大宽度,而不是浏览器视窗。 所以,device-width
    常用在判断手机上。

所以,你也可以自己加上其他的条件下去。 要注意的是,每一个条件之间请用and
来分隔,并要适时加上括号以免错误。

min-width 是最小宽度;max-width
是最大宽度,可以用来表示一定的范围。

varresizeMethod=function(){

<link> 写在HTML 里头的判断

上一节的语法,你也可以把它个别拆成好几个档案,然后用HTML
的<link> 来载入并且判断。 下面为HTML
代码:

Html代码  图片 3

  1. <link rel=”stylesheet” type=”text/css” href=”all.css” media=”screen”>  
  2. <link rel=”stylesheet” type=”text/css” href=”a.css” media=”screen and (max-width: 767px)”>  
  3. <link rel=”stylesheet” type=”text/css” href=”b.css” media=”screen and (min-width: 768px) and (max-width: 979px)”>  
  4. <link rel=”stylesheet” type=”text/css” href=”c.css” media=”screen and (min-width: 1200px)”>  
  5. <link rel=”stylesheet” type=”text/css” href=”d.css” media=”screen and (max-device-width: 480px)”>  

 

我们就可以用link 中的media
属性来判断使用者的视窗/ 装置宽度,如上。 之后,在每一个css
档案中你就可以写若使用者宽度符合条件的CSS 。 如a.css 中,就是要写如果使用者之视窗宽度<=
768px,要再载入的CSS。

if(document.body.clientWidth<768){

注意事项

在Media Queries
中的CSS,其效果是覆盖原本预设的CSS。 所以,你要先有一份完整的CSS,再使用Medai
Queries,对细部元素做调整。 所以,绝对不是把全部的CSS 复制一遍到Media Queries
中再修改喔!

console.log;

 

//绑定事件处理函数到resize事件

Viewport

如果网页没有做Responsive Web Design
的话,手机的浏览器会自动假装解析度变很大,会让网页完整显示。 但是,这就让字变得很小,使用者还要去做放大而不能直接阅读。 而这个meta 标签是为了防止这样的情形发生( iphone
据说会有此情形),让网页显示的宽度就直接是装置的宽度,不会把网页硬塞。 这段只要加在HTML 的<head>
里头即可。

Html代码  图片 4

  1. <meta name=”viewport” content=”width=device-width; initial-scale=1.0″ />  

window.addEventListener(“resize”,resizeMethod,true);

针对某装置下去做设定、快速使用: Media Query Snippets

Media Query
Snippets这个网站搜集了很多行动装置的@media条件式,你可以直接复制来使用。 如下图,有一堆的装置你可以拿去设定:(网址:  )

图片 5

另外,其实你不太需要去对每个装置都去做调整,基本上使用行动装置的max-device-width:
480px ,就绰绰有余了。 上面的网站,是帮你做个整理,以便不时之需。

我们只需要为全局对象window绑定一个resize事件,然后在事件处理函数中对浏览器当前的状态作出判断,然后运行相应的JavaScript代码即可。

 

matchMedia

IE8 Hack

目前在网路上有人制作了让不支援Media Queries
的浏览器透过Javascript 的方式也能支援。 而目前这个似乎还是有点小问题,实际能不能使用请直接至该网站查询:

css3-mediaqueries-js – a library that aims to
add media query support to non-supporting browsers

window.matchMedia允许我们使用CSS3中媒体查询状态在JavaScript进行状态响应,应用起来也很简单。看如下代码:

 

varmq=window.matchMedia(“”);

动手吧

另外,目前网路上也有支援Media Queries
的Framework,如Bootstrap 等等。 Bootstrap
已经帮你把很多版面在不同装置的显示效果设定好,或许你也可以试试看使用这个不错又简单的Framework,Bootstrap
。 如果你使用了Bootstrap,还是不代表这篇对你没有需要,因为像Bootstrap只有对格局、图片做变动,而细节的部份,你还是得使用media
queries,才能把整个Responsive Web Design做到最好。

(Bootstrap官网:  ;本站教学介绍: 

事实上,Media Queries
只是让你能够在不同装置上做调整,至于调整的好看不好看,就得看大家的CSS
造化如何了,加油!

此时,window.matchMedia返回了一个实例mq,它包含一些属性和方法,其中我们会用到的是以下三个:

有谁用过CSS30 的media screen ,并且使用了兼容IE6-8的css3-mediaqueriesjsp文件,在服务器上部署成功的

我虽然没用过,但css3在IE8以下,都不支持,怎么谈得上部署成功
 

★ media — 该属性返回你在设置的媒体查询语句,比如上面的mq.media会返回””

做响应式web 页面怎设计

响应式Web设计的方法
介绍完响应式Web的背景和概念之后,是时候该介绍具体的实现方法了,其实响应式Web设计的方法很简单,就是利用CSS3的媒体查询Media
Queries和Viewport来解决问题的。
首先我们一起来看看Media Queries,这里我只会对其做一个简单的列举介绍。
通过媒体查询的设置,我们可以根据屏幕宽度、屏幕方向等各个属性来加载不同场景下不同的CSS文件来渲染页面的视觉风格。具体的使用方法有以下两种:
1、通过link标签:
<link rel=”stylesheet” type=”text/css” media=”screen and (max-width:
479px)” href=”testcssbywidth1.css” />

示例代码代表当当前屏幕宽度小于479px的时候,加载testcssbywidth1.css文件来渲染页面。
2、CSS中直接设置:
@media screen and (max-width:479px) {
  /* 具体的CSS属性设置 */
  }
对于Media
Queries的一些常用属性,只对常用的几个做一个简单列举说明,其他的属性请各位自行查阅相关资料:
width:描述终端设备显示区域的宽度,接受max/min的前缀;
height:描述终端设备显示区域的高度,接受max/min的前缀;
device-width:描述终端设备屏幕的宽度,接受max/min的前缀;
device-height:描述终端设备屏幕的高度,接受max/min的前缀;
orientation:描述终端设备处于横屏还是竖屏的状态,取值分别为:landscape/portrait。
当我们调整浏览器大小的时候,上面通过媒体查询属性的操作就可以完成响应式Web设计的工作,但是这却不能满足移动终端的浏览器,因为移动浏览器默认页面是为宽屏幕设计的,所以会把他缩小来适应小屏幕,但是终端设备却无法识别正确的宽度,所以光靠媒体查询是解决不了移动终端设备的响应式Web设计的
 

Media Queries
详细介绍与使用方法[转],css3queries Media Queries 就是要在支援CSS3
的浏览器中才能正常工作,IE8 以下不支援。 而Media Queries 的…

★ matches —
该属性返回目前对于查询状态的匹配情况,如果匹配了查询状态,返回true,反之返回false,我们一般这样使用:

//此时window的宽度大于500px

//此时window的宽度小于500px

★ addListener —
我们可以运用该方法监听变化,一旦变化满足查询条件,就做出相应反应。我们来看下面的代码:

varmq=window.matchMedia(“”);

mq.addListener;

WidthChange;

functionWidthChange{

//此时window的宽度大于500px

//此时window的宽度小于500px

代码非常简单明确,但是需要注意的一点是你必须在addListener之后马上运行事件处理函数WidthChange,这能确保你的代码将会在页面载入载入中或者载入前完成初始化。如果没有这行代码,如果用户不去手动改变浏览器的尺寸,即使满足了查询条件,WidthChange函数也不会自行调用。

目前,现代浏览器都支持matchMedia方法,如果你需要在旧版本的浏览器中使用matchMedia,有心的程序员已经编写出了相应的替代的代码库。

总结

两种方法都可以使用,个人比较偏向于第二种吧,简单方便。其实响应式JavaScript的库非常多,现在比较流行的几个分别是:SimpleStateManager、enquire.js、yepnope.js以及大名鼎鼎的Modernizr。它们在原生的matchMedia方法的基础上,添加了许多非常实用的功能,为我们编写响应式JavaScript代码提供了不少帮助。

发表评论

电子邮件地址不会被公开。 必填项已用*标注