摘要:原生越來越好了,如果是簡單的頁面,沒必要引入一個龐大的,尤其在手機端,對速度流量敏感的地方,另外最好自己簡單封裝一些常用的函數,比如等。。。這時候它就不知所措了,只好待在中間。參考前端界有哪些越早知道越好的小技巧小知識
1.You Might Not Need jQuery
不用jQuery,原生js如何實現,可以參考這里:You Might Not Need jQuery 。原生js越來越好了,如果是簡單的頁面,沒必要引入一個龐大的jQuery,尤其在手機端,對速度流量敏感的地方,另外最好自己簡單封裝一些常用的函數,比如toggleClass等。。。
2.Firefox查看源代碼功能檢查頁面錯誤頁面寫完后,記得用Firefox 查看頁面源代碼功能,可以一眼發現未閉合標簽、未轉義的HTML字符,如果不嫌麻煩,可以提交代碼到 http://validator.w3.org/ 驗證HTML、CSS,下面圖片來自CSDN當前首頁源碼,可以看到Firefox紅色高亮了錯誤的HTML代碼,_blank后面多了一個雙引號。
如果不在頁面中用js引用元素,盡可能不要設置元素的id,也盡量不要用#main{}來設置元素css樣式,而是用class方式.main{},因為
4.max-device-width可以防止ID重復,造成錯誤
可以方便引入新CSS復寫樣式,另外應當絕對避免行內css樣式.
使用 max-device-width檢測而不是max-width來兼容手機、平板等,可以避免桌面瀏覽器因為窗口小,而看到丑陋的手機頁面效果。
@media only screen and (max-device-width:980px){}5.flex布局
多列布局,不考慮低級瀏覽器可以使用CSS3的flex布局,可以做到比浮動更好控制,如我寫的樣例代碼,垂直、水平居中可以很容易實現:
裝個二維碼生成當前網址的插件,以方便查看手機實際顯示效果,現在移動端日益重要,作為前端,一定不能忽視移動端的顯示效果,雖然瀏覽器都支持選擇device來測試不同的設備顯示效果,但畢竟和真實設備有差別,尤其在測試微信內的頁面時候,非常方便。
7.讓一個塊級元素在某區域內上下左右居中效果:
解釋:原理就是讓 box 自己既要往左也要往右,既要往上也要往下。這時候它就不知所措了,只好待在中間。
8.chrome中隱藏元素在 Chrome 瀏覽器的 Elements 里面選中某個元素,按 h 可以隱藏該元素。
9.適當使用localStorage緩存HTML表單內容.適當使用localStorage緩存HTML表單內容,防止瀏覽器崩潰、死機造成填寫丟失.
具體事例移步這里cache form.通過‘查看網頁源代碼’可以看到實現的js,我還沒研究明白。。。
使用一些chrome的liveload插件或者grunt、glup這些構建工具的liveload插件,這樣可以邊寫代碼變自動刷新頁面,實時看效果.
未完待續。。。
參考:前端界有哪些越早知道越好的小技巧小知識?
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/79440.html
摘要:原生越來越好了,如果是簡單的頁面,沒必要引入一個龐大的,尤其在手機端,對速度流量敏感的地方,另外最好自己簡單封裝一些常用的函數,比如等。。。這時候它就不知所措了,只好待在中間。參考前端界有哪些越早知道越好的小技巧小知識 1.You Might Not Need jQuery 不用jQuery,原生js如何實現,可以參考這里:You Might Not Need jQuery 。原生js...
摘要:原生越來越好了,如果是簡單的頁面,沒必要引入一個龐大的,尤其在手機端,對速度流量敏感的地方,另外最好自己簡單封裝一些常用的函數,比如等。。。這時候它就不知所措了,只好待在中間。參考前端界有哪些越早知道越好的小技巧小知識 1.You Might Not Need jQuery 不用jQuery,原生js如何實現,可以參考這里:You Might Not Need jQuery 。原生js...
摘要:本周于上海閉幕,掘金和知乎上都有對應的實錄和問答,但會議的視頻目前都還沒放出來,有心的同學如果找到了歡迎分享。建議中英文對照閱讀。英文原文前端獨立技術博客推薦推薦一些現在還在堅持原創的博主,有業界大牛,也有小鮮肉,也有國外美女。 CSS 樣式書寫規范最佳實踐 本文的所列是實踐當中得出的一套比較不錯的 CSS 書寫規范,可以結合自身團隊發展出一套適合自己業務的規范。 CSS中的字體與排版...
摘要:本周于上海閉幕,掘金和知乎上都有對應的實錄和問答,但會議的視頻目前都還沒放出來,有心的同學如果找到了歡迎分享。建議中英文對照閱讀。英文原文前端獨立技術博客推薦推薦一些現在還在堅持原創的博主,有業界大牛,也有小鮮肉,也有國外美女。 CSS 樣式書寫規范最佳實踐 本文的所列是實踐當中得出的一套比較不錯的 CSS 書寫規范,可以結合自身團隊發展出一套適合自己業務的規范。 CSS中的字體與排版...
摘要:本周于上海閉幕,掘金和知乎上都有對應的實錄和問答,但會議的視頻目前都還沒放出來,有心的同學如果找到了歡迎分享。建議中英文對照閱讀。英文原文前端獨立技術博客推薦推薦一些現在還在堅持原創的博主,有業界大牛,也有小鮮肉,也有國外美女。 CSS 樣式書寫規范最佳實踐 本文的所列是實踐當中得出的一套比較不錯的 CSS 書寫規范,可以結合自身團隊發展出一套適合自己業務的規范。 CSS中的字體與排版...
閱讀 3403·2023-04-26 02:41
閱讀 2445·2023-04-26 00:14
閱讀 2823·2021-08-11 10:22
閱讀 1275·2019-12-27 11:38
閱讀 3571·2019-08-29 18:34
閱讀 2375·2019-08-29 12:13
閱讀 2951·2019-08-26 18:26
閱讀 1834·2019-08-26 16:49