用Rem来无脑还原Web移动端自适应的页面

(function (win,doc){
    if (!win.addEventListener) return;
    var html=document.documentElement;
    function setFont()
    {var cliWidth=html.clientWidth;
        html.style.fontSize=100*(cliWidth/640)+‘px‘;
    }
    win.addEventListener(‘resize‘,setFont,false)
    doc.addEventListener(‘DOMContentLoaded‘,setFont,false)
})(window,document);
解读:

  首先,不去鸟不支持事件监听的浏览器(IE6、7、8),当然不写也可以,因为对字号的自适应的需求都是移动端。 
  当出现窗口大小改变的时候给window绑定一个监听,运行一个叫setFont的函数;当页面的Dom结构加载完也运行setFont(或者不监听直接setFont()运行也可以。) 
  setFont函数用来获取屏幕分辨率,然后按比例来设置html的字号。
  我这里是以100px为基础来缩放。为什么是100px?待我细细说明: 
我们一般拿到手的设计稿都是640px的,我们不以手机分辨率为考量,如果单纯1:1还原640px的页面,那么我们的页面根目录的字号就是100px(100*(640/640)=100px),那么那么设计稿上选择一个文案,然后PS告诉我们字号是24px,那么我们就在页面里给这段文案设置成0.24rem,那么640px的页面上字体就是24px啦。 
  然后当我们考虑比如页面是5/5s上看,那么当前页面字号就是50px(100*(320/640)=50px),那么0.24rem会以12px的大小展示出来。而640px宽的设计稿上的24px的字体,在320px的页面下,就是以12px显示的~ 
  这就是为什么要以100px为基础字号,这样页面里量的是24px的字体,我代码里写0.24rem就会自动在页面里以12px显示了~而且它可以在6/6p上以13或者14px的样式展示出来~ 
  那你说,我遇到了奇葩的750px为分辨率的设计稿(比如是iphone6的),那你就把公式改成 100*(cliWidth/750)+px就行(也就是设计稿是多宽,公式里就写多少)。然后设计稿里量的Xpx大小,就写多少0.Xrem~什么分辨率的设计稿都不怕啦

tips:

  100px只是为了让我偷懒不用去换算字体大小的,如果喜欢可以自己订1000px,然后写0.012rem这样。但是不要写像10px这样的基础字号,因为有些浏览器有最小字号的限制,比如设置了页面基础字号是10px,但是实际上最小只认11px,那么2rem的字体,本身是希望以20px显示,可能最后是22px显示的。

时间: 2024-11-05 16:24:10

用Rem来无脑还原Web移动端自适应的页面的相关文章

【原】无脑操作:IDEA + maven + Shiro + SpringBoot + JPA + Thymeleaf实现基础认证权限

开发环境搭建参见<[原]无脑操作:IDEA + maven + SpringBoot + JPA + Thymeleaf实现CRUD及分页> 需求: ① 除了登录页面,在地址栏直接访问其他URL,均跳转至登录页面 ② 登录涉及帐号和密码,帐号错误提示帐号错误,密码错误提示密码错误 ③ 登录成功跳转至首页,首页显示登录者帐号信息,并有注销帐号功能,点击注销退出系统 ------------------------------------------------------------------

计蒜客 无脑博士和他的试管们

无脑博士有三个容量分别是A,B,C升的试管,A,B,C分别是三个从1到20的整数,最初,A和B试管都是空的,而C试管是装满硫酸铜溶液的.有时,无脑博士把硫酸铜溶液从一个试管倒到另一个试管中,直到被灌试管装满或原试管空了.当然每一次灌注都是完全的.由于无脑博士天天这么折腾,早已熟练,溶液在倒的过程中不会有丢失. 写一个程序去帮助无脑博士找出当A是个是空的时候,C试管中硫酸铜溶液所剩量的所有可能性. 输入包括一行,为空格分隔开的三个数,分别为整数A,B和C. 输出包括一行,升序地列出当A试管是空的时

VS2013+openCV3.0无脑配置方法+解决警告问题【windows平台】

VS2013+openCV3.0无脑配置方法+解决警告问题[windows平台] 本文介绍如何配置VS+openCV环境,并解决“opencv 3.0 warning C4819: 该文件包含不能在当前代码页(936)中表示的字符.请将该文件保存为 Unicode 格式以防止数据丢失的”警告 参考博客: http://my.phirobot.com/blog/2014-02-opencv_configuration_in_vs.html 下载 openCV 下载 Opencv for Windo

智慧解析第13集:无脑盲从者

智慧解析第13集:无脑盲从者,布布扣,bubuko.com

有个学霸找我这个脑残要这道题的无脑代码——立体图

#include<iostream> #include<cstring> #include<cstdio> using namespace std; int v[52][52]; char s[2001][2001]; int n,m,x,y; void wri(int a,int b) { s[a][b]='+'; s[a+1][b]='-'; s[a+2][b]='-'; s[a+3][b]='-'; s[a+4][b]='+'; s[a][b-1]='|'; s[

CodeForces 909E Coprocessor(无脑拓扑排序)

You are given a program you want to execute as a set of tasks organized in a dependency graph. The dependency graph is a directed acyclic graph: each task can depend on results of one or several other tasks, and there are no directed circular depende

k8s无脑系列(三)-NFS存储(简单版本)

k8s无脑系列(三)-NFS存储(简单版本) 1.概念 搞清楚pv,pvc pv = PersistentVolume 持久化存储控制器,面向集群而不是namespace. pvc = PersistentVolumeClaim 对接pod与pv, 关系,官方说明 A PVC to PV binding is a one-to-one mapping, using a ClaimRef which is a bi-directional binding between the Persisten

实锤,无脑定投指数基金真的可以赚钱么?

投资有风险,入市需谨慎,本文不构成任何投资理财建议,仅做交流学习使用. 不知道大家有没有在网上见过各种理财课程,说什么小白入门最简单的就是定投指数基金,还说人家巴菲特也这么投,这种课程介绍是越写越夸张,后面最夸张说还能打成一个小目标. 过分了啊,如果打成小目标这么简单,那不是中国打成小目标的怎么地也有个百分之十左右了吧,但是我身边好像没见过达成小目标的人啊,难道是因为我太 qiong 的缘故? 还有那种用巴菲特举例子的课程介绍,拜托下次介绍的时候把故事讲完好不好,人家老巴是在美股定投基金,美股是

web移动端资源整(1)

meta基础知识 H5页面窗口自动调整到设备宽度,并禁止用户缩放页面 <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /> 忽略将页面中的数字识别为电话号码 <meta name="format-detection" content=&