移動端web總結(二) 微金所專案總結

2021-10-24 06:51:22 字數 4057 閱讀 6732

1,**查詢:使用**查詢能針對不同螢幕區間設定不同的布局和樣式

語法: @media screen and (max-width: 768px) and (min-width: 320px)

//1. 超小屏裝置 768px以下

@media screen and (max-width: 768px)

//2. 小屏裝置 768px-992px

@media screen and (min-width: 768px) and (max-width: 992px)

//3. 中屏裝置 992px-1200px

@media screen and (min-width: 992px) and (max-width: 1200px)

//4. 大屏裝置 1200px以上

@media screen and (min-width: 1200px)

1.1 **查詢的其他寫法擴充套件(可以省略 screen )
div 

@media (min-width: 768px) }

@media (min-width: 992px) }

@media (min-width: 1200px) }

以上寫法也能夠實現:

超小屏裝置 768px以下,div為綠色;

小屏裝置 768px-992px,div為黃色;

中屏裝置 992px-1200px,div為藍色;

大屏裝置 1200px以上,div為紅色。

2,使用bootstrap的基本模板

內容

3,normalize.css 外掛程式的作用:增強不同瀏覽器的預設樣式道的表現一致性

normalize.css 與自己寫的 reset.css(重置樣式)的區別:都是增強瀏覽器的表現一致性但是normalize不會重置已經一致的元素。

4,bootstrap的基本樣式

類名 container 表示容器為響應式容器:(預設有15px的左右內邊距)

類名 container-fluid 表示容器為響應式容器: 容器的寬度始終100%。(預設有15px的左右內邊距)

5,柵格系統:

行和列的網格狀布局,類名 row 表示行,類名 col-#-# 表示列,#代表不確定(引數)。

你的內容應當放置於「列(column)」內,並且,只有「列(column)」可以作為「行(row)」的直接子元素。

第二個』#』:每一行的分等份,預設分成12等份 ,數字代表的是佔多少份(設定超過12則不生效)

6,柵格系統擴充套件功能(柵格系統都是預設向左對齊的,行和列都有15px的左右內邊距)

柵格巢狀 (內層的行和列通過 左右外邊距設為-15px 使得內層柵格填充滿外層柵格,解除外層柵格15px的左右內邊距)

列的偏移:offset 向右偏移多少等分

列的排序:push–往後推;pull–往前拉

col-xs-3

col-xs-9

列的偏移(offset) 與 列的排序(push) 的區別

7,響應式工具:顯示與隱藏

例如有如下需求:

大屏裝置 顯示; 中屏裝置 隱藏; 小屏裝置 顯示; 超小屏裝置 隱藏。

設定元素顯示的類樣式

visible-lg 大屏顯示其他隱藏

visible-md

visible-sm

visible-xs

設定元素隱藏的類樣式(3.2版本以後 ,建議使用hidden,不建議使用visible)

hidden-lg 大屏隱藏其他顯示

hidden-md

hidden-sm

hidden-xs

8,+,~選擇器:

『+』: 緊鄰的下乙個兄弟元素

『~』: 後面所有的兄弟元素

9,使用bootstrap元件的思路:

遇到比較通用的模組(導航條、輪播圖)先考慮bootstrap中有沒有類似的元件和外掛程式

找到外掛程式或元件的失示例後,先分析html**的結構,哪乙個模組對應哪部分

根據自己的結構需求調整好html元素

開始修改樣式,有的元素的樣式完全自己寫,一些需要覆蓋的bootstrap的css樣式,就可以根據該元件頂層的樣式,點進bootstrap.css檔案中,將其樣式下的所有樣式**拷貝在自己的css檔案中,進行修改覆蓋。這樣可以避免自己重寫樣式時,由於選擇器的層級不夠高而導致的無法覆蓋原始bootstrap中css樣式的問題。

一些特殊屬性可以省略:

- aria-expanded=「false」(預設不展開) aria-* 代表提供給螢幕閱讀器使用的(盲人閱讀器)

- class=「sr-only」 screen read only 代表提供給螢幕閱讀器使用的(盲人閱讀器)

- roleh屬性也是提供給螢幕閱讀器使用的(盲人閱讀器)

10,collapse元件

切換按鈕:

11,響應式輪播圖的思路

12,使用art-template模板引擎利用後台資料進行非同步渲染的步驟:

// 這裡由於data是形式的陣列物件,所以需要給它加個鍵名與其本身組合成乙個花括號形式的物件,然後才能傳值

var pointhtml=template("pointtemplate",);//返回值為利用資料生成的html結構

$(".carousel-indicators").html(pointhtml);// 將生成的html結構加入到頁面對應的位置,並進行渲染

13,json格式的字串與json物件的區別

json是一種特殊結構的字串,其本質是字串,是一種輕量級文字資料交換格式。它的格式非常嚴格,以冒號為鍵值對,中括號為陣列,花括號為物件,屬性名稱必須加引號,且是雙引號,字串必須是雙引號,數字的字串可以省略,最後乙個鍵值對必須沒有逗號。

而json物件(就是js中的物件),是一種特殊格式的資料型別,且格式要求比json格式的字串的格式要求寬鬆的多。

js中存在json到js物件的轉換:

var obj = str.parsejson(); //由json字串轉換為json物件

var obj = json.parse(str); //由json字串轉換為json物件

也存在js物件到json的轉換:

var last=obj.tojsonstring(); //將json物件轉化為json字元

var last=json.stringify(obj); //將json物件轉化為json字元

14,新學到的選擇器: :nth-of-type(n)、:first-of-type 和 :last-of-type

p:first-of-type 選擇每個p元素是其父級的第乙個p元素

p:last-of-type 選擇每個p元素是其父級的最後乙個p元素

p:nth-last-of-type(n) 選擇每個p元素是其父級的倒數第n個p元素

15,複習jquery獲取寬度相關的api

width()  內容

innerwidth() 內容+內邊距

outerwidth() 內容+內邊距+邊框

outerwidth(true) 內容+內邊距+邊框+外邊距

16,自己實現觸控滑動效果,或者使用外掛程式(iscroll.js)實現某個元素內的觸控滑動效果時,最好先使用e.preventdefault()清除掉移動裝置的touchmove事件的預設頁面滑動效果。

17,複習box-shadow屬性(box-shadow: 0 0 10px 10px hotpink inset;)

引數1:x軸的偏移

引數2:y軸的偏移

引數3:陰影的模糊寬度(顏色過渡的寬度)

引數4:陰影的延伸(設定的顏色增加多少寬度)

引數5:陰影的顏色

引數6:內陰影(向內延伸和過渡)

微信分享,二次分享 移動web端

create at 2019 02 16js 相關 移動端實測,需做老版本相容 function wechatshare title,desc xhr.send function wxconfig res config 驗證後會執行ready方法 wx.ready function 目前新版方法存在...

微信分享,二次分享 移動web端

create at 2019 02 16js 相關 移動端實測,需做老版本相容 function wechatshare title,desc xhr.send function wxconfig res config 驗證後會執行ready方法 wx.ready function 目前新版方法存在...

微信移動端招聘專案總結

上述主功能模組下又有子模組。任務管理模組下有 面試反饋模組 offer審批模組 職位審批模組 篩選簡歷模組。使用者管理模組下有使用者解綁模組。幫助中心則為主模組。主要頁面流程如下 任務管理模組下四個子模組,進入展示的頁面都分為未完成和已完成的任務列表,只是根據介面不一樣,設定頁面標題不同。任務列表分...