移動端開發單位——rem，動態使用

CastlePeaK 發布于2019-08-29 16:24 / 604人閱讀

摘要：移動端開發大綱一移動開發和適配特點跑在手機端的頁面頁面跨平臺基于告別擁抱更高的適配和性能要求小技巧在調試窗口中，選中就會顯示標簽元素的全部樣式。

移動端開發-大綱 一、移動web開發和適配 1、特點：

跑在手機端的web頁面（H5頁面）、 跨平臺、基于webview、告別IE擁抱webkit、更高的適配和性能要求

小技巧：在調試窗口中，選中“computed -> Show all”,就會顯示標簽元素的全部樣式。

2、常見的移動web適配方法：

定高，寬度百分比

flex布局 <響應式布局>

Media Query(媒體查詢) <響應式布局>

(1)、Media Query（媒體查詢）

    
    @media 媒體類型 and (媒體特性){
        /*css樣式*/
    }   

    //媒體類型：screen , print....
    //媒體特性：max-width , max-height....

（2）、js配置跟頁面字體大小

//在index.html中配置根元素字體大小

二、移動端實戰 1、通過sass語法中function函數自動將px轉為rem

//a.scss文件
//以iPhone6屏幕尺寸為例，轉化得到的1rem = 37.5px;
@function rem2px($px) {
  $rem: 37.5px;
  @return ($px / $rem) + rem;
}
.a {
  font-size: rem2px(37.5px);
}

//轉化為a.css文件如下：
.a {
  font-size: 1rem; 
  }

前提：安裝node-sass來編譯scss文件為css文件。

2、實戰DEMO【移動端使用此方法即可】

（1）、生成項目

    npm init

項目結構：

（2）、根據package.json文件，安裝如下包：

（3）、根目錄下增加webpack.conf.js文件：

var webpack = require("webpack");
var path = require("path");
module.exports = {
  entry: "./app.js",
  output: {
    path: path.resolve(__dirname, "./build"),
    filename: "bundle.js"
  },
  module: {
    rules: [
      {
        test: /.scss$/,
        use: ["style-loader", "css-loader", "sass-loader"]
      },
      {
        test: /.(png|jpg)$/,
        use: [
          {
            loader: "url-loader",
            options: {
              limit: 1024
            }
          }
        ]
      }
    ]
  }
};

（4）、根目錄下增加app.js

require("./index.scss");
//動態配置根元素的font-size數值
let htmlWidth =
  document.documentElement.clientWidth || document.body.clientWidth;
let htmlDom = document.getElementsByTagName("html")[0];
htmlDom.style.fontSize = htmlWidth / 10 + "px";
console.log(htmlDom.style.fontSize);

（5）、index.scss文件中修改樣式

//使用sass的function函數自動轉換px為rem
//`這里以iPhone6的UI尺寸配置`
@function px2rem($px) {
  $rem: 37.5px;
  @return ($px / $rem) + rem;
}

.header {
  //根據UI圖將標識高度值直接傳入參數即可
  height: px2rem(40px);   
  }

注意：一般設計師給我們的UI圖中的標識高度是放大一倍的值，所以需要使用 “ height: px2rem(80px/2)”，將高度值除以2在傳入參數中。

云服務器 GPU云服務器 rem單位應用的是rem單位移動端開發 web移動端開發

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/113726.html

我對移動端適配的了解

摘要：隨著移動端的發展，在手機上看電腦端的頁面已成為非常普及現象。方案一固定高度，使其寬度自適應這也是我接觸移動端適配第一次使用的方案。不知不覺做前端已經兩年了，從PC端，移動端，微信小程序一路走來到今天剛剛開放注冊的快應用(手機廠商對抗小程序的新技能,所以在注冊時用的是qq郵箱的話要去垃圾箱里才能找到注冊郵件)，對于前端圈日新月異的磅礴發展對于大前端發展是喜聞樂見的，這次的快應用的手機廠...

import. 2019-08-30 14:16 評論0 收藏0
我對移動端適配的了解

摘要：隨著移動端的發展，在手機上看電腦端的頁面已成為非常普及現象。方案一固定高度，使其寬度自適應這也是我接觸移動端適配第一次使用的方案。不知不覺做前端已經兩年了，從PC端，移動端，微信小程序一路走來到今天剛剛開放注冊的快應用(手機廠商對抗小程序的新技能,所以在注冊時用的是qq郵箱的話要去垃圾箱里才能找到注冊郵件)，對于前端圈日新月異的磅礴發展對于大前端發展是喜聞樂見的，這次的快應用的手機廠...

snowLu 2019-08-22 15:45 評論0 收藏0
我對移動端適配的了解

摘要：隨著移動端的發展，在手機上看電腦端的頁面已成為非常普及現象。方案一固定高度，使其寬度自適應這也是我接觸移動端適配第一次使用的方案。不知不覺做前端已經兩年了，從PC端，移動端，微信小程序一路走來到今天剛剛開放注冊的快應用(手機廠商對抗小程序的新技能,所以在注冊時用的是qq郵箱的話要去垃圾箱里才能找到注冊郵件)，對于前端圈日新月異的磅礴發展對于大前端發展是喜聞樂見的，這次的快應用的手機廠...

XGBCCC 2019-08-02 10:03 評論0 收藏0
移動端響應式

摘要：一些基礎請看這篇的一篇真正教會你開發移動端頁面的文章二這段代碼是讓布局視口的尺寸等于理想視口。響應式工作大，維護性難縮放天貓，使用布局，字體單位用淘寶，使用庫，是他們自己的一個庫，思想就是根據去動態設置，元素寬高都用。 0.一些基礎請看這篇：HcySunYang的blog：一篇真正教會你開發移動端頁面的文章(二)width=device-width 這段代碼是讓布局視口的尺寸等于理想...

huayeluoliuhen 2019-08-29 12:42 評論0 收藏0