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它绝对是最合适的人选之一. ...
随机推荐
- ubuntu14.04 中virtual box 加入 usb
参考两篇文章: 1.http://www.cnblogs.com/ericsun/archive/2013/06/10/3130679.html 2.http://www.360doc.com/con ...
- mysql按天数据统计
例: SELECT DATE_FORMAT(`create_time`, ) AS num FROM `dc_loan_aa_orders` GROUP BY DATE_FORMAT(`create_ ...
- 【03月04日】A股滚动市盈率PE历史新低排名
2010年01月01日 到 2018年12月05日 之间,滚动市盈率历史新低排名. 上市三年以上的公司,2018年12月05日市盈率在300以下的公司. 1 - 青松股份(SZ300132) - 历史 ...
- Qt编写调试日志输出类带网络转发(开源)
用qt开发商业程序已经九年了,陆陆续续开发过至少几十个程序,除了一些算不算项目的小工具外,大部分的程序都需要有个日志的输出功能,希望可以将程序的运行状态存储到文本文件或者数据库或者做其他处理等,qt对 ...
- MySQL 删除数据库中重复数据方法
1. 查询需要删除的记录,会保留一条记录. select a.id,a.subject,a.RECEIVER from test1 a left join (select c.subject,c.RE ...
- Spring的标签和验证等模块
使用了spring,真的可以简化很多开发,但前提是你懂spring技术,并且环境,架包没错. 今天编写了登录验证的模块,但是就是验证不了,不知道哪里出错了,但是也不好改错,这样还是很费时间的. 错误提 ...
- Servlet3.0 multipart 文件上传技术
Servlet3.0 javaConfig配置 传统的servlet都是在web.xml中配置,从Servlet 3.0开始提供了ServletContainerInitializer接口,允许使用代 ...
- ElasticSearch入门 第二篇:集群配置
这是ElasticSearch 2.4 版本系列的第二篇: ElasticSearch入门 第一篇:Windows下安装ElasticSearch ElasticSearch入门 第二篇:集群配置 E ...
- Maven知识点积累一
配置maven变量,变量名可以是:MAVEN_HOME 或 M2_HOME settings.xml配置本地仓库地址: <localRepository>G:/.m2/repository ...
- MPD软件工作坊上海站本周末在上海举行
本周末(5月26日至27日)由麦思博(msup)主办的第39届MPD软件工作坊即将在上海虹桥会议中心举行.本届MPD将继续围绕软件研发领域,邀请了21位技术大咖,从产品运营.团队管理.架构技术.自动化 ...