比如：目前我手中有一张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软件

    首先下载:anaconda3.x          下载方式:百度搜索 清华镜像anaconda   https://mirrors.tuna.tsinghua.edu.cn/help/anacond ...

  2. QT5:先导篇 全局定义

    一.简介 <QtGlobal>头文件包含了Qt类库的一些全局定义,包含基本数据类型 函数和宏 二.全局变量定义 <QtGlobal>定义的数据类型: Qt数据类型        ...

  3. shell脚本，计算学生分数的题目。

    1.计算学生平均分数的值是多少? 2.计算每门课都大于80分的学生姓名.3.计算每门课都小于90分的学生姓名.

  4. qemu-img管理虚拟机

    qemu-img管理虚拟机 1. 查看正在运行的虚拟机 [root@idca-vm02 ~]# virsh list Id    名称                         状态 ----- ...

  5. 设置tableview的滚动范围--iOS开发系列---项目中成长的知识三

    设置tableview的滚动范围 有时候tableview的footerview上的内容需要向上拖动界面一定距离才能够看见, 项目中因为我需要在footerviw上添加一个按钮,而这个按钮又因为这个原 ...

  6. 使用Xcode连接开源中国

    故事背景: 今天加入一个新的项目组,其实也就是包括我在内就两个人,由于对方在开源中国上建的项目我没法使用. 所以由我接手第一个任务:就是在开源中国上搭建git项目组 前提条件:xcode和 Git(h ...

  7. lsof指令使用简介

    lsof替代了netstat和ps的全部工作.它可以带来那些工具所能带来的一切,而且要比那些工具多得多 最重要的是,当你给它传递选项时,默认行为是对结果进行“或”运算.因此,如果是用-i来拉出一个端口 ...

  8. docker系列之file基本操作

    dockerfile基础操作 Dockerfile 是记录了镜像是如何被构建出来的配置文件, 可以被 docker 直接执行以创建一个镜像. 它的样子: FROM ubuntu:14.04 MAINT ...

  9. 条款40：明智而审慎地使用多重继承（use multiple inheritance judiciously）

    NOTE: 1.多重继承比单一继承复杂.它可能导致新的歧义性,以及对virtual继承的需要. 2.virtual 继承会增加大小 速度 初始化(及赋值)复杂度等等成本.如果virtual base ...

  10. 【java】抽象类继承关系

    抽象类: 抽象类不能用来实例化对象,声明抽象类的唯一目的是为了将来对该类进行扩充. 一个类不能同时被 abstract 和 final 修饰.如果一个类包含抽象方法,那么该类一定要声明为抽象类,否则将 ...