摘要：實戰(zhàn)之微信錢包騰訊服務(wù)界面網(wǎng)格布局是讓開發(fā)人員設(shè)計一個網(wǎng)格并將內(nèi)容放在這些網(wǎng)格內(nèi)。對于移動端適配，不同的公司不同的團(tuán)隊有不同的解決方案。柵格系統(tǒng)用于處理頁面多終端適配的問題。

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

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

經(jīng)典的上-中-下布局。 在上-中-下布局的基礎(chǔ)上，加了左側(cè)定寬 sidebar。 左邊是定寬 sidebar，右邊是上-中-下布局。 還是上-中-下布局，區(qū)別是 header 固定在頂部，不會隨著頁面滾動。 左側(cè) sidebar 固定在左側(cè)且與視窗同高，當(dāng)內(nèi)容超出視窗高度時，在…

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

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

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

需求 最近丁香醫(yī)生的產(chǎn)品大佬又雙叒叕搞事情，想要在 H5 中做一個醫(yī)生邀請?zhí)釂柕墓δ埽梢詫⑨t(yī)生的二維碼名片分享出去，支持移動、PC 和微信。之前的圖片是由后端生成的，并且會緩存三天，導(dǎo)致信息更新不及時。由前端來做就能避免這些問題。 2. 方案 html2canvas.j…

隨著前端開發(fā)的興起，QQ也逐漸演變?yōu)閃eb與原生終端混合的開發(fā)模式。得到Web動態(tài)運營能力的同時，QQ也在交互響應(yīng)速度、后臺服務(wù)壓力、海量用戶集的帶寬沖擊等方面，受到了更多的挑戰(zhàn)。在快速的Web運營節(jié)奏下，必須保證嵌入QQ的第三方業(yè)務(wù)也始終處于一個高質(zhì)量的服務(wù)狀態(tài)。針對這些問題…

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

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

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

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

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

Rem布局的原理解析

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

打造絲般順滑的 H5 翻頁庫

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

Grid 布局是網(wǎng)站設(shè)計的基礎(chǔ)，CSS Grid 是創(chuàng)建網(wǎng)格布局最強大和最簡單的工具。在本文中，我將盡可能快速地介紹CSS網(wǎng)格的基本知識。我會把你不應(yīng)該關(guān)心的一切都忽略掉了，只是為了讓你了解最基礎(chǔ)的知識。

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

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

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

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

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

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

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

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

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

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

移動端開發(fā)的兼容問題（自我總結(jié)篇）

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

讓新手能快速掌握的移動端自適應(yīng)布局

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