响应式布局

2014-07-17 16:57 sai.zhao 阅读(330) 评论(0) 编辑收藏举报

响应式布局

响应式布局是Ethan Marcotte在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。

响应式布局有它独特的优势，但是也有不少缺点，大家可以揣摩使用。关于优点和缺点，我摘自百度的一段话，内容如下：

优点：

面对不同分辨率的设备灵活性强
能够快捷解决多设备显示适应问题
开发时间比较短，开发效率较高
有相对成熟的框架支持

缺点：

兼容各种设备工作量大，效率低下
代码累赘，会出现隐藏无用的元素，加载时间加长
这是一种折中性质的设计解决方案，由于多方面因素影响而往往达不到最佳效果
一定程度上改变了网站原有的布局结构，会出现用户混淆的情况
交互设计的体现非常糟糕，用户体验有一定的局限性

但是，存在即是合理的，适当的使用，还是能很好的解决我们目前网站浏览中存在的一些问题。

不谈概念，直奔主题。

一、我们需要在我们的HTML投部增加如下内容：

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

这几个东西表示什么概念？viewport：可视窗口，表示浏览器中展示网页的部分。

width=device-width：可视窗口宽度为设备的宽度
initial-scale=1.0：页面的缩放比例
user-scalable ：是否允许用户缩放页面
maximum-scale，minimum-scale：缩放的上限和下限

这些属性控制着设备基本属性，其中可以混合使用，中间以逗号分割。

二、我们需要看看如何开始我们的响应式：

这个时候，我们需要了解一个东西 “media” 我们到W3C找到他的概念。

media 属性规定被链接文档将显示在什么设备上。
media 属性用于为不同的媒介类型规定不同的样式。
也就是说，media既可以规定设备类型，也可以按照设备类型给与不同的样式。我们常见的media属性值有如下：
screen：计算机屏幕（默认）。
tty：电传打字机以及类似的使用等宽字符网格的媒介。
tv：电视机类型设备（低分辨率、有限的滚屏能力）。
projection：放映机。
handheld ：手持设备（小屏幕、有限带宽）。
print ：打印预览模式/打印页面。
braille ：盲人点字法反馈设备。
aural ：语音合成器。
all ：适用于所有设备。

三，我们如何使用 media 快速开发

我们可以使用media引入外部的CSS文件
```
<link rel="stylesheet" media="(max-width:480px)" href="mobile.css" />
```
-- 表示的意思是：在屏幕设备小于等于480像素的时候，加载使用这个CSS文件。
我们可以在CSS文件内部使用media定制不同设备的样式。
```
@media(max-width：480px) {body{background:blue}}
```
--表示的意思是：在屏幕设备小于等于480像素的时候，使用这些样式。

下面列举一下media的媒体属性：

@media(orientation:portrait){} ：判断设备垂直方向和水平方向（landscape）
@media(max-device-width：480px){} ：设备的最大宽度小于480px
@media(aspect-ratio:3/2){} ：可视窗口的宽高比,支持max和min前缀
@media(device-aspect-ratio:3/2){} ：设备的宽高比,支持max和min前缀
@media(max-height：480px){} ：可视窗口的高度小于等于480px（这个跟分辨率无关，只跟设备宽度有关系）
@media(max-device-height：480px){} ：如果设备的高度小于等于480px （这个跟分辨率无关，只跟设备宽度有关系）
@media screen and (max-resolution：150dpi或者1dpps){} ：根据像素密度来判断。如果密度小于等于150dpi时使用该规则，但是web-kit对resolution支持不是很好，可用-webkit-device-pixel-ratio代替（设备像素比例），phone4视网膜屏下是2，普通屏幕是1dpps，而dpps就是放大像素比例的单位。

当然媒体设备查询还有几个操作符，分别是and，not，only，和逗号。

顾名思义，这几个操作符的含义分别表示“并且”，“不是”，“仅仅”，“或者”这四个词而已。下面举个栗子：

@media screen and (min-width：480px){} ：可视窗口大于等于480px 并且属于屏幕设备（screen）
@media screen and (min-width：480px) and (max-width：767px){}：可视窗口大于等于480px并且小于767px
@media screen and (orientation:landscape),screen and (min-width：700px){}：横屏，或者宽度小于700px
@media not screen{} ：非屏幕设备样式
@media not screen and (max-width：959px) ：否定的是整个（ screen and (max-width：959px)），不是小于959px的屏幕设备。

基本内容完毕：补充一个例子，大家可以自己调整浏览器测试：

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
    <style type="text/css">
        .t{width:120px;height:120px;background:black}
        @media screen and (max-width:479px){
            body,html{background:orange;}
            .t{width:100%;}
        }

        @media screen and (min-width:480px) and (max-width:779px){
            body,html{background:green;color:#FFF;}
            .t{background:#FFF;}
        }

        @media screen and (min-width:780px){
            body,html{background:red;}
            .t{float:right;}
        }
    </style>
  </head>
  <body>
        <h1>请改变浏览器大小</h1>
        <div class="t"></div>
  </body>
</html>

下面补充一个响应式菜单的例子。预览图就不上了，有兴趣的同学可以复制代码到浏览器自己查看。

实例一：

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
<meta charset="utf-8">
<title>响应式导航</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style type="text/css">
    /* 导航菜单 */
    ul{list-style:none;padding0;margin:0}
    #nav li, #nav li a{display: inline-block;padding: 7px 15px;color: #3b3b3b;}
    #nav li a:hover{background: #eee;}
    #nav{background: none;}
    #nav .active{background: #eee;}
    .toggle-btn{display: none;}
    /* Media Queries */
    @media (max-width: 767px){
        /* 切换按钮 */
        .toggle-btn{display: inline-block;font-size: 25px;background: #000;color: #fff;padding: 7px 10px;
                    position: absolute;right: 10px;top:50px;}
        /* 初始化隐藏关闭按钮 */
        #nav .close{display: none;}  
        /* 初始隐藏导航 */
        #nav{display: none;}
        /* 导航为目标状态的时候显示关闭按钮 */
        #nav:target .close{display: inline-block;}
        /* 导航为目标状态时的样式 */
        #nav:target{display: block;position: absolute;top: 0;padding-top: 70px;width: 100%;}
        /* 目标状态下的导航的 ul 标签 */
        #nav:target ul{background: #000;}
        /* 目标状态下的导航的 li 与 a */
        #nav:target li, #nav:target li a{display: block;color: #eee;text-align: left;}
        /* 目标状态下的导航的列表下的 a 标签的悬停样式 */
        #nav:target li a:hover{background: #3b3b3b;}
        /* 目标状态下导航的激活状态的样式 */
        #nav:target .active{background: #272727;}
    }
    </style>
  </head>
  <body >
<a href="#nav" class="open toggle-btn">点我</a>
<nav id="nav">
  <ul>
    <li><a href="#" class="active">菜单 1</a></li>
    <li><a href="#">菜单 2</a></li>
    <li><a href="#">菜单 3</a></li>
    <li><a href="#">菜单 4</a></li>
    <li><a href="#">菜单 5</a></li>
  </ul>
  <a href="#top" class="close toggle-btn">关我</a>
</nav>
  </body>
</html>

:target -- 用来改变页面中锚链接URL所指向的ID样式（如上面#top等），例如你要改变描链接指向#tab的元素字体颜色为蓝色，哪么你可以这样写成#tab:target {color:blue}，若想了解更多的使用方法，建议大家借助搜索引擎。

刷新页面返回顶部

sai.zhao

响应式布局

响应式布局

About