『REM』手机屏幕适配
function adapt(designWidth, rem2px){
var d = window.document.createElement('div');
d.style.width = '1rem';
d.style.display = "none";
var head = window.document.getElementsByTagName('head')[0];
head.appendChild(d);
var defaultFontSize = parseFloat(window.getComputedStyle(d, null).getPropertyValue('width'));
d.remove();
document.documentElement.style.fontSize = window.innerWidth / designWidth * rem2px / defaultFontSize * 100 + '%';
var st = document.createElement('style');
var portrait = "@media screen and (min-width: "+window.innerWidth+"px) {html{font-size:"+((window.innerWidth/(designWidth/rem2px)/defaultFontSize)*100) +"%;}}";
var landscape = "@media screen and (min-width: "+window.innerHeight+"px) {html{font-size:"+((window.innerHeight/(designWidth/rem2px)/defaultFontSize)*100) +"%;}}"
st.innerHTML = portrait + landscape;
head.appendChild(st);
return defaultFontSize
};
var defaultFontSize = adapt(640, 100);
转载地址:http://mp.weixin.qq.com/s/JIRN56acxvJgmzk1Fjj6LA
『REM』手机屏幕适配的更多相关文章
- 了解真实的『REM』手机屏幕适配
rem 作为一个低调的长度单位,由于手机端网页的兴起,在屏幕适配中得到重用.使用 rem 前端开发者可以很方便的在各种屏幕尺寸下,通过等比缩放的方式达到设计图要求的效果. rem 的官方定义『The ...
- 真实的『REM』手机屏幕适配
rem 作为一个低调的长度单位,由于手机端网页的兴起,在屏幕适配中得到重用.使用 rem 前端开发者可以很方便的在各种屏幕尺寸下,通过等比缩放的方式达到设计图要求的效果. rem 的官方定义『The ...
- 了解真实的『REM』多终端屏幕适配
作者:hbxeagle 链接:github.com/hbxeagle/rem/blob/master/README.md rem 作为一个低调的长度单位,由于手机端网页的兴起,在屏幕适配中得到重用.使 ...
- 了解真实的rem手机屏幕适配
rem 作为一个低调的长度单位,由于手机端网页的兴起,在屏幕适配中得到重用.使用 rem 前端开发者可以很方便的在各种屏幕尺寸下,通过等比缩放的方式达到设计图要求的效果. rem 的官方定义『The ...
- web app变革之rem(手机屏幕实现全适配)
以往web移动适配,常规写法是:media only screen @media only screen and (min-device-width: 320px){ //针对iPhone 3 } @ ...
- Android开发——Android手机屏幕适配方案总结
)密度无关像素,单位为dp,是Android特有的单位 Android开发时通常使用dp而不是px单位设置图片大小,因为它可以保证在不同屏幕像素密度的设备上显示相同的效果. /** * dp与px的转 ...
- Unity 手机屏幕适配
////如有侵权 请联系我进行删除 email:YZFHKM@163.com 1.游戏屏幕适配 屏幕适配是为了让我们的项目能够跑在各种电子设备上(手机,平板,电脑) 那么了解是适配之前首先要了解两个知 ...
- CSS3自适配手机屏幕
@media only screen and (max-width:350px){ .img{ width: 80px; height:70px; background-image: url(./im ...
- 移动 web 端屏幕适配 - rem
前言 最近整理了一下以前学习前端的笔记,发现自己对移动 web 端屏幕适配(rem)这一块并没有真正理解,只是会用.接下来,把自己的一些对移动 web 端屏幕适配(rem)的思考记录下来. rem 介 ...
随机推荐
- android5.1 Recovery添加从U盘升级功能【转】
本文转载自:http://blog.csdn.net/tfslovexizi/article/details/73835594 之前看到过一个人写了4.4上添加U盘升级功能的博客http://blog ...
- 手把手教你把Vim改装成一个IDE编程环境(图文)【转】
本文转载自: http://blog.csdn.net/wooin/article/details/1858917
- 软-RAID 5组建
图文版raid5组建之软RAID [复制链接] 发表于 2007-3-6 09:19 | 来自 51CTO网页 [只看他] 楼主 硬件raid5的组建和使用,基本上说完 ...
- jsp ajax 数据库Demo
转自:http://blog.csdn.net/rushkid02/article/details/7515058 下面介绍JSP前台表单内容通过Ajax异步提交到后台Servlet进行校验(校验方式 ...
- Makefile 实际用例分析(一) ------- 比较通用的一种架构
这里不再说Makefile的基本知识,如果需要学习,那么请参考: 下载:makefile 中文手册 或者 点击打开链接 或者 跟我一起写Makefile( 陈皓 ) 这里说的是一般的实际的一个工程应该 ...
- XMLHttpRequest 对象-回调函数
回调函数是一种以参数形式传递给另一个函数的函数. 如果您的网站上存在多个 AJAX 任务,那么您应该为创建 XMLHttpRequest 对象编写一个标准的函数,并为每个 AJAX 任务调用该函数. ...
- PCB 自动发送邮件---加入表格实现方法
先看一下手动发送邮件内容加入表格操作(下图所示),直接复制Excel内容,再粘贴到邮件内容中,就是这么便捷,如果我们想自动发送邮件,也实现同样的效果如果实现呢,在这里介绍2种方法: 一.读取Excel ...
- Text段、Data段和BSS段
不同的compiler在编译的过程中对于存储的分配可能略有不同,但基本结构大致相同. 大体上可分为三段:Text段.Data段和BSS段. text段用于存放代码,通常情况下在内存中被映射为只读,但d ...
- P3291 [SCOI2016]妖怪
传送门 我数学的确白学了--这种题目竟然一点思路都没有-- 首先可以把每个妖怪看成二维平面上的一个点,那么每一个环境\((a,b)\)就可以看成一条斜率\(k=-\frac{b}{a}\)的过该点的直 ...
- Git 迁库 标签
Git迁库 (一)克隆裸库 git clone --bare https://github.com/SunArmy/Tourist.git 克隆之后进入该目录下是这样的 (二)创建新的版本库 这里我已 ...