比如：目前我手中有一张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. Qt+事件的接收和忽略

    事件的接收与忽略的示意图如下图: 依据前面的知识,事件是可以依据情况进行接收和忽略的,事件的传播是组件层次上面的,而不是依靠类继承机制.在一个特殊的情形下,我们必须使用accept()和ignore( ...

  2. 在64位的linux中运行32位的应用程序

    常规做法,先添加32bit架构: sudo dpkg --add-architecture i386 sudo apt-get update sudo apt-get install libc6:i3 ...

  3. vue input 判断

    //输入框 判断 //全局异常提示信息 //b 1:失去焦点验证错误提示 2:得到焦点关闭错误提示 //i 来区分是验证那个input框 check:function (t,b) { var that ...

  4. Linux安全调优1：CentOS防火墙的设置与优化

    CentOS防火墙的设置与优化 时间:2014-09-11 02:11来源:blog.csdn.net 作者:成长的小虫 的BLOG 举报 点击:4908次 一.设置主机防火墙. 开放: 服务器的:w ...

  5. noip_最后一遍_1-数学部分

    它就是要来了 noip数论一般会以三种形式呈现 注 码风可能有些毒 (有人说我压行qwq) 大概保持标准三十五行左右 为什么是三十五行呢 因为我喜欢这个数字 我喜欢三十五而已(足球球衣也会用这个号哒) ...

  6. 利用Resttemplate进行put请求

    开发中,最常用的是post.get这两种.今天我给大家展示一个利用put请求的demo,其实put请求跟post请求没啥区别,但是没有返回值. void put(String var1, @Nulla ...

  7. [php扩展] php安装扩展注意事项

    添加扩展的时候注意此3项 用的编译器版本:VC11... 安装的php版本:x86/x64 是否线程安全:enabled / disabled

  8. 学习python的第十天（内置算法：列表数据类型，元祖数据类型，字典数据类型）

    5.8自我总结 1.列表类型内置算法 1.必须掌握 1.按索引取值(正向取值+反向取值),即可存也可以取 #用于取其中一个值 name = ['yang','wen','yi'] ##正方向取wen, ...

  9. initcall机制

    参考:initcall机制 /* include/linux/init.h: */ /* For assembly routines */ #define __HEAD .section " ...

  10. Spring核心技术（十二）——基于Java的容器配置(二)

    使用@Configuration注解 @Configuration注解是一个类级别的注解,表明该对象是用来指定Bean的定义的.@Configuration注解的类通过@Bean注解的方法来声明Bea ...