【前端开发】移动端适配方案js,rem单位转换,640设计稿20px=1rem
! function() {
var style = document.createElement("STYLE"),
docEl = document.documentElement,
header = document.getElementsByTagName("HEAD")[0],
viewport = document.createElement("meta"),
dpr = 0,
isAndroid = navigator.appVersion.match(/android/gi),
isIPhone = navigator.appVersion.match(/iphone/gi),
baseDpr = "devicePixelRatio" in window ? devicePixelRatio : 1,
dpr = baseDpr;
dpr = isIPhone ? devicePixelRatio >= 3 && (!dpr || dpr >= 3) ? 1 : devicePixelRatio >= 2 && (!dpr || dpr >= 2) ? 1 : 1 : 1, scale = 1 / dpr, docEl.setAttribute("data-dpr", dpr), docEl.setAttribute("data-device-type", isIPhone ? "iphone" : isAndroid ? "android" : "other"), viewport.name = "viewport", viewport.content = "initial-scale=" + scale + ", maximum-scale=" + scale + ", minimum-scale=" + scale + ", user-scalable=no", header.appendChild(viewport);
var width = document.documentElement.clientWidth,
height = document.documentElement.clientHeight;
isIPhone || screen.availWidth == width || (width = screen.availWidth / baseDpr, height = screen.availHeight / baseDpr);
var portrait = Math.min(width, height) / 320 * 10,
landscape = Math.max(width, height) / 568 * 17.75;
if(portrait > 18){
portrait = 18;
}
if(landscape > 18){
landscape = 18;
}
style.innerHTML = "@media screen and (orientation:portrait) { html,body { font-size: " + portrait + "px!important; } }\n@media screen and (orientation:landscape) { html,body { font-size: " + portrait+ "px!important; } }", header.appendChild(style) }();
【前端开发】移动端适配方案js,rem单位转换,640设计稿20px=1rem的更多相关文章
- 移动端适配方案以及rem和px之间的转换
背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿. 对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范 ...
- 移动端适配方案(rem+flex)
为什么用rem不用px? 主流:各大网站的移动版绝大多数都是用的rem. 移动端屏幕分辨率差别太大:最低适配的iPhone6,分辨率仅为750*1334.而现在市面上大多数手机,都达到了1080* ...
- 移动web开发适配方案之Rem
移动端为什么要做适配 移动端相对PC端来说大部分浏览器内核都是基于Webkit的,所以大部分都支持CSS3的最新语法.但是由于手机的屏幕尺寸和分辨率都不太一样(尤其是安卓),所以不得不对不同分辨率的手 ...
- rem移动端适配方案
一. rem vs em 单位 定义 特点 rem font size of the root element 以根元素字体大小为基准 em font size of the element 以父元素 ...
- 【前端适配】vw单位移动端适配方案
近些年移动端的强势崛起,导致移动端适配越来越重要,个人之前一直使用的是rem进行适配,但是发现并不是非常完美,给力的是大漠老师写了一篇<如何在Vue项目中使用vw实现移动端适配>,比较完美 ...
- 移动端适配--flexible.js
引言: H5适配一直是一个比较普遍的问题,很多文章都会讲,最近开发了一个H5的项目使用了一下淘宝的 flexible.js,写一篇文章自己总结一下. 一.背景介绍: Flexible.js是淘宝公开的 ...
- 基于Vue/React项目的移动端适配方案
本文的目标是通过下文介绍的适配方案,使用vue或react开发移动端及H5的时候,不需要再关心移动设备的大小,只需要按照固定设计稿的px值布局,提升开发效率. 下文给出了本人分别使用create-re ...
- H5 APP 页面移动端适配方案
H5 APP 页面移动端适配方案 https://segmentfault.com/a/1190000011586301 https://juejin.im/post/5cbdee71f265da03 ...
- 移动端适配方案 flexible.js
前言 移动端适配一直以来都是前端开发中不可或缺的重要组成部分,如果没有了它,那么你做出来的页面极有可能会出现各种意外(写出来的页面与设计稿之间的差别).所有我们得找到一种相对来说让人比较满意的解决方案 ...
随机推荐
- Java获取当前运行方法所在的类和方法名
很简单,直接看代码: public void showClassAndMethod() { System.out.println(this.getClass().getSimpleName() + & ...
- 一本通1649【例 2】2^k 进制数
1649:[例 2]2^k 进制数 时间限制: 1000 ms 内存限制: 524288 KB [题目描述] 原题来自:NOIP 2006 提高组 设 r 是个 2k 进制数,并满足以 ...
- php 微信公众号上传永久素材
<?php namespace Mob\Controller; use Think\Controller; class WxmaterialController extends Controll ...
- 【转】keil5 missing close quote 错误解决
在使用utf8保存文件的情况下,代码中出现中文字符串会提示missing close quote解决:Options for Target --> C/C++ --> Misc Contr ...
- mybatis异常invalid comparison: java.util.Date and java.lang.String
原文链接:http://blog.csdn.net/wanghailong_qd/article/details/50673144 mybatis异常invalid comparison: java. ...
- jedisClient操作redis实现增删改查功能
这个集群环境下和单机环境下: package com.taotao.sso.dao.impl; import org.springframework.beans.factory.annotation. ...
- Hadoop实战:Hadoop分布式集群部署(一)
一.系统参数优化配置 1.1 系统内核参数优化配置 修改文件/etc/sysctl.conf,使用sysctl -p命令即时生效. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 ...
- Hadoop基础-常见异常剖析之防坑小技巧
Hadoop基础-常见异常剖析之防坑小技巧 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任.
- ORACLE递归查询(适用于ID,PARENTID结构数据表)
Oracle 树操作(select…start with…connect by…prior) oracle树查询的最重要的就是select…start with…connect by…prior语法了 ...
- Win10新增功能快捷键大全
原文地址:http://wenwen.sogou.com/z/q703976788.htm贴靠窗口:Win + 左/右 > Win + 上/下 > 窗口可以变为 1/4 大小放置在屏幕 4 ...