摘要：實戰之微信錢包騰訊服務界面網格布局是讓開發人員設計一個網格并將內容放在這些網格內。對于移動端適配，不同的公司不同的團隊有不同的解決方案。柵格系統用于處理頁面多終端適配的問題。

CSS3網格布局是讓開發人員設計一個網格并將內容放在這些網格內。而不是使用浮動制作一個網格，實際上是你將一個元素聲明為一個網格容器，并把元素內容置于網格中。

在移動互聯網快速發展的今天，手機的種類和尺寸越來越多，作為前端的小伙伴們可能會越來越頭疼。對于移動端適配，不同的公司、不同的團隊有不同的解決方案。我們項目中也用了一部分解決方案，網上也看到了一些解決方案，對比下，總結一些自己的理解，希望對各位有幫…

經典的上-中-下布局。 在上-中-下布局的基礎上，加了左側定寬 sidebar。 左邊是定寬 sidebar，右邊是上-中-下布局。 還是上-中-下布局，區別是 header 固定在頂部，不會隨著頁面滾動。 左側 sidebar 固定在左側且與視窗同高，當內容超出視窗高度時，在…

學習前端方向也有一段時間了，起初做過一些項目，總是發現做完之后自己的邊框會變得比較粗，后面翻閱了部分資料慢慢的才了解了這個問題，大致列舉了幾種解決的辦法。
在window對象中有一個devicePixelRatio屬性，他可以反應css中的像素與設備的像素比。然而1px在不同的…

在搭建公司的樣式庫時自己的一點整理，中間遇到了很多疑惑，也解決了很多疑惑。目前樣式庫和文檔還在繼續開發編寫中，希望該文章對存在疑惑的朋友有幫助，也希望有經驗的大牛們能提供更多思路上的幫助。 每個公司都有自己的設計風格,以及不一樣的產品需求,如果引入其他第三方組件，很大可能帶來風…

定心丸：移動前端開發正逐漸步入前端技術的主流，事實上跟在一般的pc上，并不需要你掌握額外的技術，然而你在pc web上那一套在多數情況下并不適用于手機web，你必須知道這其中的注意點。當然移動web給人的感覺是一個拼h5和css3的陣地，這里面有足夠高大上的技術等著你去駕馭，在…

需求 最近丁香醫生的產品大佬又雙叒叕搞事情，想要在 H5 中做一個醫生邀請提問的功能，可以將醫生的二維碼名片分享出去，支持移動、PC 和微信。之前的圖片是由后端生成的，并且會緩存三天，導致信息更新不及時。由前端來做就能避免這些問題。 2. 方案 html2canvas.j…

隨著前端開發的興起，QQ也逐漸演變為Web與原生終端混合的開發模式。得到Web動態運營能力的同時，QQ也在交互響應速度、后臺服務壓力、海量用戶集的帶寬沖擊等方面，受到了更多的挑戰。在快速的Web運營節奏下，必須保證嵌入QQ的第三方業務也始終處于一個高質量的服務狀態。針對這些問題…

號外號外：專注于移動端的fullPage.js來啦！！！快點我查看做過移動端的同學都知道移動端布局太難了，終端太多了，傳統的布局方式已經力不從心，各種新的布局方式被發明在flex之前，傳統布局有流式布局（就是默認的方式），絕對定位布局，彈性布局（em），…

Q: 如果在移動端(APP)中發現一個頁面有問題, 我們該如何定位問題呢?
A: Fiddler(抓包) + weinre(調試 CSS 樣式) + vConsole(調試 JS 邏輯)

來自騰訊 ISUX 社交用戶體驗設計中心 設計師 對于 iPhone X 適配 H5 頁面的解決方案。
目前的 H5 頁面可以分為通欄頁面和非通欄頁面兩種，每種頁面都可能有底部操作欄，具體如下： 頂部通欄 某些業務的一級頁面多數使用了頂部通欄 banner 的效果，由于 iPh…

BetterScroll 是一款重點解決移動端各種滾動場景需求的開源插件（GitHub地址），適用于滾動列表、選擇器、輪播圖、索引列表、開屏引導等應用場景。 為了滿足這些場景，它不僅支持慣性滾動、邊界回彈、滾動條淡入淡出等效果的靈活配置，讓滾動更加流暢，同時還提供了很多 API…

什么是響應式？同一個頁面在不同屏幕尺寸下有不同的布局。 傳統的開發方式是PC端開發一套，手機端再開發一套，而使用響應式布局只要開發一套就好了，缺點是CSS比較重。 柵格系統用于處理頁面多終端適配的問題。柵格的響應式能力，得益于CSS3媒體查詢（Media Queries）的強力…

Rem布局的原理解析

從交互層面上來講，完成一個功能（獲得想要的信息）的過程稱之為用戶路徑。用戶路徑越長，完成功能的復雜度就越高，用戶體驗也就越差。因此當打開一個需要用戶填寫信息的表單界面時，為了提高可用性，PC 端一般會將光標聚焦到對應輸入框（input），移動端也是同理，讓對應的 input 獲…

打造絲般順滑的 H5 翻頁庫

經常會遇到一些需求是頁面鋪滿整個屏幕，即：屏幕有多高頁面就有多高不能出現滾動條。

Grid 布局是網站設計的基礎，CSS Grid 是創建網格布局最強大和最簡單的工具。在本文中，我將盡可能快速地介紹CSS網格的基本知識。我會把你不應該關心的一切都忽略掉了，只是為了讓你了解最基礎的知識。

默認全屏 在 viewport 的 meta 屬性中，添加 viewport-fit=cover 即可。 viewport-fit 默認值為 auto/contain，全屏值為cover，是不是感覺很熟悉？嗯，和 background-size 以及 object-fit…

近幾年來，在移動端上因原生開發成本高和效率低而導致涌現出來的一大批優秀前端框架，以及專門針對移動端設備的前端開發框架（如 RN/Weex），大前端的概念被不斷地提及。在這樣的背景之下，前端技術也將逐漸成為移動端開發者的必備技能。筆者作為一名移動端開發者，在接觸了前端開發之后，發…

很多webview提供了調整頁面字體大小的功能，例如手機QQ、微信、部分Android內置瀏覽器等。大部分瀏覽器調整字體只會導致字體顯示大小發生改變，其他元素的大小不受影響。但對于結構稍微復雜一點的頁面，字體大小的變動就足以導致頁面布局亂掉，導致文本不居中、文字折行、布局混亂等…

最近接到一個需求，中途需要動態設置滾動條的scrolltop值，發現在PC上都沒問題，然而上測試環境，各種問題，頁面老是不按照設想的那樣，最終發現是移動端對滾動條的處理不一致導致。
DEMO： 監聽滾動條事件 PC上： 手機上： 看到了嗎，就是折磨啃爹，所以移動端需要設置滾動條…

即傳統Web設計，網頁上的所有元素的尺寸一律使用px作為單位。 不管瀏覽器尺寸具體是多少，網頁布局始終按照最初寫代碼時的布局來顯示。常規的pc的網站都是靜態（定寬度）布局的，也就是設置了min-width，這樣的話，如果小于這個寬度就會出現滾動條，如果大于這個寬度則內容居中外加…

CSS在剛開始學習的時候看起來非常簡單。但是，隨著你的不斷了解。很快，你會發現 CSS 沒你想象的那么簡單，它復雜且有深度。那么本期就隨小編一起來看下有趣的CSS～

BetterScroll 是一款重點解決移動端各種滾動場景需求的開源插件GitHub地址，有下列功能支持滾動列表，下拉刷新，上拉刷新，輪播圖，slider等功能。 為了滿足這些功能，better-scroll通過使用慣性滾動、邊界回彈、滾動條淡入淡出來確保滾動的流暢。同時還支持…

在最新發布 iPhone X 的全面屏上，Safari 可以精美地顯示現有的網站。內容自動嵌入到顯示屏的安全區域內，以免被圓角、原深感攝像頭系統的空間遮擋住。 凹槽部分填充了頁面的 background-color (比如指定為 或 元素的背景顏色)…

最近一個項目掉進了移動端的大坑，包括ios下fixed布局，h5喚起鍵盤等問題，作為一個B端程序員，弱項就是瀏覽器的兼容性和移動端的適配(畢竟我們可以要求使用chrome)，還好這次讓我學習了一下相關知識。讓我們一起來看一下我怎么掙扎出這個大坑的。 先看一下要做什么，也就是一個…

和一步聊聊布局神器flexbox。
本文涉及內容如下： flexbox的基本概念、容器屬性學習、項目屬性學習、實戰演練。 flexbox 堪稱布局神器，但屬性實在太多讓人無從下手，因此將自己所學的知識做個總結。
flexbox是Flexible Box的縮寫，譯為彈性布局。fl…

移動端開發的兼容問題（自我總結篇）

本站不支持 CodePen 的腳本插入，可以到我的博客閱讀直接顯示示例代碼的版本。 有很多談及 Flexbox 的文章，但依然有不少前端對此感到困惑。一方面，flex 相關的 CSS 屬性繁多，影響到的具體效果也包含多個方面；另一方面，CSS 可以使用 Shorthand pr…

讓新手能快速掌握的移動端自適應布局

新的iphonex因為沒有實體home按鍵,多了一個虛擬home按鍵導致大量的適配問題。 現在iphonex的web端適配基本不用考慮頭部的問題，主要需要關注的fixed底部定位的問題。 獲取設備信息和瀏覽器信息。判斷iphonex的方法，因為他奇葩的分辨率1125*2436 …