『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 介 ...
随机推荐
- 【POJ 3263】 Tallest Cow
[题目链接] http://poj.org/problem?id=3263 [算法] 若A和B两头牛可以互相看见,那么说明中间的牛的高度都至少比它们少1,因此,我们可以引入一个差分数组c 对于每组关系 ...
- javamail - 协议SMTP\IMAP\POP3设置
资料来自:https://www.tutorialspoint.com/javamail_api/index.htm [SMTP - Simple Mail Transfer Protocol] Na ...
- THE DRUNK JAILER
http://poj.org/problem?id=1218 题意:门的状态有两种开或关,初始化为开,每次进行状态转换,第一次把门号是1的倍数的门状态转换,第二次把门号是2的倍数的门状态转换,.... ...
- 开源矿工README
点击加入 NTMiner官方QQ群: 863725136 开源矿工内置的所有内核均为原版,开源矿工永远不会额外增加矿工支出: 开源矿工永远开源: 开源矿工永远不会去破解国人开发的内核: 下载地址 阿里 ...
- OpenResty / Nginx模块,Lua库和相关资源的列表
OpenResty / Nginx模块,Lua库和相关资源的列表 什么是OpenResty OpenResty是一个成熟的网络平台,它集成了标准的Nginx核心,LuaJIT,许多精心编写的Lua库, ...
- ACM_滚动AC
滚动AC Time Limit: 2000/1000ms (Java/Others) Problem Description: 小光最近拉了几个同学入ACM的坑,为鼓励A题,就增加奖励制度:每AC三道 ...
- 把datagrid转换成gridview
public gridview datagrid2gridview(datagrid dg) { gridview gv = new gridview(); foreach(var p in dg.c ...
- VS插件-Resharper
最近代码因为Resharper出现了点问题,同事问我这个插件有什么用,下面就列几个最近常用的功能.其他功能后续慢慢更新 1.什么是Resharper ReSharper是一个JetBrains公司出品 ...
- 【转】Centos7 ftp 配置及报错处理
原文链接: https://www.cnblogs.com/GaZeon/p/5393853.html Centos7网络配置,vsftpd安装及530报错解决 今天在虚拟机安装CentOS7,准备全 ...
- android学习之路资料集合
版权声明:本文为 stormzhang 原创文章,可以随意转载,但必须在明确位置注明出处!!! 这篇博客背后的故事 一路走来很不容易,刚好知乎上被人邀请回答如何自学android编程, 就借这个机会在 ...