首页 > 代码库 > 响应式布局

响应式布局

2024-07-12 13:55:12   231人阅读

响应式布局

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

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

优点：

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

缺点：

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

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

不谈概念，直奔主题。

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

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

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

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

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

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

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

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

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

  1. 我们可以使用media引入外部的CSS文件

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

    -- 表示的意思是：在屏幕设备小于等于480像素的时候，加载使用这个CSS文件。

  2. 我们可以在CSS文件内部使用media定制不同设备的样式。

    @media(max-width：480px) {body{background:blue}}

    --表示的意思是：在屏幕设备小于等于480像素的时候，使用这些样式。

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

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

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

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

  1. @media screen and (min-width：480px){} ：可视窗口大于等于480px 并且属于屏幕设备（screen）
  2. @media screen and (min-width：480px) and (max-width：767px){}： 可视窗口大于等于480px并且小于767px
  3. @media screen and (orientation:landscape),screen and (min-width：700px){}： 横屏，或者宽度小于700px
  4. @media not screen{} ：非屏幕设备样式
  5. @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}，若想了解更多的使用方法，建议大家借助搜索引擎。


联系
我们