『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 介 ...
随机推荐
- ios5--计算器
// // ViewController.m // 01-加法计算器 // // 首先找main.m文件,然后找AppDelegate,然后找Main Inteferce主交互故事板,然后加载箭头指向 ...
- oc81--copy内存管理
// // main.m // Copy内存管理(MRC才有内存管理) // #import <Foundation/Foundation.h> int main(int argc, co ...
- 51nod 1406 与查询
垃圾选手练dp 考虑对于一个数,能够把它表示出来也一定可以把它某些1的位变成0变成的数表示出来 那么用大的数更新小的,容易想到每次都把这个大的数的1个1的位变成0 但是这样还是会有重复的情况 比如10 ...
- ubuntu安装phpstorm
首先要安装jdk $ java -version java version "1.8.0_171" Java(TM) SE Runtime Environment (build 1 ...
- 【Codevs1322】单词矩阵
Position: http://codevs.cn/problem/1322/ List Codevs1322 单词矩阵 List Description Input Output Sample I ...
- Mysql的简单使用(一)
如果你会查询这些相关的问题,说明你是一个正在或者准备从事IT的程序猿,对于一个程序猿而言,不会使用linux系统的程序猿不是一好的程序猿哦!因为windows有时候真的让人很抓狂,而本人也相信没有什么 ...
- 吝啬的国度 ---用vector 来构图
根据题目可以看出来 有n 个城市 只有 n-1 条路线 那么 就可以确定这个图中 不存在 圆 所以从一个点到另一个点 只有一条唯一的路 所以从一个节点到另一个节点 那么 这个节点只有一个唯 ...
- JavaScript 计时器
在JavaScript中,我们可以在设定的时间间隔之后来执行代码,而不是在函数被调用后立即执行.计时器类型:一次性计时器:仅在指定的延迟时间之后触发一次.间隔性触发计时器:每隔一定的时间间隔就触发一次 ...
- 6.11---swagger文件上传的写法【照着写就行了,主要是需要声明contentType未mutilpart---如果不设置这个,就无法识别文件的】
MultipartFile 是直接接收前台传过来的文件,File是抽象出来的文件对象,用来表示文件,一般操作都是操作的File,所以需要将MultipartFile转为File controller写 ...
- python框架之Flask基础篇(三)-------- 模版的操作
1.flask特有的变量和函数: 变量:g.session.request.config 函数:url_for().get_flashed_messages()这个函数注意了啊,记住这是个函数,别忘了 ...