素日裏的小結1

移動端常見適配方案

1. 彈性盒佈局(display: flex), 如拉勾網

• 特色: 關鍵元素高度和位置不變, 容器元素作伸縮變換。
• 用法: (1). 文字使用流失佈局(em單位); (2). 圖片等比縮放

2. 使用rem單位(網易作法)

• (1). 設1rem = 100px, 設計稿750px, body寬度爲7.5rem, 在不一樣的屏幕寬度下: font-size = width / 7.5rem;
• (2). 設置meta標籤, ;
• (3). 當設備分辨率大於設計稿750px, 設置body寬度始終爲7.5rem;

3. 使用rem單位(淘寶作法)

• (1). 設置meta標籤, device-width = 設備物理分辨率 / (devicePixelRatio * scale), 當scale = 1時, 即device-width = 設備物理分辨率 / dpr;
• (2). var scale = 1 / devicePixelRatio, document.querySelector('meta[name="viewport"]').setAttribute('content','initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
• (3). html元素的font-size的計算公式，font-size = deviceWidth / 10, 設計稿750px, 則font-size爲75px, 元素rem尺寸爲: 150px / 75px = 2rem;

4. bootstrap柵格佈局

vue項目總結

1. 問題: vue中請求返回的數組(嵌套對象), 改變對象value, 能夠觸發視圖的更新; 若將請求返回的數組與本地數組拼接, 成爲了普通數組, 改變對象value, 不能觸發視圖的更新; 解決方法: vue是經過檢測get, set才得知數據是否更新的，而對於普通數組來講，是沒有get，set方法的，因此須要咱們本身手動觸發，須要發送消息通知vue this.list[index].flag = true; Vue.set(this.list, index, this.list[index]);

2. 問題: 列表在ios上滑動卡頓 解決方法: ul { overflow-y: auto; -webkit-overflow-scrolling: touch; }

平常問題

1. 關於在谷歌瀏覽器中input[type="password"]框設置autocomplete=off失效問題 解決方法: 同事去掉input的id和name屬性, 若是要加name, 在onchange事件中加

2. npm安裝開發環境的包: npm install --save-dev 或者 npm i -D; npm安裝生產環境的包: npm install --save -dev;

3. 移動端web app UI框架

UI框架	星星	語言	前端框架
Ionic	34K	typescript	angular
ant-design	27.6k
weui	18.5k
vux	12.2k		vue
Framework7	12.2k
amazeui	11.7k
mui	8.9k
onsenui	6.3k
sui	5.5k

• 4. 前端最新資訊網址

  網站名	連接
  EchoJS	EchoJS官網
  DailyJS	DailyJS官網
  Front-End Front	Front-End Front官網

• 5. 前端技術刊物

  網站名	連接
  ES.next News	ES.next News官網
  Web Design Weekly	Web Design Weekly官網

• 6. 經常使用清除浮動的方法

  .clearfix:after {
      content: "";
      display: table;
      clear: both;
  }
  複製代碼

• 7.設置常見的reset樣式

/* IE瀏覽器對輸入控件有本身的font-family，須要統一 */
input,
textarea,
button{
	font-family: inherit;
}

/* Chrome瀏覽器會在輸入控制彙集的時候添加一個藍色的outline */
input:focus,
textarea:focus,
select:focus {
	outline: none;
}

/* 去掉textarea的可拉大小功能 */
textarea {
	resize: none;
}

/* IOS Safari在橫屏的時候會放大字體，第二個屬性讓滑動更流暢 */
html {
	-webkit-text-size-adjust: 100%;
	-webkit-overflow-scrolling : touch;
}

/* 統一標籤的margin值和p標籤的line-height */
body, p, h1, h2, ul, ol, figure, li {
	padding: 0;
	margin: 0;
}
h1, h2, p {
	line-height: 150%;
}

/* 去掉select的默認樣式 */
select{
	-webkit-appearance: none;
}

/* 若是有輸入內容IE會給輸入框右邊加一個大大的X */
input::-ms-clear {
	display: none;
	width: 0;
	height: 0;
}

/* 去掉number輸入框右邊點擊上下的小三角 */
input::-webkit-inner-spin-button {
	-webkit-appearance: none;
}
input::-webki-outer-spin-button {
    -webki-appearance: none;
}
複製代碼

• 8.圖片壓縮 使用tinypng.com

前端常見反爬蟲策略

• 1. 定義font-face字符集 例子：貓眼電影 使用font-face定義字符集, 並經過unicode去映射展現。 每次刷新，字符集的url都會發生變化。
• 2. background拼湊式 例子：美團 數字爲圖片，根據background-position進行偏移，顯示不一樣的字符。
• 3. 字符穿插式 例子：微信公衆號文章

• 4. 僞元素隱藏式

     例子：汽車之家

     把關鍵字作到僞元素的content裏面，

     div::after {
         content: "哈撒給";
     }
     
     複製代碼

• 5. 元素定位覆蓋式 例子：去哪兒 4位數字，先用4個標籤展現，其中有的數字是錯的，再用幾個標籤（帶正確的數字）去覆蓋錯誤的數字。
• 6. 增長一些無用的dom數字節點

頁面元素動起來的動畫庫

• 1. scrollreveal.js
• 2. animate.css + wow.js