『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 介 ...
随机推荐
- js 得到 radiobuttonlist和CheckBoxList 选中值
js 得到 radiobuttonlist和CheckBoxList 选中值 得到radiobuttonlist 选中值:var CheckBoxList=document.all.optButton ...
- 读取Excel文件到DataTable中
private static string[] GetExcelSheetNames(OleDbConnection conn) { DataTable dtbSh ...
- bzoj4756
http://www.lydsy.com/JudgeOnline/problem.php?id=4756 水题一枚...但是我写了一个小时...手贱打反查不出来... 就是每次线段树合并,先把自己的儿 ...
- 利用【监听器】动态加载Log4j配置文件
转自:https://veromca273.iteye.com/blog/1889304 1 创建监听器: public class LogListener implements ServletCon ...
- 51. ExtJs4之Ext.util.JSON编码和解码JSON对象
转自:https://blog.csdn.net/iteye_9439/article/details/82518158 1.decode() 该方法用于将符合JSON格式的String进行解码成为一 ...
- jeesite ckeditor数据库 HTML 被编码 的问题解决
public abstract class BaseController { /** * 初始化数据绑定 * 1. 将所有传递进来的String进行HTML编码,防止XSS攻击 * 2. 将字段中Da ...
- SceneView 追踪选择目标
在编辑器的Scene视图中追踪选择目标,调试动作用 SceneView这个类没有说明文档比较蛋疼 在update中调用SceneViewCameraFace2Target函数,编辑器的OnInspec ...
- P4407 [JSOI2009]电子字典
传送门 我的哈希打挂了--然而大佬似乎用哈希可以过还跑得很快-- 删除,枚举删哪个字符,记删之后的哈希值存map 插入,相当于在单词里删字符,去对应的map里查找 更改,相当于两个都删掉同一个位置的字 ...
- P3194 [HNOI2008]水平可见直线
传送门 我们把所有的直线按斜率从小到大排序,然后用单调栈维护 发现,如果当前直线与\(st[top-1]\)直线的交点的横坐标大于等于与\(st[top]\)的交点的横坐标,当前直线可以覆盖掉\(st ...
- linux 怎么在后台添加运行脚本,即使关机也可以用
nohup ma.php >guangxindai.log 2>&1 & 或者 nohup ma.php & 在shell中,文件描述符通常是:STDIN标准输入, ...