(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. MySQL用户、库、表(单/多)操作

    用户及权限操作: 管理员登录:mysql -uroot -p 用户设置密码:set password=password(密码); 查看数据库所有用户:select * from mysql.user; ...

  2. 2.6 Golang命令

    在命令行执行go命令查看相关的Go语言命令: Go is a tool for managing Go source code. Usage: go command [arguments] The c ...

  3. java排查故障

    java排查故障top -Hp 31327 #或top -p 31327,再按shift+h,-H则是线程开关,传入该参数的话,top界面会显示所有单独的线程列表) ##31327为java进程,拿到 ...

  4. mysql小白系列_03 体系结构-线程池

    thread pool的原理是什么? 为什么用double write就能解决page坏的问题? Innodb redo log 与 binlog有什么区别?有了Innodb redo log为什么还 ...

  5. Solr-常见问题汇总(持续更新)

    本文主要记录solr使用中遇到的一些常见问题及命令 关于solrConfig.xml的配置博客:https://blog.csdn.net/yuh_LLllccy/article/details/88 ...

  6. Python之字符串中是否包含子串的几种方法

    #第一种方式 :in a='abcdaac' b='a' c='db' print(b in a) print(c in a)  预览结果 #第二种方式:count()方法 a='abcdefgab' ...

  7. Java-main方法中调用非static方法

    java的calss中,在public static void main(String[] args) { }方法中调用非static的方法:在main方法中创建该calss的对象,用对象调用非sta ...

  8. CSS3和HTML5头部定位自用

    body{ max-width: 540px; min-width: 320px; margin: 0 auto; font: normal 14px/1.5 tahoma; color: #000; ...

  9. AdaBoost理解

    AdaBoost是一种准确性很高的分类算法,它的原理是把K个弱分类器(弱分类器的意思是该分类器的准确性较低),通过一定的组合(一般是线性加权进行组合),组合成一个强的分类器,提高分类的准确性. 因此, ...

  10. C#线程 入门

    Threading in C#   第一部分: 入门 介绍和概念 C#支持通过多线程并行执行代码.线程是一个独立的执行路径,能够与其他线程同时运行.C#客户端程序(控制台,WPF或Windows窗体) ...