移動開發與響應式網站

來源:互聯網
上載者:User

標籤:and   play   網站   space   row   文檔   方向   順序   viewport   

  今天說一下移動互連網的開發與響應式網站的一些東西。

  【viewport基本知識】

  1、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標籤中的屬性,我就不一一例舉了,感興趣的可以自己查一下。

  【實現響應式布局的方法】

  1、媒體查詢的方式media

  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);

  【flxe彈性布局】

  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的屬性。(常用)

 

 

 

 

  

移動開發與響應式網站

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.