手把手教你响应式布局（二）

手把手教你响应式布局（二）

一个响应式页面www.microsoft.com学完你也可以做出来

1.

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

根据viewport尺寸应用 media queries

Media queries 允许我们能创造一个自适应的体验，media query语句能够根据设备的规格创造规则将特定的样式应用在所有小屏幕，大屏幕以及所有中间尺寸的设备上。

@media (query) {

· /* CSS Rules used when query matches */

}

在我们能定义的许多不同query中，最常用在网络设计上的还是 min-width, max-width, min-height 和 max-height.

min-width

允许使用任何大于在query里定义的浏览器宽度值。

max-width

允许使用任何小于在query里定义的浏览器宽度值。

min-height

允许使用任何大于在query中定义的浏览器高度值。

max-height

允许使用任何小于在query里定义的浏览器高度值。

orientation=portrait

适用于所有高度大于等于宽度的浏览器。纵屏

orientation=landscape

适用于所有宽度大于高度的浏览器。横屏

 

具体应用

·<link rel="stylesheet" media="(max-width: 640px)" href="max-640px.css">

<link rel="stylesheet" media="(min-width: 640px)" href="min-640px.css">

<link rel="stylesheet" media="(orientation: portrait)" href="portrait.css">

<link rel="stylesheet" media="(orientation: landscape)" href="landscape.css">

· · <style>

· · · @media (min-width: 500px) and (max-width: 600px) {

· · · · h1 {

· · · · · color: fuchsia;

· · · · }

·

· · · · .desc:after {

· · · · · content:" In fact, it's between 500px and 600px wide.";

· · · · }

· · · }

· · </style>

2.

@media only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2)

比如上面的语句就是判断终端的像素比是2的话，所渲染的样式。可以适用于iPhone4，iPhone5等设备。

 

2 ☆☆响应式网站相关精要☆☆

H5响应式网站设计要点

1.渐进增强与优雅降级

2.如何让老版本的浏览器支持响应式设计

3.如何使用Modernizr按需加载CSS文件

4.如何使用按需加载JavaScript补丁文件

5.如何将超长导航列表在小视中转换为选择菜单

6.如何为高分辨率（视网膜）显示屏提供匹配图片

7.网站设计尽可能保持简洁与灵活

允许任何分辨率可见

<meta name="viewport" content="width=device-width, initial-scale=1"/>

 判断纵屏

<link rel="stylesheet" media="screen and (orientation:portrait)" href="portrait-screen.css">

**根据不同分辩率判断相关属性如下，媒体查询

screen-style.css

·断点

@media screen and (min-width:1001px) and (max-width:1920px) {

·body {

· · · background-color:red;

· · · }

}

@media screen and (min-width:805px) and (max-width:1000px) {

· body {

· background-color:blue;

· }

}

@media screen and (min-width:600px) and (max-width:804px) {

· body {

· background-color:green;

· }

}

@media screen and (min-width:100px) and (max-width:599px) {

· body {

· background-color:black;

· }

}

调用

<link rel="stylesheet" ·media="screen" href="screen-style.css">

如果是纵向旋转的屏幕，则可创造建如下复合查询

<link rel="stylesheet" media="screen and (orientation:portrait)" href="portrait-screen.css"

 

只有窗口宽度大于800像素的纵向显示器加载样式文件

<link rel="stylesheet" media="screen and (orientation:portrait)" and (min-width:800px)" href="800wide-portrait-screen.css" href="portrait-screen.css">

 

让页面的宽度等于设备的宽度，不可自行裁切

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

如何将固定宽度改变为百分比宽度:《响应式WEB设计》作者观点

目标元素宽度/上下文元素的宽度=百分比宽度

 

弹性图片(或其它)

img,object,video,embed{ width:100%} 永远是相对于父标签的100%，也可以是其它的合适比例

 

为特定的图片指定特定规则

<img class="sideImage" src="..." alt="this is a ·img" />

css:

img{ max-width:100%}

.sideBlock img{ max-width:45%}

防止图片无限缩放，给予最外层元素设置max-width属性

#wrapper{

margin-right:auto;

......

max-width:1414px

}

设置自适应图片的详细方法(先进)

《响应式WEB设计》P62~64

 

css网格系统--快速搭建布局[快速建立流布局]Semantic(http://semantic.gs);

Skeleton(http://getskelton.com);

Less Framework(http://lessframework.com);

1140 CSSGrid(http://cssgrid.net)   推荐 

 

下载Columnal网格系统的压缩包然后解压，将欠已有的页面复制一份,然后页面头部的CSS文件链接从main.css改为columnal.css。使用该系统创建页面结构的关键是给div添加正确的class。

具体标签结构见《响应式web设计》P68

 

**腻子脚本和Modernizr

A.  

Modernizr(http://www.modernizr.com)

用于向缺少h5与css3的浏览器打补丁

 

B.

http://afarkas.github.com/webshim/demos/H5表单补丁

 

C. 

给IE6、7、8追加min/max媒体查询功能(撬开IE，击掌相庆)

1.下载网址:https://github.com/scottjeh1/Respond2. 追加引用,放在modernizr.js之后

   <script src="js/respond.min.js"></script>

3.避免在每个IE中都加载

  <!--[if lte IE 8]             <script src="js/respond.min.js"></script>

         ![endif]  -->

 

为那些不支持css3媒体查询的浏览器(ie6 7 8)加载Respond.js   p224

 

D.小屏时将导航链接转换为下拉菜单

1.下载脚本程序http://github.com/mattkersley/Responsive-Menu      jquery.mobilemenu.js

2.给每个页面的导航链接部门设置一个id

 

· <nav role="navigation">

· · · · ·<ul id="mainNav">

· · · · · · · · ·......

· · · · </ul>

·</nav

 

 

或在resopond.js或其它中追加如下代码   p227

 

Modernizr.load([

· · · {

· · · · · · test:Modernizr.mq('only all'),

· · · · · · nope:'js/respond.min.js'

· · · ·},

· · · {

· · · · · · · ·//如果max-width等于600PX，则加载菜单转换脚本

· · · · · · test:Modernizr.mq('only screen and (max-width:600px)'),

· · · · · · yep:['js/jquery-1.71.1.js', 'js/jquery.mobilemenu.js'],

· · · · · · complete:function(){

· · · · · · · · //资源完全加载后运行

· · · · · · · · $(document).ready(function()){

· · · · · · · · · · ·$('#mainNav').mobileMenu({

· · · · · · · · · · · · · · switchWIDTH:600, · · · · · · · · · · · · · · · //转换宽度(用px表示)

· · · · · · · · · · · · · · topoptionTest:'select a page' · · · · · · //第一个选项的内容

· · · · · · · · · · · · · · indentString:'&nbsp;&nbsp;&nbsp;' ·//缩进嵌套选项的字符串

· · · · · · · · · · })

· · · · · · })

· · · ··

· · · }

· }

]);

 

E.高分辨率的设计（如高清显示logo）---略  详见p229

 

完整补丁包

 

<script src="jquery-1.8.1.js"></script>

<script src="../js/modernizr-custom.js"></script>

<script src="../js-webshim/minified/polyfiller.js"></script>

 

该脚本主要是让低版本的IE系列的浏览器来识别HTML5标签

样板文件:http://html5boilerplate.com之中含normalize.css、polyfill和一些必要的工具如Modernizr，让腻子脚本强行识别CSS2

 

自动为CSS3增加前缀的代码片段

-prefix-free

下载地址:http://leaverou.github.com/prefixfree 

CSS3和html5的性全球浏览器使用统计

http://gs.statcounter.comhttp://gs.statcounter.com 

 

让视频大小自适应

1.下载插件http：//daverupert.com/2011/09/responsive-video-embeds.with-fitvids/  《响应式WEB设计》P98

2.引入并调用

    a.<script src="js/fitvids.js"></script>

    b.为引用视频的文件设置id如id="content"

 

 <script>

· · $(document).ready(function(){

· · · ·$("#content").fitvids();

· · })

· ·</script>

 

离线web应用的完整规范，请见下面的网址: p100

http://dev.w3g.org/html5/spec/overview.html#offline 

附:

html5验证工具

http://validator.nuIE Tester

http://www.mydebugbar.com/wiki/IETester/HomePage 

 

如何让ie8支持html5

 

方法1:

 <!--以下代码强制IE8正常显示htm  20l520150824-->

  <!--[if lte IE 9]>

  <script>

   (function(){if(!0)return;var e = "abbr,article,aside,audio,bb,canvas,datagrid,datalist,details,dialog,eventsource,figure,,figcaption,footer,header,hgroup,mark,menu,meter,nav,output,progress,section,time,video".split(','),i=e.length;while(i--){document.createElement(e[i])}})()

  </script>

  <![endif]-->

 

方法2:

<!--[if lt IE9]> 

<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>

<![endif]-->

 

方法3:

动态模板

<!--[if lt IE 9]>

{% javascript 'html5' %}

<![endif]-->

 

静态网站(无误):

<!--[if lt IE 9]>

   <script src="../js/html5.js"> </script>

  </script>

<![endif]-->

 

html5.js

 

快速切换窗口大小插件:

http://www.umindex.com/devices/android_resolutions