【前端开发】移动端适配方案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
前言 移动端适配一直以来都是前端开发中不可或缺的重要组成部分,如果没有了它,那么你做出来的页面极有可能会出现各种意外(写出来的页面与设计稿之间的差别).所有我们得找到一种相对来说让人比较满意的解决方案 ...
随机推荐
- Beta 冲刺 四
团队成员 051601135 岳冠宇 031602629 刘意晗 031602248 郑智文 031602330 苏芳锃 031602234 王淇 照片 项目进展 岳冠宇 昨天的困难 数据交换比较复杂 ...
- Docker HUB 的重要性
1. 昨天晚上和今天早上 学习了下 mysql 的 主从配置(docker化部署) ,但是发现很多 -e 的参数不清楚. 然后在docker HUB 上面发现了具体的内容. 认识到 工作学习生活中 肯 ...
- EntityFramework异常The specified cast from a materialized 'System.Double' type to the 'System.Single' type is not valid.
实体类: public class ReportEntity { public string FactorName { get; set; } public double MaxVal { get; ...
- 前端学习 -- Css -- 文本标签
em和strong - 这两个标签都表示一个强调的内容, em主要表示语气上的强调,em在浏览器中默认使用斜体显示 strong表示强调的内容,比em更强烈,默认使用粗体显示 <!DOCTYPE ...
- eclipse java build path问题汇总
背景:在项目开发过程中,很多应用都进行了模块划分,有的时候是jar包依赖,有的时候通过build path进行配置,搞清楚这部分有助于理解项目之间的关系. 1 tms项目开发 1.1 问题描述 项目结 ...
- ELKStack-生产案例项目实战(十一)
ELKStack-生产案例项目实战 1.收集ES和apache日志,入redis input { file { path => "/etc/httpd/logs/access_log& ...
- 鸟哥的Linux私房菜——第十一章
视频链接: 土豆:http://www.tudou.com/programs/view/yT0PfIWU720 B站(推荐): http://www.bilibili.com/video/av9877 ...
- 转:iOS-生成Bundle包-引入bundle-使用bundle
在我们使用第三方框架时,常常看到XXX.bundle的文件. 我们找到该文件,显示包内容,大致看到很多资源文件:图片.配置文本.XIB文件…… 什么是Bundle文件? 简单理解,就是资源文件包. ...
- A Brief Overview of Deep Learning
A Brief Overview of Deep Learning (This is a guest post by Ilya Sutskever on the intuition behind de ...
- ActiveMQ Transport Connectors
一,介绍 ActiveMQ的Transport Connectors 是什么? ActiveMQ是一个消息服务器.作为消息服务器,就会有生产者和消费者来使用它.生产者将消息发送给ActiveMQ,消费 ...