最近在做的乙個專案是關於h5橫屏的。剛開始聽到這個需求我是一臉的懵逼，因為從未接觸過橫屏，也沒有看到h5橫屏的專案。當時還問了公司另外一位前端小哥，他說他也沒做過，不太清楚。。沒辦法，領導需求就是這樣的，只能硬著頭皮上了。。
強制橫屏展示，這裡用到了css3的旋轉功能，就是對螢幕 resize 事件進行監聽，當判斷為豎屏時將整個根容器進行逆時針 css3 旋轉 90 度即可。**如下：
在mounted生命週期中監聽resize事件：window.addeventlistener('resize', this.resize)
resize方法如下：
resize ()else
}
好了。到這裡已經完成了一小步了。接下來就是適配的問題了。我採用的是vw跟vh。以前沒用過，初次接觸，用過之後感覺真的挺好用的。
假如ios使用者開啟了螢幕固定或者android使用者開啟了螢幕自動旋轉。這兩種情況下，會有一點不一樣。這時候使用css判斷橫豎屏就顯得尤其重要了。**如下：
/* 豎屏 */@media screen and (orientation:portrait)
/* 橫屏 */
@media screen and (orientation:landscape)
在豎屏的時候使用vw來進行適配。即根據螢幕的寬度來適配。這裡以375 x 667的設計稿為例。例如：乙個元素寬為526，高為314。根據螢幕的寬度來適配的話就是526/375 * 100% vw、314/375 * 100% vw了。
如果是橫屏的話，就是用vh來進行適配。即根據螢幕的高度來適配。同樣以375*667的設計稿為例。此時元素寬為526，高為314。就該寫成寬為526/375 * 100% vh、高為314/375 * 100% vh了
tips:最近又重新研究了一下橫屏這個，發現其實不管ios使用者是否開啟了螢幕固定或者android使用者是否開啟了螢幕自動旋轉，，都不需要使用css判斷橫豎屏來寫兩套樣式了，只需要以正常情況(即豎屏下)的寬度來計算，然後使用vmin作為單位即可，這樣寫一套樣式就全部搞定了。（vmin是相對於視口的寬度或高度中較小的那個來計算的）
H5橫屏,移動端快取
最近接到乙個 h5 的活，乍一看挺簡單的，做起來就不是那麼回事了。接下來說說我的踩坑之路。1 頁面裡面要求有一條會自動延長的不規則曲線，就如這樣。開始我一聽甲方說要這種效果，我是不敢接這個活的。大家應該都知道，這條曲線如果用canvas或者svg畫出來，不得一年也得半載，這是會出人命的！好在我問了下...
H5 測試用例
測試用例 優先順序 前置條件 操作步驟 第2步 檢查首頁 期待結果 首頁顯示正常，沒有ui問題 步驟 第1步 在手機瀏覽器上開啟www.360kad.com，期待結果 介面顯示正常 第2步 在搜尋框中，搜尋 維生素 期待結果 可以搜尋到包含 維生素 的商品。第3步 新增乙個商品到購物車中 第4步 提...
Html簡介（以h5為準）
超文字標記語言 hyper text markup language html 文件描述網頁，包含 html 標籤和純文字。html文件也叫做 web 頁面。html 使用標記標籤來描述網頁。開始和結束標籤也被稱為開放標籤和閉合標籤。1.基本組成解析 宣告為 html5 文件 元素是 html 頁面...