移动端开发单位——rem，动态使用

CastlePeaK 发布于2019-08-29 16:24 / 464人阅读

摘要：移动端开发大纲一移动开发和适配特点跑在手机端的页面页面跨平台基于告别拥抱更高的适配和性能要求小技巧在调试窗口中，选中就会显示标签元素的全部样式。

移动端开发-大纲 一、移动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在传入参数中。

idc机房托管服务器托管 rem单位应用的是rem单位移动端开发 web移动端开发

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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邮箱的话要去垃圾箱里才能找到注册邮件)，对于前端圈日新月异的磅礴发展对于大前端发展是喜闻乐见的，这次的快应用的手机厂...

Chaz 2019-08-05 13:21 评论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