(function(){
var fontSizeMatchDeviceWidth = function(){
var deviceWidth = document.documentElement.clientWidth || window.screen.width || 320,
devicePixelRatio = window.devicePixelRatio || 1,
fontSize = (Math.ceil(deviceWidth * 16 / 320)),
scale = 1 / devicePixelRatio; // 默认的缩放 document.documentElement.style.fontSize = fontSize + 'px';
document.querySelector('meta[name="viewport"]').setAttribute('content','width=device-width,initial-scale='+'scale'+',maximum-scale='+scale+',minimum-scale='+scale+',user-scalable=no,viewport-fit=cover'); // 增加viewport-fit=cover适配iphone x
}; (function(){
var ua = navigator.userAgent;
if(/android/i.test(ua) || /ipad|itouch|iphone/i.test(ua)|| /tianqi/i.test(ua)){
fontSizeMatchDeviceWidth();
} else { // pc端优雅降级
document.documentElement.style.fontSize = '24px';
}
})();
})();

  

移动端响应式布局,rem动态更新的更多相关文章

  1. 移动端响应式布局+rem+calc()

    1.媒体查询:@media only screen and (max-width: ) {},在最初做pc端时,使用各种媒体查询,因为pc的屏幕分辨率总共就几种,不嫌麻烦的重复使用类名.有很大的缺陷就 ...

  2. 移动端“响应式布局”’--rem

    使用目的:为了让移动设计稿在大部分的移动设备上看起来有一致的展示效果,我们使用rem的像素单位. 方法一: 1.在页面引入js,获取屏幕大小,更新rem基准. (function () { var c ...

  3. 移动端响应式布局--你不知道的CSS3.0媒体查询,解决rem部分情况下无法适配的场景

    媒体查询作为响应式布局的方法之一,实际项目中用途也很广.但是你真的知道怎么用吗? 例如,下面匹配 iphone6/7/8 屏幕 @media screen and (max-width: 375px) ...

  4. 响应式布局rem的使用

    在如今移动端,响应式布局的时代,用rem作为单位已经是非常普及的一门小技巧了..rem的单位根据html的font-size来进行换算! 1.rem的兼容性: 如下图所示IE9以上就支持了rem这个属 ...

  5. 【CSS-移动端响应式布局详解】

    背景 移动端响应式布局开发主要方案有: 基于rem开发 基于媒体查询 基于弹性盒 基础概念 在讨论响应式布局知识前,先了解下移动端常用基础概念. 逻辑像素(CSS pixels) 浏览器使用的抽象单位 ...

  6. 响应式布局rem、rem方法封装、移动端响应式布局

    相信大家在做移动端的时候都会做各个手机的适配这种适配就是响应式布局在之前做网站的响应式从pc到手机用的是媒体查询 @media screen and (max-width: 300px){} 最大宽度 ...

  7. PC 端响应式布局

    前言:PC端 电脑显示器的尺寸种类还是很多的,台式电脑和笔记本电脑尺寸相差就更明显,所以响应式布局还是很重要的,甚至是必须要考虑的. 响应式的页面好不好,在后管平台上很明显.因为后管平台,一般是全屏显 ...

  8. 探讨兼容IE低版本的PC端响应式布局

    http://www.jiangweishan.com/article/lowIeResposive.html 响应式布局,oh my god!!有点醉了,感觉是老生常谈的话题了.虽然已经谈过很多了, ...

  9. 响应式布局-Rem的用法

    前言: 文章较为系统地介绍了rem这个新的文字大小单位,绝对干货,绝对好文.转载时略有改动.   先来看看一些基本理念,比如: 响应式网页不仅仅是响应不同类型的设备,而且需要响应不同的用户需求.响应式 ...

随机推荐

  1. Centos7安装jupyter notebook

    安装python3 查看当前python版本 [root@iz1i4qd6oynml0z /]# python -V Python 2.7.5 安装python3以及检查python3的版本 yum ...

  2. TCP三次握手的seq和ack号的【正确】理解

    1 理论知识 先上一张图,TCP/IP详解第18章的这张图描述了一个正常的三次握手和四次挥手的状态迁移,以及seq.ack序号的变化. 基本状态看图就能了解,本文主要围绕序号的变化进行讲解. 1)se ...

  3. hdu6153KMP

    A Secret Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 256000/256000 K (Java/Others)Total ...

  4. 限制某个顶点度数的最小生成树 poj1639

    Picnic Planning Time Limit: 5000MS   Memory Limit: 10000K Total Submissions: 10642   Accepted: 3862 ...

  5. Java-KTVByLinkedList模拟点歌工具

    import java.util.LinkedList; import java.util.Scanner; public class KTVByLinkedList { public static ...

  6. 解决 appium 当中 uiautomator2 无法启动的问题

    在启动 appium 程序中,有时候会出现 uiautomator2 服务无法启动的错误,appium 的日志截图如下: image.png 错误信息: ActivityManager: Unable ...

  7. 面向对象案例 - 学生信息管理系统V1.0

    学生管理系统项目[所有知识点整合] 1. 学生管理系统项目 尝试完成以下功能 实体类: 学生类: id, 姓名,年龄,性别,成绩 需要使用数组保存学生信息 Student[] allStu 需要完成的 ...

  8. 【Oracle】系统视图USER_TAB_COLS和USER_TAB_COLUMNS

    视图SYS.USER_TAB_COLS和SYS.USER_TAB_COLUMNS都保存了当前用户的表.视图和Clusters中的列信息.通过检索这两个表,可以方便的获取到表的结构. 主要的列属性有:  ...

  9. 化学元素周期表的英文全称 Periodic Table of the Elements

    化学元素周期表的英文全称 Periodic Table of the Elements   缩写 PTE 拉丁文 英文 1 H 氢 Hydrogenium Hydrogen 2 He 氦 Helium ...

  10. eatwhatApp开发实战(十四)

    之前我们就输入框EditText做了优化,而这次,我们为app添加拨打电话的功能. 首先是布局,将activity_shop_info.xml中对应的电话那一栏进行重新设计: <Relative ...