/**
* 移动端自适应
*/
<meta name="viewport"
content="width=device-width,user-scalable=no,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
// <!--content-->
// <!--width=device-width 可视区域的宽度,值可为数字或关键词device-width-->
// <!--height=device-height 可视区域的高度,值可为数字或关键词device-height-->
// <!--user-scalable=yes/no 是否可对页面进行缩放,no 禁止缩放-->
// <!--initial-scale=1.0 页面首次被显示是可视区域的缩放级别,取值1.0则页面按实际尺寸显示,无任何缩放-->
// <!--minimum-scale=1.0 可视区域的缩小级别-->
// <!--maximum-scale=1.0 可视区域的放大级别-->
 /**
* rem适配 iPhone5下html字号为100px,320px下1rem=100px
*/
(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
docEl.style.fontSize = 100 * (clientWidth / 320) + 'px';
}; // Abort if browser does not support addEventListener
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);

H5移动端rem适配的更多相关文章

  1. H5 端 rem 适配方案与 viewport 适配

    H5 端 rem 适配方案与 viewport 适配 rem rem 是 CSS3 新增的一个相对单位(root em,根 em) 只根据当前页面 HTML 页面的 font-size 设置,如果根目 ...

  2. 谈谈我的移动端rem适配方案

    最近有点怀疑人生,毕竟一个人写前端,有时候会怀疑自己理解的一些东西包括用法有没有符合标准.趁着这阵子闲下来,翻了翻别人的rem适配博客,发现有点绕口,怪自己是个强迫症,啥都要自己去试试结果并从中理解, ...

  3. 07. 如何实现移动端rem适配

    如何实现移动端rem适配 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...

  4. 移动端rem适配&iOS兼容

    移动端rem适配js // 默认375,750设计稿请将375替换为750 (function (doc, win) { // 移动端适配 var docEl = doc.documentElemen ...

  5. 关于移动端rem适配

    var num = 1 / window.devicePixelRatio; var fontSize = document.documentElement.clientWidth / 10; doc ...

  6. 移动端rem适配屏幕

    九月已成历史,十月如期而至...可能是九月工作比较清闲,周记就没怎么写,十月决不能这么堕落,立贴为证,至少保证5篇博客!!!如果没学到什么新知识,就对以往的那些工作中常用到的知识点做个总结...话不多 ...

  7. 自动改变html font-size,实现移动端rem适配

    移动端采用rem适配非常方便 比如在iphone6尺寸下,将html font-size 设置为 100px,那么写css时,只要将尺寸/100 + rem 即可. 在iphone6Plus尺寸下,h ...

  8. js动态计算移动端rem适配问题

    第一:css3的media query来实现适配,例如下面这样: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 2 ...

  9. 移动端 rem适配方法

    rem适配 一, 网易适配方法         屏幕宽度/设计稿rem宽度=页面动态font-size值(如:375/7.5=50)         document.documentElement. ...

随机推荐

  1. windows运维如何批量远程桌面

    作用:windows下批量管理远程桌面, http://www.appmazing.com/ 官方站点  http://www.appmazing.com/files/RDO_Setup.exe wi ...

  2. 从协议入手,剖析OAuth2.0(译 RFC 6749)

    1.介绍      https://tools.ietf.org/html/rfc6749  传统的client-server授权模型,客户端通过使用凭证(通常的用户名和明文密码)访问服务端受保护的资 ...

  3. 像屎一样的 Spring Boot入门,总算有反应了

    我特么最烦的就是现在Java不知道抽什么风,喜欢用maven这种,怎么搞都会有错误提示的玩意.搞个spring boot,官方的所谓http://start.spring.io/生成的项目启动不了. ...

  4. SQL Server 创建服务器和数据库级别审计

    一.概述 在上一篇文章中已经介绍了审计的概念:本篇文章主要介绍如何创建审计,以及该收集哪些审核规范. 二.常用的审核对象 2.1.服务器审核对象 1.FAILED_LOGIN_GROUP( Audit ...

  5. Python微信公众号开发—小白篇

    本文面向想通过Python学习公众号开发的同学.一站式解决新手开发微信公众号遇到的所有问题. 为了防止我的文章被到处转载,贴一下我的公众号[智能制造专栏],欢迎大家关注. github仓库地址http ...

  6. [Swift]LeetCode775. 全局倒置与局部倒置 | Global and Local Inversions

    We have some permutation Aof [0, 1, ..., N - 1], where N is the length of A. The number of (global) ...

  7. [Swift]LeetCode855. 考场就座 | Exam Room

    In an exam room, there are N seats in a single row, numbered 0, 1, 2, ..., N-1. When a student enter ...

  8. Hystrix概念设计

    1. Hystrix概念设计 1.1. 大纲 1.2. 基本的容错模式 1.3. 断路器模式 1.4. 舱壁隔离模式 1.5. 容错理念 凡事依赖都可能失败 凡事资源都有限制 网络并不可靠 延迟是应用 ...

  9. vue项目安装vux

    本文章默认基于“vue init webpack myproject”已经搭好基本的项目, 而且本文是从我有道笔记拷贝稍加修改过来的 本来我私人笔记写给自己看的所以有些地方可能描述不够清晰 需要修改的 ...

  10. windows服务器解决挖矿程序问题

    前几天发现服务器报警,cpu使用率已达100%,查资料知道正是最近比较流行的挖矿程序在捣鬼.我们使用的是阿里云的服务器,操作系统是windows server.网上有大量的资料讲如何处理,我把自己处理 ...