移動端適配

H5移動端適配 Flexible方案

一、移動端一些概念 視覺稿 (選取一款手機的螢幕寬高作為基準) 在前端開發之前,視覺 MM會給我們一個psd檔案,稱之為視覺稿。 對於移動端開發而言,為了做到頁面高清的效果,視覺稿的規範往往會遵循以下兩點: 1)首先,選取一款手機的螢幕寬高作為基準(以前是iPhone4 的320×480,現在更多的 […]

懶人必備的移動端定寬網頁適配方案

本文最初釋出於我的個人部落格:咀嚼之味 如今移動裝置的解析度紛繁複雜。以前僅僅是安卓機擁有各種各樣的適配問題,如今 iPhone 也擁有了三種主流的解析度,而未來的 iPhone 7 可能又會玩出什麼新花樣。如何以不變應萬變,用簡簡單單的幾行程式碼就能支援種類繁多的螢幕解析度呢?今天就給大家介紹一種 […]

談談移動端螢幕適配的幾種方法

文/騰訊 莫振中 移動端web開發相對於PC端web開發,我們可以慶幸不用相容那麼多瀏覽器了,但是隨之而來的卻是各種螢幕尺寸的適配,個人覺得,比PC端還要費精力。在使用了騰訊優測進行軟體測試後,問題得到了有效解決。 響應式佈局 簡而言之,就是頁面元素的位置隨著螢幕尺寸的變化而變化,通常會用百分比來定 […]

adaptive.js讓移動端開發更簡單的方案

前言 對於手機不離手的當今社會,移動端頁面開發已經成了日常便飯,如何讓手機頁面開發起來更省心是一個前端工程師必不可少的技能。 adaptive.js 由本人借鑑手淘方案編寫的非常小巧的js程式碼片段,它可以讓你的手機頁面開發起來更省心。廢話不多說,讓我們先看看一個demo 最後附上adaptive. […]

移動端佈局方案淺談

media 百分比 直接採用媒體查詢加百分比去佈局。 核心思想: 頁面主體佈局基本採用百分比去設定。 然後,其他塊內佈局,例如font-size 計算font-size 優點: 後續佈局處理簡單,配合px2rem外掛等,使用十分方便。 基本能很好適配市面即大多數尺寸手機。 相容性也比較好,97.62 […]

C3:使用flex彈性佈局

垂直居中 相信我們大多數人都是從static,浮動,定位這三種佈局方式來開始製作網頁的。在大多數的業務需求下,浮動和定位都能夠很好的滿足我們的開發需要。即使是在響應式設計中,浮動和定位配合百分比,rem,媒體查詢都能夠解決大多數的問題。但是如果你只使用浮動和定位的話,碰到以下的場景你就會發現不是那麼 […]