移動端頁面開發的四種方式筆記 三

2021-10-03 18:28:33 字數 2997 閱讀 1695

原理:使用**查詢針對不同寬度的裝置進行布局和樣式的設定,從而適配不同的裝置

超小螢幕(手機) <768px

小屏裝置(平板) >=768px~<992px

中等螢幕(桌面顯示器) >=992px~<1200px

寬屏裝置(大桌面顯示器) >=1200px

響應式布局容器

響應式需要乙個父集作為布局容器,來配合子集元素來實現變化效果。

原理就是在不同螢幕下,通過**查詢來改變這個容器的大小,再改變裡面子元素的排列方式和大小,從而實現不同螢幕下,看到不同的頁面布局和樣式變化

尺寸的劃分

超小螢幕(手機) <768px :設定寬度為100%

小屏裝置(平板) >=768px~<992px :設定寬度為750px

中等螢幕(桌面顯示器) >=992px~<1200px :設定寬度為970px

寬屏裝置(大桌面顯示器) >=1200px :設定寬度為1170px

bootstrap使用(只考慮樣式)

1、首先建立資料夾結構

2、建立html骨架結構

3、引入相關樣式檔案

4、書寫內容

布局容器

bootstrap 需要為頁面內容和柵格系統包裹乙個 .container 容器。

.container 類用於固定寬度並支援響應式布局的容器。不同尺寸的劃分見上文

.container-fluid 類用於 100% 寬度,佔據全部視口(viewport)的容器。(它適合於單獨做移動端開發)

柵格系統

柵格系統用於通過一系列的行(row)與列(column)的組合來建立頁面布局,內容可以放入這些建立好的布局中。

柵格系統分為了12列

行(row)必須放到 .container 布局容器裡面

要實現列的劃分,需要給列新增類字首

xs-extra small :超小

sm-small :小

md-medium :中等

lg-large :大

每一列缺省有左右15px的padding

可以同時為一列指定多個類名,以便劃分不同份數。例如:class=「col-md-4 col-sm-6」

class

="container"

>

class

="row"

>

class

="col-lg-6"

>

1div

>

class

="col-lg-2"

>

2div

>

class

="col-lg-2"

>

3div

>

class

="col-lg-2"

>

4div

>

div>

div>

如果份數相加小於12會有空白

如果大於,多的那一列會在下一行顯示

列巢狀

class

="container"

>

class

="row"

>

class

="col-lg-6"

>

class

="row"

>

class

="col-lg-6"

>

22div

>

class

="col-lg-6"

>

33div

>

div>

div>

class

="col-lg-2"

>

2div

>

class

="col-lg-2"

>

3div

>

class

="col-lg-2"

>

4div

>

div>

div>

列偏移

使用 .col-md-offset- 類可以將列向右偏移

原理是在右側的盒子的左邊加了乙個margin值

class

="container"

>

class

="row"

>

class

="col-md-3"

>

zuodiv

>

class

="col-md-3 col-md-offset-6"

>

youdiv

>

div>

div>

列排序

通過使用 .col-md-push- 和 .col-md-pull- 類就可以很容易的改變列(column)的順序。

class

="container"

>

class

="row"

>

class

="row"

>

class

="col-md-9 col-md-push-3"

>

右推div

>

class

="col-md-3 col-md-pull-9"

>

左拉div

>

div>

div>

div>

響應式工具

利用**查詢,並使用這些工具類能方便的針對不同裝置顯示或隱藏

.hidden-xs 超小屏下隱藏

.hidden-sm 小屏下隱藏

.hidden-md 中屏下隱藏

.hidden-lg 大屏下隱藏

與之相反的是visible-xs等等,代表的是顯示

ios頁面間傳遞引數四種方式

2 使用檔案,或者nsuserdefault來傳遞 3 通過乙個單例的class來傳遞 4 通過delegate來傳遞。ios開發使用委託delegate在不同視窗之間傳遞資料是本文要介紹的內容,主要是來講解如何使用委託delegate在不同視窗之間傳遞資料,具體內容來看詳細內容。在ios開發裡兩個...

nocache的四種方式

nocache的四種方式 1.cdn的推方式 2.客戶端url方式 css需加a.css?2010.css 3.html cache meta 4.服務端cache 6.iis http頭式,建立虛擬目錄 以下 在asp頁面首部加入 複製內容到剪貼簿 response.buffer true res...

棧的四種方式

按棧指標指向有滿 full 空 empty 滿 sp指向最後乙個壓入的資料 即先修改sp到指向下一目標位置,再存入相應的值 如 push rx sp rx 空 sp指向下乙個空的位置,即先存入相應的值,再修改sp到指向下一目標位置 如 push rx pop rx sp rx 根據壓棧向棧指標的變數...