響應式頁面@media介紹和移動端單位介紹

時間  2019-11-18
標籤 響應 頁面 media 介紹 移動 單位 欄目 無線 简体版
原文   原文鏈接

一.響應式頁面-@media介紹css

1.css3的@media查詢html

　　定義和使用html5

　　使用 @media 查詢，你能夠針對不一樣的屏幕大小定義不一樣的樣式。 @media 能夠針對不一樣的屏幕尺寸設置不一樣的樣式，特別是若是你須要設置設計響應式的頁面，@media 是很是有用的。 當你重置瀏覽器大小的過程當中，頁面也會根據瀏覽器的寬度和高度從新渲染頁面，這對調試來講是一個極大的便利。jquery

@media mediaType and|not|only (media feature) {
     /*CSS-Code;*/
}

screen： 用於電腦屏幕，平板電腦，智能手機等。（最經常使用） speech 應用於屏幕閱讀器等發聲設備 媒體功能css3

media feature：chrome

      1.max-width:定義輸出設備中的頁面最大可見區域寬度npm

　　2.min-width:定義輸出設備中的頁面最小可見區域寬度瀏覽器

開始編寫響應式頁面ide

準備工做1：設置Meta標籤佈局

首先咱們在使用 @media 的時候須要先設置下面這段代碼，來兼容移動設備的展現效果：

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

參數解釋: 

width = device-width：寬度等於當前設備的寬度

initial-scale：初始的縮放比例（默認設置爲1.0，即表明不縮放）

user-scalable：用戶是否能夠手動縮放（默認設置爲no，由於咱們不但願用戶放大縮小頁面）

準備工做2：加載兼容文件JS

由於IE8既不支持HTML5也不支持CSS3 @media ，因此咱們須要加載兩個JS文件，來保證咱們的代碼實現兼容效果：

<!--[if lt IE 9]>
　　<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
　　<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->

準備工做3：設置IE渲染方式默認爲最高(可選) 如今有不少人的IE瀏覽器都升級到IE9以上了，因此這個時候就有又不少詭異的事情發生了，例如如今是IE9的瀏覽器，可是瀏覽器的文檔模式倒是IE8 爲了防止這種狀況，咱們須要下面這段代碼來讓IE的文檔渲染模式永遠都是最新的

<meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1">

這段代碼後面加了一個chrome=1，若是用戶的電腦裏安裝了 chrome，就可讓電腦裏面的IE不論是哪一個版本的均可以使用Webkit引擎及V8引擎進行排版及運算，若是沒有安裝，就顯示IE最新的渲染模式。

一、若是文檔寬度大於等於 1170px 則應用花括號內的樣式——修改body的背景顏色(background-color):

@media screen and (min-width: 1170px) {
    body {
        background-color:lightblue;
    }
}

2.若是文檔寬度大於等於 992px 則應用花括號內的樣式——修改body的背景顏色(background-color):

@media screen and (min-width: 992px) {
    body {
        background-color:red;
    }
}

三、當文檔寬度大於等於 768px 而且小於等於992px （ width >=768 && width <=992）的時候顯示的樣式:

@media screen and (min-width:768px) and (max-width:992px) {
    /* CSS 代碼 */
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1">

    <title></title>
    <!-- [if lt IE 9]>
    　　<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    　　<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    [endif] -->
    <style>
        @media screen and (min-width: 1200px){
            body{
                background-color: red;
            }
        }

        @media screen and (min-width: 800px) and (max-width: 1200px){
            body{
                background-color: green;
            }
        }

        @media screen and (max-width: 800px) {
            body{
                background-color: yellow;
            }
        }
    </style>
</head>
<body>
    
</body>
</html>
@ media 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI 排序（Sortable） - 默認功能</title>
  <link rel="stylesheet" href="./css/jquery-ui.css">
  <script src="./js/jquery-1.9.1.js"></script>
  <script src="./js/jquery-ui.js"></script>
  <link rel="stylesheet" href="./css/style.css">
  <style>
  #sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
  #sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; }
  #sortable li span { position: absolute; margin-left: -1.3em; }
  </style>
  <script>
  $(function() {
    $( "#sortable" ).sortable();
    $( "#sortable" ).disableSelection();
  });
  </script>
</head>
<body>
 
<ul id="sortable">
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7</li>
</ul>
 
 
</body>
</html>
jQueryUI 
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/animate.css@3.5.2/animate.min.css">
  <style>
      #box{
          width:200px;
          height: 200px;
          line-height: 200px;
          text-align: center; 
          background-color: green;
          color: #fff;
          position: absolute;
          top: 1000px;
      }
  </style>
</head>
<body style="height: 2000px;">

    <div id="box"  class="animate bounceOutLeft">wusir</div>
    <script src="jquery.js"></script>

    <!-- <h2 class="animated fadeOutRight delay-2s">alex</h2> -->
    <script>
        
        $(function () {
            // $('#box').addClass('animated bounceOutLeft');

            $(document).scroll(function () {
                
                console.log($(this).scrollTop());

                var scrollTopHeight = $(this).scrollTop();

                if (scrollTopHeight >= 1000) {
                     $('#box').addClass('animated slideInDown');

                }
            })
        });
    </script>
</body>
</html>
animate

 

二.移動端單位介紹

1.字體相對單位和視窗相對單位

　　字體相對單位有：em、ex、ch、rem；

　　視窗相對單位則包含：vw、vh、vmin、vmax幾種

　　絕對定位則是固定尺寸，它們採用的是物理度量單位：cm、mm、in、px、pt以及pc。但在實際應用中，咱們使用最普遍的則是em、rem、px以及百分比（%）來度量頁面元素的尺寸。

　　px: 絕對（固定）單位
缺點：任何狀況下都是固定值，會致使佈局在不一樣尺寸下的設備錯位

　　%：相對定位（會有影響發生變化）相對於父級（自身）大小進行定位
缺點：能肯定範圍的仍是比較好計算的，對於不太好肯定值得地方很差使用百分比，而且會致使變形，高度通常很差控制

　　em: 相對定位 （會有影響發生變化） em=當前字體大小
缺點：會根據當前容器字體大小發生變化，假如每一個容器字體大小不一致，那麼計算會很是麻　　rem       r==root

em=字體大小 font-size
rem 相對單位      只依賴於html字體大小

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui">
        <title>移動端佈局</title>
        <style type="text/css">

            /*rem  root*/
            *{
                padding: 0;
                margin: 0;
            }
            ul{
                list-style: none;
            }
            .clearfix:after{
                content: '';
                display: block;
                clear: both;
            }
            html{
                width: 100%;
                height: 100%;
                /*font-size: 100px;*/
                /*1rem = 10px*/
                overflow: hidden;
            }
            body{
                width: 100%;
                height: 100%;
                overflow: auto;
            }
            .head-box{
                width: 100%;
                height: 0.4rem;
                background-color: red;
                position: absolute;
                top: 0;
                left: 0;    
            }
            .list{
                margin-top: 0.4rem;
                font-size: 16px;
            }
            
            .list .item{
                float: left;
                width: 1rem;
                height: 1rem;
                border: 1px solid black;
                margin: 0.1rem;
                
            }
            
            
            
        </style>
    </head>
    <body>
        
        <header class="head-box">
            <div class="head-top"></div>
            <div class="head-bottom"></div>
        </header>
        
        <ul class="list clearfix">
            <li class="item">1111111</li>
            <li class="item"></li>
            <li class="item"></li>
            <li class="item"></li>
            <li class="item"></li>
            <li class="item"></li>
            <li class="item"></li>
            <li class="item"></li>
            <li class="item"></li>
            <li class="item"></li>
            <li class="item"></li>
            <li class="item"></li>
            <li class="item"></li>
            <li class="item"></li>
            <li class="item"></li>
            <li class="item"></li>
        </ul>
        
    </body>
    <script src="./js/resize.js"></script>
</html>
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程