Flexible實現H5頁面的終端適配

阿新 • • 發佈：2019-01-19

設計師和前端開發的適配協作基本思路是：

選擇一種尺寸作為設計和開發基準
定義一套適配規則，自動適配剩下的兩種尺寸(其實不僅這兩種，你懂的)
特殊適配效果給出設計效果

lib-flexible是什麼？
lib-flexible是一個製作H5適配的開源庫。點選下載

使用方法

<script src="build/flexible_css.debug.js"></script>
<script src="build/flexible.debug.js"></script>
//或者直接載入阿里CDN的檔案：
<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js" 
></script>

案例實戰

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta content="yes" name="apple-mobile-web-app-capable">
        <meta content="yes" name="apple-touch-fullscreen">
        <meta content="telephone=no,email=no" 
 name="format-detection">
        <script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>
        <link rel="apple-touch-icon" href="favicon.png">
        <link rel="Shortcut Icon" href="favicon.png" type="image/x-icon">
        <title>再來一波</title 
>
    </head>
    <body>
        <!-- 頁面結構寫在這裡 -->
    </body>
</html>

正如前面所介紹的一樣，首先載入了Flexible所需的配置：

<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>

這個時候可以根據設計的圖需求，在HTML文件的中新增對應的HTML結構，比如：

<div class="item-section" data-repeat="sections">
    <div class="item-section_header">
        <h2><img src="{brannerImag}" alt=""></h2>
    </div>
    <ul>
        <li data-repeat="items" class="flag" role="link" href="{itemLink}">
            <a class="figure flag-item" href="{itemLink}">
                <img src="{imgSrc}" alt="">
            </a>
            <div class="figcaption flag-item">
                <div class="flag-title"><a href="{itemLink}" title="">{poductName}</a></div>
                <div class="flag-price"><span>雙11價</span><strong>¥{price}</strong>
                <small>({preferential})</small></div>
                <div class="flag-type">{activityType}</div>
                <a class="flag-btn" href="{shopLink}">{activeName}</a>
            </div>
        </li>
    </ul>
</div>

把視覺稿中的px轉換成rem
目前Flexible會將視覺稿分成100份（主要為了以後能更好的相容vh和vw），而每一份被稱為一個單位a。同時1rem單位被認定為10a。針對我們這份視覺稿可以計算出：

1a   = 7.5px
1rem = 75px

那麼我們這個示例的稿子就分成了10a，也就是整個寬度為1rem，對應的font-size為75px：

Flexible實現H5頁面的終端適配

設計師和前端開發的適配協作基本思路是：選擇一種尺寸作為設計和開發基準定義一套適配規則，自動適配剩下的兩種尺寸(其實不僅這兩種，你懂的) 特殊適配效果給出設計效果 lib-flexible是什

rem、px、em(手機端h5頁面螢幕適配的幾種方法)

px px畫素（pixel）：相對長度單位。相對於顯示器螢幕解析度而言。pc端使用px倒也無所謂，可是在移動端，因為手機解析度種類頗多，不可能一個個去適配，這時px就顯得非常無力，所以就要考慮em和r

使用Flexible實現手淘H5頁面的終端適配rem自適應佈局-移動端自適應必備

曾幾何時為了相容IE低版本瀏覽器而頭痛，以為到Mobile時代可以跟這些麻煩說拜拜。可沒想到到了移動時代，為了處理各終端的適配而亂了手腳。對於混跡各社群的偶，時常發現大家拿手機淘寶的H5頁面做討論——手淘的H5頁面是如何實現多終端的適配？那麼趁此Amfe阿里無線前端團

使用Flexible實現手淘H5頁面的終端適配

此段程式碼實現動態計算，事實上他做了這幾樣事情：動態改寫 <meta> 標籤給 <html> 元素新增 data-dpr 屬性，並且動態改寫 data-dpr 的值給 <html> 元素新增 font-size 屬性，並且動態改寫

使用Flexible實現手淘H5頁面的終端適配【轉】

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta content="yes" name="apple-mobile-web-

css 手機適配手淘H5移動端適配方案flexible原始碼分析

手淘H5移動端適配方案flexible原始碼分析移動端適配一直是一個值得探討的問題，在業餘時間我找了一些頁面，查看了一些廠商對於移動端H5頁面的適配方案，看到了幾個典型的例子，今天就來記錄一下我看到的第一個典型的例子，也是我們公司目前普通H5專案正在使用的適配方案。

手淘H5移動端適配方案flexible原始碼分析

移動端適配一直是一個值得探討的問題，在業餘時間我找了一些頁面，查看了一些廠商對於移動端H5頁面的適配方案，看到了幾個典型的例子，今天就來記錄一下我看到的第一個典型的例子，也是我們公司目前普通H5專案正在使用的適配方案。這個適配方案是lib-flexible，在看這個原始碼的同時，我想先來回顧一下幾個概念：

h5 web頁面手機適配

;(function () { window.addEventListener(('orientationchange' in window ? 'orientationchange' : 'resize'), (function () { funct

移動端頁面的適配

ice minimum meta view ini maximum dev port pan 　　不進行任何配置，把網頁直接放在移動端打開會有嚴重的縮小頁面問題，通常我們可以在head標簽中加入以下代碼就可以解決：　<meta name="viewport" con

再聊移動端頁面的適配

nim aspect width 超過 ans 一起 device 效果其他 Flexible承載的使命 Lexible到今天也有幾年的歷史了，解救了很多同學針對於H5頁面布局的適配問題。而這套方案也相對而言是一個較為成熟的方案。簡單的回憶一下，當初為了能讓頁面更好的適配

rem與media標籤實現移動端螢幕適配

下面四個方案來自同事共享，原理都是採用等比縮放的方式 —— 獲得目標螢幕寬度和設計稿寬度的比，作為 rem 的基值（縮放係數），設定為html標籤的字型大小。不同的只是在於效能取捨和書寫習慣。方案1@media screen and (min-width: 320px) {html{font-size:50

移動端頁面開發適配 rem佈局原理

什麼是適配，為什麼要適配我們拿到的設計圖一般是以640，750，1080解析度為基準設計的，而現在的手機終端各式各樣，解析度不同，邏輯畫素不同，視口不同，所以為了讓我們的頁面在每個裝置上都可以良好的展示，那麼就需要為這些裝置做統一的處理，這個過程就稱為移動端適配。

【移動端適配方案一彈性佈局】@media標籤+rem+viewport實現移動端螢幕適配

一、從設計稿說起：採用rem來佈局，其實設計稿是多大都沒有關係，設計稿給480、600或者750都可以，其他尺寸也可以，你就想成它是一張A4紙，然後這些數字只是對這張紙的最大計量單位。反正一張圖就那麼大，無論計量單位是多少，UI設計師能夠在一張A4上給的東西都是一樣的。比如說

H5 font-size適配

https://blog.csdn.net/highboys/article/details/78762744方法一：http://www.mamicode.com/info-detail-1816919.html例如以螢幕320畫素為基準html {font-size: 6

h5 手機螢幕適配—REM

一、rem、em和px之間的關係使用rem之前，先得弄清楚rem、em和px之間的關係，特別是每一個單位的使用跟程式碼塊的繼承之間的關係：通過對比會發現：只是單位使用不一樣但效果卻是截然不同的。rem和em都是相對單位，

CSS3前端頁面的適配使用rem換算

轉自：https://www.cnblogs.com/annie211/p/8118857.html為什麼要使用rem之前有些適配做法，是通過js動態計算viewport的縮放值（initial-scale）。例如以螢幕320畫素為基準，設定1，那螢幕375畫素就是375/3

前端頁面的適配使用rem換算---rem詳解

為什麼要使用rem 僅用於學習，違者必究！！！之前有些適配做法，是通過js動態計算viewport的縮放值（initial-scale）。例如以螢幕320畫素為基準，設定1，那螢幕375畫素就是375/320=1.18以此類推。但直接這樣強制頁面縮放過於

使用rem實現全螢幕自動適配（等比例縮放佈局樣式）

rem這是個低調的css單位，近一兩年開始嶄露頭角，有許多同學對rem的評價不一，有的在嘗試使用，有的在使用過程中遇到坑就棄用了。但是我對rem綜合評價是用來做web app它絕對是最合適的人選之一。 rem是什麼？ rem（font size of th

頁面字型適配（media query )， em的使用

首先來說說em的使用使用者的瀏覽器預設渲染的文字大小是“16px”，換句話說，Web頁面中“body”的文字大小在使用者瀏覽器下預設渲染是“16px”。而“em”是一個相對的大小，是其相對於元素父元素的大小。比如說：如果在一個< div >設

前端手機頁面的適配css

我之前一直不知道同一個網頁，手機頁面和PC頁面，怎麼呈現出不同的效果呢？這個不同，不是說放大縮小的那種不同，而是佈局就不同了。今天我百度了下，看到了解惑的CSS程式碼@media only screen and (max-width: 767px)顧名思義，最大不超過767p

Flexible實現H5頁面的終端適配

案例實戰

相關推薦