摘要：使用移動設(shè)備查看頁面時會發(fā)現(xiàn)，在微信瀏覽器中有頂部導(dǎo)航欄有效解決圖片使用單位邊角缺失的問題前端掘金起因在移動端使用布局時圖片也需要用單位。移動端實踐前端掘金說起，相信大家并不陌生。

Sticky Footer，完美的絕對底部 - 前端 - 掘金
寫在前面 做過網(wǎng)頁開發(fā)的同學(xué)想必都遇到過這樣尷尬的排版問題：在主體內(nèi)容不足夠多或者未完全加載出來之前，就會導(dǎo)致出現(xiàn)（圖一）的這種情況，原因是因為沒有足夠的垂直空間使得頁腳推到瀏覽器窗口最底部。但是，我們期望的效果是頁腳應(yīng)該一...

[【科普文】二維碼的[生成]和[掃碼] - 掘金](https://juejin.im/post/58eb05...
作者：孫輝，美團金融前端團隊成員。15年畢業(yè)加入美團，相信技術(shù)，更相信技術(shù)只是大千世界里知識的一種，個人博客: https://sunyuhui.com 最近這段時間，團隊在做的業(yè)務(wù)主要和二維碼相關(guān)，在做的過程中，發(fā)現(xiàn)不管是自己還是團隊里其他同學(xué)，都對二維碼...

css sprite雪碧圖制作，使用以及相關(guān)，圖文gif。 - 掘金
寫在前面： 在網(wǎng)頁制作中，雪碧圖也是前端攻城獅必須掌握的一項小技能。百度詞條對雪碧圖的解釋是：CSS雪碧 即CSS Sprite，也有人叫它CSS精靈，是一種CSS圖像合并技術(shù)，該方法是將小圖標和背景圖像合并到一張圖片上，然后利用css的背景定位來顯示需要顯示...

標簽欄圖標，隨機背景圖，壓縮背景 - 掘金
寫在前面：本文內(nèi)容見標題，之前github個人主頁每次看到地址欄旁邊的小圖標默認的樣子，都覺得丑爆了，前幾天終于抽空把這個改了，還有之前背景圖片用了一個大壁紙的網(wǎng)址鏈接，每次讀取背景的時候感覺要半天那么久，一直想著要弄個反應(yīng)速度快的！然后我又找到一個好方法。 ...

翻屏類 h5 適配方案：解決寬高自適應(yīng)難題 - 前端 - 掘金
基于淘寶適配方案flexible + 翻屏h5 適配方案adaptive flexible解讀及應(yīng)用 原文: http://www.w3cplus....

移動端 H5 頁面注意事項 - 掘金

單個頁面內(nèi)容不能過多 設(shè)計常用尺寸：750 x 1334 / 640 x 1134，包含了手機頂部信號欄的高度。 移動端H5活動頁面常常需要能夠分享到各種社交App中，常用的有 微信、QQ 等。 使用移動設(shè)備查看頁面時會發(fā)現(xiàn)，在微信瀏覽器中有 頂部導(dǎo)航欄...

有效解決 css sprite 圖片使用 rem 單位邊角缺失的問題 - 前端 - 掘金
起因 在移動端使用 rem 布局時 sprite 圖片也需要用 rem 單位。但由于瀏覽器對小數(shù)單位精度解析的差異，在不同設(shè)備上一些圖片看起來會缺了一點點，或者多了一點點.....

【0 基礎(chǔ)學(xué)習(xí)微信小程序】4. 模塊化與 page 函數(shù) - 前端 - 掘金
本文為菜鳥窩編輯吳佳林的連載。 菜鳥窩是專業(yè)的程序猿在線學(xué)習(xí)平臺，提供最系統(tǒng)的 Android 項目實戰(zhàn)課程 微信小程序0基礎(chǔ)入門 ...

改造你的網(wǎng)站，變身 PWA - 掘金
最近有很多關(guān)于 Progressive Web Apps（PWAs）的消息，很多人都在問這是不是（移動）web 的未來。我不想陷入native app 和 PWA 的紛爭，但是有一件事是確定的 --- PWA極大的提升了移動端表現(xiàn)，改善了用戶體驗。 好消息是...

移動 web 1px 邊框解決方案 - 掘金
在移動端web頁面開發(fā)中，為了使css中使用的尺寸與設(shè)計稿一致，通常會采用 rem 單位配合 lib-flexible 來實現(xiàn)移動端的適配，在IOS設(shè)備上 flexible.js 會根據(jù)設(shè)備的分辨率動態(tài)的調(diào)整 viewport 的 width 和 scale ...

談?wù)勄岸巳藛T在項目中的正確溝通方式 - 掘金
作為一個有點想法的web前端從業(yè)人員，是從業(yè)人員，在項目中難免會跟不同的角色打交道。有讓自己舒服的，也有讓自己難受的；有讓別人舒服的，當(dāng)然，也有讓別人難受的。我們當(dāng)然希望最好的結(jié)果是大家都很舒舒服服地把事情做完做好。這便就是本文要探討的地方。 項目中的角...

Android可伸縮布局－FlexboxLayout(支持RecyclerView集成) - 掘金
1 . 前言 前幾天看到Google官方的博客介紹了Google開源的一個強大的布局－FlexboxLayout，看見第一眼我心里的想法是，臥槽，Android 居然有這么一個強大的布局。作為一個有好奇心的工程獅，當(dāng)然第一時間就去試了試手，效果非常贊，因此這...

新年第一發(fā) -- 深入不淺出 zepto 的 Tap 擊穿問題 - 前端 - 掘金
問題來源 年前去阿里面試，過程中說道了fastclick解決iPhone機器上300ms點擊延遲的問題，然后就被問到了zepto的“點擊穿透”的現(xiàn)象以及產(chǎn)生這個具體原因，當(dāng)時回答的不是很好，主要是沒有特別深入的去研究這個原因，只是知道有這個現(xiàn)象和問題，...

完美解決 fixed 在手機端的 bug - 前端 - 掘金
一、帶input的fixed在ios下失效 在ios下，一個頁面如果有fixed浮層，并且浮層里面有input，那么當(dāng)input focused的時候，fiexed層的位置就會錯亂。 ...

移動端實踐 - video - 前端 - 掘金
說起video，相信大家并不陌生。對于做過視頻方面的小伙伴，特指前端方面的小伙伴，對它更是愛恨交加。因為，video使我們很方便在移動端播放視頻，不必像PC端那樣需要安裝一個flash。 video很復(fù)雜嗎？不，它很簡單。要想使...

響應(yīng)式和自適應(yīng)的區(qū)別 - 前端 - 掘金
玩前端也有幾個月了，發(fā)現(xiàn)大家普遍混淆了響應(yīng)式和自適應(yīng)的概念。先給大家體驗一下響應(yīng)式和自適應(yīng)的區(qū)別，請放大縮小一下屏幕嘗試?自適應(yīng)的體驗http://m.ctrip.com/html5/&nbs... 響應(yīng)式的體驗 http://segmen...

自適應(yīng)設(shè)計與響應(yīng)式網(wǎng)頁設(shè)計 - 前端 - 掘金
目前非常流行自適應(yīng)設(shè)計與響應(yīng)式設(shè)計，而且經(jīng)常讓人混淆，自適應(yīng)設(shè)計不應(yīng)與自適應(yīng)布局混為一談，它們是完全不一樣的概念。 在這先說明下這兩者的異同： 自從移動終端飛速發(fā)展以來，各種各樣的機型突飛猛進，很多網(wǎng)站的解決方法，是為不同的設(shè)備提供不同的網(wǎng)頁，比如專門...

手機端頁面自適應(yīng)解決方案—rem 布局進階版（附源碼示例） - 前端 - 掘金
一年前筆者寫了一篇 《手機端頁面自適應(yīng)解決方案—rem布局》，意外受到很多朋友的關(guān)注和喜歡。但隨著時間的推移，該方案已然過時，故為大家介紹一個目前我極力推薦使用的，更加完美的方案——rem布局（進階版） ...

延遲加載 (Lazyload) 三種實現(xiàn)方式 - 前端 - 掘金
定義：延遲加載也稱為惰性加載，即在長網(wǎng)頁中延遲加載圖像。用戶滾動到它們之前，視口外的圖像不會加載。這與圖像預(yù)加載相反，在長網(wǎng)頁上使用延遲加載將使網(wǎng)頁加載更快。在某些情況下，它還可以幫助減少服務(wù)器負載。 舉個例子來說明，當(dāng)打開淘寶首頁的時候，只有在瀏覽器窗口里的...

封裝并實現(xiàn)統(tǒng)一的圖片加載架構(gòu) - 掘金
前言 對于圖片加載框架，大家用到的可能是Glide，Picasso或者Fresco，這基本上是主流的圖片加載框架，我們使用它的時候，大都感覺如臂使指，簡直愉快的不要不要的。但是我們還是發(fā)現(xiàn)至少有兩個問題，以Glide為例，第一，當(dāng)需求變動，你需要對圖片加載失敗...

設(shè)計無限滾動下拉加載，實踐高性能頁面真諦 - 掘金
UX Planet論壇上有過這么一篇熱門文章: Infinite Scrolling Best Practices，它從UX角度分析了無限滾動加載的設(shè)計實踐。 無限滾動加載在互聯(lián)網(wǎng)上到處都有應(yīng)用：豆瓣首頁是一個，F(xiàn)acebook的Timeline是一個，Twe...

「前端」rem 縮放方案 flexible-js 兼容 375px 方案的思路 - 掘金
本文來自尚妝前端團隊南洋 發(fā)表于尚妝github博客，歡迎訂閱。 移動端H5頁面rem縮放方案flexible.js兼容375px方案的思路 參考： 移動端高清、多屏適配方案 viewport-and-flexible.js flexible.js git...