第三部分-----移動開發與響應式

標籤：dir   元素   技巧   oat   styles   之間   input   行高   連結   

  PART-1　　移動開發常用技巧

 

【viewport基本知識】

    設定布局viewport的各種資訊：

            1、width=device-width：設定viewport視口寬度等於裝置寬度
            2、initial-scale=1：網頁預設縮放比為1（網頁在手持功能上不會進行縮放）
            3、minimum-scale=1：網頁最小縮放比為1
            4、maximum-scale=1：網頁最大縮放比為1
            5、user-scalable=no：禁止使用者手動縮放網頁。在ios10以上的裝置失效

  注意：在手機站以及響應式網站的製作中，必需添加以下語句。

        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        

            禁止裝置將手機號、郵箱進行識別，取消點擊撥打到電話事件
 
        <meta name="format-detection" content="telephone=no,email=no"/>

            ios添加到主畫面時，webapp的標題

        <meta name="apple-mobile-web-app-title" content="標題">

            ios添加到主畫面時,是否啟用webapp的全螢幕模式,刪除頂端地址欄和底部工具列

        <meta name="apple-mobile-web-app-capable" content="yes" />

            ios添加到主畫面時，web app的頂部狀態列顏色：
            black：黑色、white白色、black-translucent黑色半透明，當設定為半透明時，網頁將充滿整個螢幕，頂部透明的狀態列將蓋住網頁
            最上方一小條。

        <meta name="apple-mobile-web-app-status-bar-style" content="black">

            ios添加到主畫面時，webapp的表徵圖。

        <link rel="apple-touch-icon-precomposed" href="" />

            設定瀏覽器使用最新的ie或Google區編譯。
            注意：這句設定語句不是手機端專用，一般pc網頁均需要設定。（一般來說都要加上）

        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
 

              【手機端字型樣式】

                1、一般手機端不支援微軟雅黑字型
                 2、中文字型一般不設定，使用系統預設即可
                 3、英文字型一般設定為font-family: helvetica;

                 {   font-family: helvetica;}

                設定使用者不能選中文本
                 1、手機端不能長按選擇
                 2、pc端不能用滑鼠選擇
          
              { -webkit-user-select: none;
                -moz-user-select: none;}
               
                  去除表單的預設面板，手機、pc均可使用
               
                {appearance: none;}

                 禁止超連結和圖片，長按時快顯功能表  

 img,a{
                -webkit-appearance: none;
            }
            
         * 設定placeholder的屬性
       
            input:focus::-webkit-input-placeholder {
                color: blue;
               點擊獲得焦點時的顯示的顏色*/
            }
            input:-ms-input-placeholder { // IE10+
                color: #999;
            }
            input:-moz-placeholder { // Firefox4-18
                color: #999;
            }
            input::-moz-placeholder { // Firefox19+
                color: #999;
            }

            手機端打電話

        <a href="tel://18865512313">18865512313</a>

            手機端發簡訊

        <a href="sms://8865512313">18865512313</a>
        
        

  PART-2　　響應式布局

 

【使用媒體查詢的三種方式】
            1、直接在css中使用：
                @media 類型（常選all/screen） and （條件1） and （條件2）{
                     css選取器{
                       css屬性：屬性值； }
            2、使用link連結css，media屬性可以設定媒體查詢方式：
                 <link rel="stylesheet" href="css/02-響應式布局.css" media="all and (max-width:800px)" />
            3、使用import匯入，直接在url後面使用空格間隔媒體查詢規則：
             @import url("css/02-響應式布局.css") all and (max-width:800px);
          

 PART-3　　彈性布局布局

 

 【flex彈性布局】
              1、瞭解兩個基本概念
             （1）、容器：需要添加彈性布局的父元素
             （2）、項目：彈性布局中的每一個子項目稱為項目
              2、給彈性布局的使用
             （1）、給容器添加display: flex;或者display: inline-flex;，即可使容器內容採用彈性布局顯示，而不遵循常規文檔流的顯示方式
             （2）、容器添加彈性布局後，僅僅是容器內容採用彈性布局，而容器自身在文檔流中的定位方式依然遵循常規文檔流
             （3）、display: flex;容器添加彈性布局後，顯示為區塊層級元素
                           display: inline-flex;容器添加為彈性布局後，顯示為行級元素
            （4）、設為 Flex布局以後，子項目的float、clear和vertical-align屬性將失效，但是position屬性依然生效。（仍舊可以使用定位）
    
           3、作用於容器的相關屬性
              （1）、flex-direction屬性決定主軸的方向（即項目的排列方向）。
                   row：預設值，主軸為水平方向，起點在左端
                   row-reverse，主軸水平方向，起點在右端。
                   column：主軸為垂直方向，起點在上沿。
                   column-reverse：主軸為垂直方向，起點在下沿。
              （2）、flex-wrap定義如果一條軸線排不下，如何換行。
                    nowrap（預設）：不換行，當容器寬度不夠時，每個項目會被擠壓
                    wrap：換行，並且第一行在容器最上方
                    wrap-reverse：換行，並且第一行在容器最下方
             （3）、flex-flow：是是flex-direction屬性和flex-wrap屬性的簡寫形式，預設值為row nowrap
             （4）、justify-content屬性定義了項目在主軸上的對齊。
                  注意：此屬性與主軸方向息息相關主，軸方向為：row-起點在左；row-reverse起點在右；column起點在上；column-reverse起點在下。
                        flex-start（預設值）：項目位於主軸起點
                        flex-end：項目位於主軸終點
                       center： 置中
                       space-between：左右對齊，項目之間的間隔都相等。開頭和最後的項目與容器邊緣沒有間隔
                       space-around：每個項目兩側的間隔相等。所以，項目之間的間隔比項目與邊框的間隔大一倍。（開頭和最後的項目與容器邊緣有間隔）
              （5）、align-items屬性定義項目在交叉軸上的相片順序。
                     flex-start：交叉軸的起點對齊。
                     flex-end：交叉軸的終點對齊。
                    center：交叉軸的中點對齊。
                    baseline: 項目的第一行文字的基準對齊。（受文字的行高，字型大小會影響每行的基準）
                    stretch（預設值）：如果項目未設定高度或設為auto，將佔滿整個容器的高度。
            （6）、align-content屬性定義了多根軸線的對齊。如果項目只有一根軸線，該屬性不起作用。
              注釋：當項目換為多行時，可使用align-content取代align-items。
                   flex-start：與交叉軸的起點對齊。
                    flex-end：與交叉軸的終點對齊。
                    center：與交叉軸的中點對齊。
                    space-between：與交叉軸左右對齊，軸線之間的間隔平均分布。
                    space-around：每根軸線兩側的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍。
                    stretch（預設值）：軸線佔滿整個交叉軸。
           
             4、作用於項目上的屬性
             （1）、order屬性定義項目的排列順序。數值越小，排列越靠前，預設為0。（常用）
             （2）、flex-grow屬性定義項目的放大比例。預設為0，即如果存在剩餘空間，也不放大。
             （3）、flex-shrink屬性定義了項目的縮小比例，預設為1，即如果空間不足，該項目將縮小。
             （4）、flex-basis：定義項目佔據的主軸空間，設定後如果主軸為水平，則設定這個屬性相當於設定這個項目的寬度，原寬度失效。
             （5）、flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫，預設值為0 1 auto。後兩個屬性可選。
                 這個屬性有兩個快捷設定：auto=(1 1 auto)/none=(0 0 auto)
             （6）、align-self屬性定義單個項目自身在交叉軸上的相片順序，可以覆蓋掉容器上的align-items屬性，屬性值與align-items相同
              預設值為auto，繼承父容器的align-items的屬性。（常用）

第三部分-----移動開發與響應式