移動端解決方案學習記錄

時間 2019-12-05

標籤移動解決方案學習記錄欄目無線简体版

原文原文鏈接

先附上參考資料連接；css

最終測試了 lib-flexible 的用法；json

測試代碼以下：sass

html結構

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="rem.js"></script>
    <link rel="stylesheet" href="css/test.css">
</head>

<body>
    <div class="test1">
        1rem === 100px
        <img src="img.jpg" alt="">
    </div>
    <div class="test2">
        2rem == 200px
        <img src="img.jpg" alt="">
    </div>
    <div class="test3">
        3rem == 300px
        <img src="img.jpg" alt="">
    </div>
    <div class="test4">
        4rem == 400px
        <img src="img.jpg" alt="">
    </div>
</body>

</html>

css樣式

div {
    margin: 0.133333rem 0;
}

img {
    width: 100%;
}

.test1 {
    border: 0.013333rem solid red;
    width: 1.333333rem;
}

.test2 {
    border: 0.013333rem solid red;
    width: 2.666667rem;
}

.test3 {
    border: 0.013333rem solid red;
    width: 4.0rem;
}

.test4 {
    border: 0.013333rem solid red;
    width: 5.333333rem;
}

.test5 {
    border: 0.013333rem solid red;
    width: 6.666667rem;
}

效果展現app

iphone6less

iphone6 Pluswebapp

Galaxy Note3

以上是三種設備下面的效果圖；
爲了測試結果是真跟效果圖尺寸同樣；特此，我在ps中比對了（將其餘的尺寸的手機等比例放大縮小到iphone6 plus 的尺寸）一下，以下；

總結：

將方案js加入項目中，
全部的尺寸用成rem來替換；
rem替換快捷方法
- sublime 的插件
  - 安裝步驟
    - 下載本項目，
    - 進入packages目錄：Sublime Text -> Preferences -> Browse 打開packges目錄
    - 複製下載的cssrem目錄到packges目錄裏。
    - 重啓Sublime Text。
    - 進入sublime Preferences -> packge settings -> cssrem -> setting-default 複製
    - 進入 setting-user 將複製的文本粘貼到裏面(由於webapp通常尺寸設計按照iphone6 (750px) 來設計，因此，將"px_to_rem" 值改成 75 )修改以下

{
    "px_to_rem": 75,
    "max_rem_fraction_length": 6,
    "available_file_types": [".css", ".less", ".sass"]
}

方案用法

好比 ui 給的一張 750 x 1334 的效果圖（貼心的ui會直接標記尺寸大小，好喜歡有沒有）
沒有尺寸就本身量嘍；有一張圖片100px x 100px ；由於有 cssrem 插件因此直接按照真是的px寬度來寫，插件會本身編譯計算出750px寬度對應的rem尺寸；

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。