rem : web app适配的秘密武器
css
html { font-size: calc(100vw / 3.75) }
js
document.documentElement.style.fontSize = $(document.documentElement).width()/3.75 + 'px';
$(window).on('resize', function() {
document.documentElement.style.fontSize = $(document.documentElement).width()/3.75 + 'px';
})
注：3.75可更改为屏幕尺寸6.4或其他
此处1rem相当于100px;
rem : web app适配的秘密武器的更多相关文章
- Web App适配iPhoneX
前言 Iphone每次退出新尺寸的手机都会掀起一番适配风波,这次没有下巴但有刘海的iPhoneX更是如此,网传横屏下的适配动画更是令不少人汗颜. 其实对于Native App来说,适配并不算困难(当然 ...
- Web App适配不同屏幕的几点建议
安卓设备在屏幕尺寸和像素密度上差别很大,因此在使用WebView加载网页时就需要考虑到这种差别,对我们的网页做出精心的设计以在不同的屏幕上都能得到合适的展现.通常情况下,我们需要考虑到两个因素:1.视 ...
- 移动端Web App自适应布局探索
1.困扰多时的问题 在这之前做Web App开发的的时候,在自适应方面一般都是宽度通过百分比,高度以iPhone6跟iPhone5之间的一个平衡值写死,我们的设计稿都是iPhone5的640 * 11 ...
- web app变革之rem（手机屏幕实现全适配）
以往web移动适配,常规写法是:media only screen @media only screen and (min-device-width: 320px){ //针对iPhone 3 } @ ...
- web app 自适应方案总结 关键字 弹性布局之rem
关于rem,主要参考文档 1.腾讯ISUX (http://isux.tencent.com/web-app-rem.html) 2.http://www.w3cplus.com/css3/defin ...
- web app 自适应方案总结 弹性布局之rem
关于rem,主要参考文档 1.腾讯ISUX (http://isux.tencent.com/web-app-rem.html) 2.http://www.w3cplus.com/css3/defin ...
- web app变革之rem
rem这是个低调的css单位,近一两年开始崭露头角,有许多同学对rem的评价不一,有的在尝试使用,有的在使用过程中遇到坑就弃用了.但是我对rem综合评价是用来做web app它绝对是最合适的人选之一. ...
- web app 自适应 弹性布局之rem
关于rem,主要参考文档 1.腾讯ISUX (http://isux.tencent.com/web-app-rem.html) 2.http://www.w3cplus.com/css3/defin ...
- web app 变革之rem
rem这是个低调的css单位,近一两年开始崭露头角,有许多同学对rem的评价不一,有的在尝试使用,有的在使用过程中遇到坑就弃用了.但是我对rem综合评价是用来做web app它绝对是最合适的人选之一. ...
随机推荐
- mycat 9066管理端口
1.连接mycat 9066管理端口 命令:mysql -uroot -proot -P9066 -h127.0.0.1 -u:用户名 -p:密码 -P:端口 -h:ip地址例:linux路径切换到m ...
- Spark学习笔记——Spark Streaming
许多应用需要即时处理收到的数据,例如用来实时追踪页面访问统计的应用.训练机器学习模型的应用, 还有自动检测异常的应用.Spark Streaming 是 Spark 为这些应用而设计的模型.它允许用户 ...
- 网易大数据之数据存储：HDFS
一.HDFS基础架构 1.HDFS特点:水平扩展.高容错性.廉价硬件.开源生态系统 2.Hadoop生态圈 1).分布式存储系统(HDFS),2).资源管理框架(YARN),3).批处理框架(MapR ...
- Android Studio开发第一篇QuickStart
为什么把as的环境开发放在gradle里呢,因为eclipse里装gradle插件还是不够方便,as直接集成了,然后正好as也是大势所趋,学习一下正好. 看到右边Quick Start快速启动栏下面 ...
- python 闭包用法
def make_addr(addend): def addr(augend): return augend + addend return addr p = make_addr(23) q = ma ...
- 3.STM32F4按键扫描函数
//按键处理函数 //返回按键值 //mode:0,不支持连续按;1,支持连续按; //0,没有任何按键按下 //1, KEY0 按下 2, KEY1 按下 3, KEY2 按下 4, WKUP 按下 ...
- Linux 磁盘管理命令
df NO1. 显示所有存储系统空间使用情况,同时显示存储系统的文件系统类型s[root@rehat root]# df -aT NO2. 显示指定文件系统的空间使用情况[root@rehat roo ...
- vue 打包的项目当背景图路径错误
当背景图路径错误时: 在build/utils.js中添加或更改这句话:publicPath: '../../',
- EF将IEnumerable<T>类型转换为Dictionary<T,T>类型
x 无标题 #region 博客Code {DBEntities}生成EFModel的时候自己命名的 using ({DBEntities} db = new { DBEntities }()) { ...
- yum install 下载后保存rpm包
keepcache=0 更改为1下载RPM包 不会自动删除 vi /etc/yum.conf [main] cachedir=/var/cache/yum/$basearch/$releasever ...