移动端响应式布局,rem动态更新
(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动态更新的更多相关文章
- 移动端响应式布局+rem+calc()
1.媒体查询:@media only screen and (max-width: ) {},在最初做pc端时,使用各种媒体查询,因为pc的屏幕分辨率总共就几种,不嫌麻烦的重复使用类名.有很大的缺陷就 ...
- 移动端“响应式布局”’--rem
使用目的:为了让移动设计稿在大部分的移动设备上看起来有一致的展示效果,我们使用rem的像素单位. 方法一: 1.在页面引入js,获取屏幕大小,更新rem基准. (function () { var c ...
- 移动端响应式布局--你不知道的CSS3.0媒体查询,解决rem部分情况下无法适配的场景
媒体查询作为响应式布局的方法之一,实际项目中用途也很广.但是你真的知道怎么用吗? 例如,下面匹配 iphone6/7/8 屏幕 @media screen and (max-width: 375px) ...
- 响应式布局rem的使用
在如今移动端,响应式布局的时代,用rem作为单位已经是非常普及的一门小技巧了..rem的单位根据html的font-size来进行换算! 1.rem的兼容性: 如下图所示IE9以上就支持了rem这个属 ...
- 【CSS-移动端响应式布局详解】
背景 移动端响应式布局开发主要方案有: 基于rem开发 基于媒体查询 基于弹性盒 基础概念 在讨论响应式布局知识前,先了解下移动端常用基础概念. 逻辑像素(CSS pixels) 浏览器使用的抽象单位 ...
- 响应式布局rem、rem方法封装、移动端响应式布局
相信大家在做移动端的时候都会做各个手机的适配这种适配就是响应式布局在之前做网站的响应式从pc到手机用的是媒体查询 @media screen and (max-width: 300px){} 最大宽度 ...
- PC 端响应式布局
前言:PC端 电脑显示器的尺寸种类还是很多的,台式电脑和笔记本电脑尺寸相差就更明显,所以响应式布局还是很重要的,甚至是必须要考虑的. 响应式的页面好不好,在后管平台上很明显.因为后管平台,一般是全屏显 ...
- 探讨兼容IE低版本的PC端响应式布局
http://www.jiangweishan.com/article/lowIeResposive.html 响应式布局,oh my god!!有点醉了,感觉是老生常谈的话题了.虽然已经谈过很多了, ...
- 响应式布局-Rem的用法
前言: 文章较为系统地介绍了rem这个新的文字大小单位,绝对干货,绝对好文.转载时略有改动. 先来看看一些基本理念,比如: 响应式网页不仅仅是响应不同类型的设备,而且需要响应不同的用户需求.响应式 ...
随机推荐
- mysql小白系列_04 datablock
1.为什么创建一个InnoDB表只分配了96K而不是1M? 2.解析第2行记录格式?(用下面的表定义和数据做测试) mysql> create table gyj_t3 (),name2 var ...
- HTML中id与name的通俗区别
转自:https://blog.csdn.net/qq_35038153/article/details/70215356 https://zhidao.baidu.com/question/7582 ...
- Verilog语言中的系统任务和系统函数
Verilog语言中预先定义了一些任务和函数,用于完成一些特殊的功能,它们被称为系统任务和系统函数,这些函数大多数都是只能在Testbench仿真中使用的,使我们更方便的进行验证. `timescal ...
- ATX插件机制-学习学习
添加插件:记录一下 https://testerhome.com/topics/16074 webview操作: https://testerhome.com/topics/12599
- web自动化之执行js脚本
from selenium import webdriver from selenium.webdriver.support.wait import WebDriverWait from seleni ...
- Xmind写测试点
引入: 既然我们这篇要说<Xmind写测试点>,那么先来回顾一下,什么情况下才写测试点,而不写测试用例. 之前写过一篇<测试用例-20问20答>,没看过的朋友戳这里:,其中就有 ...
- ## 0521Day04内部类
[重点] Math公式 静态导入 正则表达式 内部类 访问修饰符 [Math] Math包的相关方法: round:四舍五入:-10.9==>-11/-11.2==>-11 floor:向 ...
- 0421for循环各类题目
for循环要点 1.确认外层控制内容 2.确认内层控制内容 3.将打印内容与行号产生关系式 4.有的语句可以用if语句,根据字符的个数来增减char,优化代码 //部分类型只能输出奇数行,可在下半部分 ...
- pyqt5-多线程初步
多线程是实现并发的一个重要手段.在GUI编程中,经常需要将耗费时间较多的任务分离出来成为一个线程,避免对主线程造成影响(造成界面无响应). 在Qt中,最简单的多线程主要通过继承QThread类实现,重 ...
- 【QT】利用pyqt5实现简单界面
Topic: 利用pyqt5编写简单界面Env:win10 + Pycharm2018 + Python 3.6.8Date: 2019/4/29 by hw_Chen2018 ...