比如：目前我手中有一张psd图，大小为640*1010，适配苹果5的手机。

方法步骤：

1.我采用font-size=10px为640*1010手机的初始像素大小；  1rem=10px；

此时psd上有一个文字的大小为20px，即当前我的字体大小用rem表示为：font-size:1rem  （psd上的大小为html上大小的2倍，so首先要除以2才能得到正确的px,之后换算rem再次除以2就ok了）

适配各种手机的rem单位：

2.获取我当前使用手机的width:   var windowWidth=$(this).innerWidth();

3.比例换算获取当前使用手机的px:   windowWidth/M= 320/10  ========= (此时得到M值)

4.将上部得到的x值赋值到当前使用手机页面的html标签里：    <html style="font-size:Mpx">

补充：在页面加载的时候，用的rem单位，我遇到了页面先放大再缩小为正常的尺寸的事故。这种页面打开用户的体验效果大打折扣。

所以我想到了一个简单的解决方法：

先隐藏页面的显示，先判断页面是否加载完成，完成后才显示代码

js动态适配移动端font-size,单位：rem的更多相关文章

  1. js动态计算移动端rem适配问题

    第一:css3的media query来实现适配,例如下面这样: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 2 ...

  2. JS动态计算移动端rem的解决方案

    首先介绍下rem 说起rem就的说px,em: PX为单位 在Web页面初期制作中,我们都是使用“px”来设置我们的文本,因为他比较稳定和精确.但是这种方法存在一个问题,当用户在浏览器中浏览我们制作的 ...

  3. js动态计算移动端rem

    在做移动端web app的时候,众所周知,移动设备分辨率五花八门,虽然我们可以通过CSS3的media query来实现适配,例如下面这样: html { font-size : 20px; } @m ...

  4. 【 js 片段 】移动端适配简易步骤

    手机端全部适配简易步骤,不确保没有bug. 1.HTML 的 head 部分中加入如下代码: <meta name="viewport" content="widt ...

  5. 本周汇总 动态rem适配移动端/块状元素居中/透明度

    1.动态rem适配移动端 !function(){ var width = document.documentElement.clientWidth; var head=document.getEle ...

  6. 移动端适配单位rem

    0 写在前面 本周惊喜地发现,其他各个老师的软工班(罗杰老师班和欧阳老师班)的软工项目的alpha版本都已经发布了!(然而我们软工项目还没开始写代码…逃…) 十分好奇的我第一时间下载了一些他们的产品进 ...

  7. React.js 入门与实战之开发适配PC端及移动端新闻头条平台课程上线了

    原文发表于我的技术博客 我在慕课网的「React.js 入门与实战之开发适配PC端及移动端新闻头条平台」课程已经上线了,文章中是目前整个课程的大纲,以后此课程还会保持持续更新,此大纲文档也会保持更新, ...

  8. 使用手淘flexible.js适配移动端布局

    下载flexible: https://github.com/amfe/lib-flexible //未压缩版 (function flexible (window, document) { var ...

  9. 单位rem 触屏适配总结

    总结过的:定宽320 缩放适配手机屏幕 参考文章:web app变革之rem 先了解一下rem css3 中引入了新的长度单位,rem. 官方定义 font size of the root elem ...

随机推荐

  1. 利用python进行数据分析1_numpy的基本操作，建模基础

    import numpy as np # 生成指定维度的随机多维数据 data=np.random.rand(2,3) print(data) print(type(data)) 结果: [[0.11 ...

  2. 题解 P5082 【成绩】

    随机跳题跳到了这一题,一看是个红题,本蒟蒻就 艰难地思考起来 高兴地写起来 这题实在不能用数组,用了数组就RE 一开始就卡在这上面了 说实话,这道题真的 很难 不算很难,只要照着公式往上面套就行了 废 ...

  3. 解决IIS7多域名绑定同一物理目录，设置不同的默认文档的问题

    IIS7多域名绑定同一物理目录,设置不同的默认文档是没办法设置的,因为在一个物理目录下只有一个web.config,并且IIS7把默认文档设置写在这里,导致所有域名的默认文档设置共享.解决方法:1.进 ...

  4. 快速幂&&矩阵快速幂

    快速幂 题目链接:https://www.luogu.org/problemnew/show/P1226 快速幂用了二分的思想,即将\(a^{b}\)的指数b不断分解成二进制的形式,然后相乘累加起来, ...

  5. Mac 录制视频，并转为GIF格式

    内容中包含 base64string 图片造成字符过多,拒绝显示

  6. js的工厂模式

    工厂模式: 什么叫工厂模式,工厂就是大家大脑里想的那样,一个流水线作业的一个东西,只需要满足刚需就可以了,一个人,只干一件事,最后串起来,就是一个事件. 首先需要说一下工厂模式.工厂模式根据抽象程度的 ...

  7. vue父子传值的具体应用

    最近我负责的项目已经迭代到第四版了,我作为一个没啥经验的小菜鸟也成长了很多. 在这一版开发开始之前,我老大就要求我在开发过程中尽量实现组件化,因此,我也遇到了很多问题,但基本都解决了,所以趁周末把这些 ...

  8. Bzoj 2752 高速公路 (期望,线段树)

    Bzoj 2752 高速公路 (期望,线段树) 题目链接 这道题显然求边,因为题目是一条链,所以直接采用把边编上号.看成序列即可 \(1\)与\(2\)号点的边连得是. 编号为\(1\)的点.查询的时 ...

  9. SQL 牛刀小试 1 —— 查询操作

    #创建数据库create database ST CHARACTER set utf8;#创建用户create user ST identified by '19980510';#授权用户操作该数据库 ...

  10. opencast的docker安装

    在之前的从源安装和从包安装opencast,都遇到较多环境问题导致失败.所有采用docker安装. Dockers是有能力打包应用程序及其虚拟容器,可以在任何Linux服务器上运行的依赖性工具,这有助 ...