zoukankan      html  css  js  c++  java

  • 响应式布局

    响应式布局

    响应式布局是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-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-479px){
            body,html{background:orange;}
            .t{width:100%;}
        }

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

        @media screen and (min-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- 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}，若想了解更多的使用方法，建议大家借助搜索引擎。
  • 相关阅读:
    jQuery序列化
    jQuery的ajax与django传参
    Django中的cookie与session操作
    Django文件上传
    Django表单的简单应用
    django加载模板文件
    django-admin.py创建项目失败解决方法
    django笔记
    unity创建xml与加载xml
    JavaScript相关
  • 原文地址：https://www.cnblogs.com/mrsai/p/3851511.html
Copyright © 2011-2022 走看看