響應式網頁設計

時間  2019-12-17
標籤 響應 網頁設計 简体版
原文   原文鏈接

響應式設計

響應式設計的概念（三要素）

  • 流體網格
  • 響應式圖片
  • 媒體查詢

相關概念

  • 分辨率 resolution
    • 是指顯示器所能顯示的像素的多少
  • 像素密度 dpi/ppi
    • 像素密度（pixels per inch），也稱PPi，即每英寸屏幕所擁有的像素數，像素密度越大，顯示畫面細節就越豐富。
  • 設備像素比 dip/dpr
    • 用 iPhone4 舉個例子，它有 326 DPI 顯示屏，根據上表，智能手機的典型觀看距離大概16.8英寸，基準像素爲 160 DPI。因此要顯示一個 CSS 像素，蘋果選擇將像素比設置爲2，因此看起來就和 163 DPI 手機中顯示的同樣了。

1、viewport

1.定義

  • viewport 是用戶網頁的可視區域。
  • 移動端： 佈局視口(大部分980px) /理想視口（視口寬度=設備寬度）

2.設置viewport

快捷鍵:`meta:vp+table`
注意：響應式頁面必設（視口寬度等於設備寬度，理想視口）
<meta name="viewport" content="width=device-width,initial-scale=1.0">

3.設置選項

  • width 視口寬度 一般設置爲 device-width
  • height 視口高度
  • initical-scalse 初始化縮放比例
    • （有把設備寬度設置爲視口寬度的功能）
    • 一般設置爲1.0(不放大)
  • maximun-scale 最大縮放比例
  • minmun-scale 最小縮放比例
  • user-scaleable: yes/no 是否容許用戶手動縮放

2、媒體查詢

1.媒體類型

  • screen 用於電腦顯示器。

  • print 用於打印機。css

    例：@media print{
          h1{
              font-size:200px;
          }
      }
  • all 用於全部的媒體設備。
  • aural 用於語音和音頻合成器。
  • braille 用於盲人用點字法觸覺回饋設備。
  • embossed 用於分頁的盲人用點字法打印機。
  • handheld 用於小的手持的設備。
  • projection 用於方案展現，好比幻燈片。
  • tty 用於使用固定密度字母柵格的媒體，好比電傳打字機和終端。

  • tv 用於電視機類型的設備。html

2.媒體特性

  • width 視口寬度
    • max-width 最大視口寬度 視口寬度<=某個值

    • min-width 最小視口寬度 視口寬度>=某個值node

      例如：h1{
              text-align:center;
              color:#fff;
          }
          @media (width:800px) {
              h1{
                  color:red;
              }
          }
          @media(max-width:800px){
              body{
                  background:#369;
              }
              h1{
                  color:green;
              }
          }
          @media(min-width:1000px){
              body{
                  background:pink;
              }           
          }
  • height 視口高度
    • max-height 最大視口高度
    • min-height 最小視口高度
  • device-width 設備寬度
    • max-device-width 最大設備寬度

    • min-device-width 最小設備寬度git

      例如：<style>  
      body{
          text-align:center;
          background:#333;
      }
      h1{
          color:#fff;
      }

      @media (max-device-width: 800px) {
          body{
              background-color:#369;
          }
      }
  </style>
  • device-height 設備高度
    • max-device-height 最大設備高度
    • min-device-height 最小設備高度
  • aspect-ratio 可視窗口寬高比
    • min-aspect-ratio
    • max-aspect-ratio
  • device-aspect-ratio 設備的寬高比
    • max-device-aspect-ratio

    • min-device-aspect-ratioapp

      例如：<!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-wdith,initial-scale=1.0">
      <title>媒體特性-aspect-ratio</title>
      <style>
          body{
              background:#333;
              color:#fff;
              text-align:center;
          }

          @media (device-aspect-ratio:16/9) {
              body{
                  background:#123456;
              }
          }

          @media (max-aspect-ratio:4/3) {
              body{
                  background:#123456;
              }
          }
      </style>
  </head>
  <body>
      <h1>aspect-ratio 視口寬高比</h1>
  </body>
  </html>
  • orientation設備的使用方向

    • landscape(水平)/portrait(垂直方向)dom

      例如：<style>
     body{
         background:#333;
         color:#fff;
         text-align:center;
     }

     @media (orientation: landscape) {
         body{
             background:#123456;
         }
     }
 </style>
  • resolution 屏幕像素比 單位 dppx
    • max-resolution

    • min-resolutionide

      例如：<style>
          body{
              background:#333;
              color:#fff;
              text-align:center;
          }

          @media (min-resolution:2dppx) {
              body{
                  background:#369;
              }
          }   
      </style>

3. 媒體查詢 用法

1.@media () {
        css屬性
    }
    2.<link href="css文件" media="media_query_list">  
    3.@import url(css文件) mediaType  （智能判斷媒體類型）

4.媒體查詢的語法

  • and 而且
  • , 或者
  • only only + 媒體類型

  • not 否認 必定要指定媒體類型，由於媒體類型默認all，not後永遠返回假oop

    例如：<style>
          body{
              margin:0;
              color:#fff;
              background:#333;
              text-align:center;
          }       
          /*@media (min-width:400px) and (max-width:800px) {
              body{
                  background:orange;
              }
          }*/     
          /*@media (max-width:480px),(min-width:800px) {
              body{
                  background:red;
              }
          }*/     
          /*@media not print{
              body{
                  background:pink;
              }
          }*/     
          @media only screen{
              body{
                  background:orange;
              }
          }
      </style>

3、 斷點

1.手機 小屏幕

  • <= 480px

2.平板 中等屏幕

  • >480px 而且 <= 800px

3.PC 大屏幕

  • >800px <= 1400px

4. 超大屏幕

  • >= 1400px佈局

    例：斷點 大屏幕優先
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
      <title>斷點 大屏幕優先</title>
      <style>
          body{
              margin:0;
              background:#f5f5f5;
          }
          .container{
              box-sizing: border-box;
              margin:10px auto;
              width:100%;
              padding:20px;               
              border:1px solid #ccc;
              background:#fff;
              box-shadow: 0px 3px 5px 3px #ccc; 
          }
          @media(min-width:480px) {
              .container{
                  width:480px;
              }
          }       
          @media (min-width: 768px) {
              .container{
                  width:750px;
              }
          }
          @media(min-width:1200px) {
              .container{
                  width:1000px;
              }
          }       
      </style>
  </head>

4、網格系統

1.使內容先隱藏再顯示的方法：

  • 法1.this

    隱：overflow:hidden;/*避免內容溢出*/
          height:0;
      現：height:auto;

  • 法2.

    隱：display:none; 現：display:block;

2.響應式的網格系統css文件:

/*響應式的網格系統*/

    
    .row:after{
    content:"";
    display:block;
    clear:both;
    }
    /*清除浮動*/
    .row::after{
    content:"";
    display:block;
    clear:both;
    }

    [class*="col-"]{
    box-sizing: border-box;
    float:left;
    padding:7px 8px;
    }


    /*小屏幕  < 480px*/
    .col-sm-1{
    width:8.33%;
    }
    
    .col-sm-2{
        width:16.66%;
    }
    .col-sm-3{
        width:25%;
    }
    .col-sm-4{
        width:33.33%;
    }
    .col-sm-5{
        width:41.66%;
    }
    .col-sm-6{
        width:50%;
    }
    .col-sm-7{
        width:58.33%;
    }
    .col-sm-8{
        width:66.66%;
    }
    .col-sm-9{
        width:75%;
    }
    .col-sm-10{
        width:83.33%;
    }
    .col-sm-11{
        width:91.66%;
    }
    .col-sm-12{
        width:100%;
    }

    /*中等屏幕 480px~ 800px*/
    @media(min-width:481px) {
    .col-md-1{
        width:8.33%;
    }

    .col-md-2{
        width:16.66%;
    }
    .col-md-3{
        width:25%;
    }
    .col-md-4{
        width:33.33%;
    }
    .col-md-5{
        width:41.66%;
    }
    .col-md-6{
        width:50%;
    }
    .col-md-7{
        width:58.33%;
    }
    .col-md-8{
        width:66.66%;
    }
    .col-md-9{
        width:75%;
    }
    .col-md-10{
        width:83.33%;
    }
    .col-md-11{
        width:91.66%;
    }
    .col-md-12{
        width:100%;
    }
    }

    /*大屏幕 >800 px*/
    @media(min-width:801px) {
    .col-lg-1{
        width:8.33%;
    }

    .col-lg-2{
        width:16.66%;
    }
    .col-lg-3{
        width:25%;
    }
    .col-lg-4{
        width:33.33%;
    }
    .col-lg-5{
        width:41.66%;
    }
    .col-lg-6{
        width:50%;
    }
    .col-lg-7{
        width:58.33%;
    }
    .col-lg-8{
        width:66.66%;
    }
    .col-lg-9{
        width:75%;
    }
    .col-lg-10{
        width:83.33%;
    }
    .col-lg-11{
        width:91.66%;
    }
    .col-lg-12{
        width:100%;
    }
    }

5、響應式圖片

1.使用背景圖片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>響應式圖片</title>
    <style>
        .container{
            margin:0 auto;
            width:100%;
        }
        .banner {
            padding-top:56%;/*佔自己元素寬度的百分比*/
            border:1px solid #ccc;
            background:url("../images/banner01-small.jpg");
            background-size:100% 100%;
        }       
        @media (min-width:481px) {
            .banner{
                background:url("../images/banner01-middle.jpg");
            }
        }
        @media(min-width:801px){
            .banner{
                background:url("../images/banner01.jpg");
            }
        }
        @media(min-width:1200px){
            .container{
                width:1000px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>響應式圖片</h1>
        <div class="banner">            
        </div>
    </div>
</body>
</html>

2.使用H5的picture標籤

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>響應式圖片</title>
    <style>
        .container{
            margin:0 auto;
            width:100%;
        }
        .banner img{
            width:100%;
        }   
        @media(min-width:1200px){
            .container{
                width:1000px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>響應式圖片</h1>
        <div class="banner">

        /*兼容性差，從上到下，若是知足第一個就不會執行下面的了
        因此寫斷點時由大到小寫，不兼容的時候，就會顯示img*/
            <picture>
                <source srcset="../images/banner01.jpg"  media="(min-width:801px)">
                <source srcset="../images/banner01-middle.jpg"  media="(min-width:481px)">
                <source srcset="../images/banner01-small.jpg">

                <img src="../images/banner01.jpg" alt="">
            </picture>
        </div>
    </div>
</body>
</html>

3.使用picturefill插件

  • picturefill.js文件內容：

    /*! Picturefill - Responsive Images that work today. (and mimic the proposed Picture element with span elements). Author: Scott Jehl, Filament Group, 2012 | License: MIT/GPLv2 */

  (function( w ){

  // Enable strict mode
  "use strict";

  w.picturefill = function() {
      var ps = w.document.getElementsByTagName( "span" );

      // Loop the pictures
      for( var i = 0, il = ps.length; i < il; i++ ){
          if( ps[ i ].getAttribute( "data-picture" ) !== null ){

              var sources = ps[ i ].getElementsByTagName( "span" ),
                  matches = [];

              // See if which sources match
              for( var j = 0, jl = sources.length; j < jl; j++ ){
                  var media = sources[ j ].getAttribute( "data-media" );
                  // if there's no media specified, OR w.matchMedia is supported 
                  if( !media || ( w.matchMedia && w.matchMedia( media ).matches ) ){
                      matches.push( sources[ j ] );
                  }
              }

          // Find any existing img element in the picture element
          var picImg = ps[ i ].getElementsByTagName( "img" )[ 0 ];

          if( matches.length ){
              var matchedEl = matches.pop();
              if( !picImg || picImg.parentNode.nodeName === "NOSCRIPT" ){
                  picImg = w.document.createElement( "img" );
                  picImg.alt = ps[ i ].getAttribute( "data-alt" );
              }

              picImg.src =  matchedEl.getAttribute( "data-src" );
              matchedEl.appendChild( picImg );
          }
          else if( picImg ){
              picImg.parentNode.removeChild( picImg );
          }
      }
      }
  };

  // Run on resize and domready (w.load as a fallback)
  if( w.addEventListener ){
      w.addEventListener( "resize", w.picturefill, false );
      w.addEventListener( "DOMContentLoaded", function(){
          w.picturefill();
          // Run once only
          w.removeEventListener( "load", w.picturefill, false );
      }, false );
      w.addEventListener( "load", w.picturefill, false );
  }
  else if( w.attachEvent ){
      w.attachEvent( "onload", w.picturefill );
  }

  }( this ));

  • html文件內容：

    <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <title>使用插件 實現 響應式圖片</title>
      <script src="picturefill.js"></script>
  </head>
  <body>
      <span data-picture data-alt="響應式圖片">
          <span data-src="../images/banner01-small.jpg"></span>
          <span data-src="../images/banner01-middle.jpg" data-media="(min-width:768px)"></span>
          <span data-src="../images/banner01.jpg" data-media="(min-width:992px)"></span>
      </span>
  </body>
  </html>

6、使用插件 實現 圖片拖動

  • html文件：

    <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <title>輪播圖 滑動插件</title>
      <link rel="stylesheet" href="swipe.css">
      <script src="swipe.js"></script>
      <style>
          .swipe_wrap{
              width:100%;
          }
      </style>
  </head>
  <body>
      <div id="imglist" class="swipe">
          <div class="swipe_wrap">
              <div><img src="../images/banner01.jpg" alt="" /></div>
              <div><img src="../images/banner02.jpg" alt="" /></div>
              <div ><img src="../images/banner03.jpg" alt="" /></div>
          </div>
          <div class="imglist-contral">
              <span class="left" onclick="mySwipe.prev()"><</span>
              <span class="right" onclick="mySwipe.next()">></span>
          </div>
      </div>
      <script>
      window.mySwipe = new Swipe(document.getElementById('imglist'), {
                            startSlide: 2,
                            speed: 400,
                            auto: 3000,
                            continuous: true,
                            disableScroll: false,
                            //stopPropagation: false,
                           // callback: function(index, elem) {},
                            //transitionEnd: function(index, elem) {}
                          });

      </script>
  </body>
  </html>

  • swipe.css文件內容

    .swipe{
      overflow: hidden;
      position:relative;

  }
  .swipe_wrap{
      position: relative;
      overflow: hidden;
  }
  .swipe_wrap div{
      float:left;
      position:relative;
      overflow:hidden;
  }

  • swipe.js文件:

    在git文件中下載
  輸入命令：
  bower install swipe.js
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程