移动端rem
手机有很多尺寸的型号。使用rem来做为大小单位可以达到兼容的目的。
方法一:js测量手机尺寸,设置font-size:为手机屏幕width /10 + ‘px’。即10rem 为手机屏幕width。
方法二:css的媒体查询,列举所要兼容的手机尺寸,按照方法一设置html的font-size。
代码:
方法一
(function () {
var newRem = function () {
html.style.fontSize = html.getBoundingClientRect().width / 10 + 'px'
}
window.addEventListener('resize', newRem, false)
newRem()
})()
方法二
。。。
移动端rem的更多相关文章
- 谈谈我的移动端rem适配方案
最近有点怀疑人生,毕竟一个人写前端,有时候会怀疑自己理解的一些东西包括用法有没有符合标准.趁着这阵子闲下来,翻了翻别人的rem适配博客,发现有点绕口,怪自己是个强迫症,啥都要自己去试试结果并从中理解, ...
- 关于移动端rem适配
var num = 1 / window.devicePixelRatio; var fontSize = document.documentElement.clientWidth / 10; doc ...
- 第130天:移动端-rem布局
一.关于布局方案 当拿到设计师给的UI设计图,前端的首要任务就是布局和样式,相信这对于大部分前端工程师来说已经不是什么难题了.移动端的布局相对PC较为简单,关键在于对不同设备的适配.之前介绍了一篇关于 ...
- 07. 如何实现移动端rem适配
如何实现移动端rem适配 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...
- 移动端REM布局模板(阿里高清方案)
移动端REM布局模板(阿里高清方案),蛮好的,转自: http://www.jianshu.com/p/985d26b40199 . <!DOCTYPE html> <html la ...
- 移动端Rem布局注意事项
1.布局的总体结构框架: 2.注意事项: (a):如果是左右两栏的布局方式,须在article的同级加一个aside: 因为是同级,所以必须设置同样的样式:而且他俩的父级,也就是sectio ...
- 移动端rem适应布局
移动端rem适应布局 rem rem(root em)是一个相对单位,类似于em,em是父元素字体大小. 不同的是rem的基准是相对于html元素的字体大小. 比如,根元素(html)设置font-s ...
- 移动端rem适配&iOS兼容
移动端rem适配js // 默认375,750设计稿请将375替换为750 (function (doc, win) { // 移动端适配 var docEl = doc.documentElemen ...
- H5 端 rem 适配方案与 viewport 适配
H5 端 rem 适配方案与 viewport 适配 rem rem 是 CSS3 新增的一个相对单位(root em,根 em) 只根据当前页面 HTML 页面的 font-size 设置,如果根目 ...
- 移动端rem布局实践
一.rem 适配基本概念: 对于移动端的开发,rem 适配必不可少,我们可以用多种方式实现, 根据 html 的 fontSize 属性值为基准,其它所有的 rem 值,根据这个基准计算.我们根据 ...
随机推荐
- poj 2585 Window Pains 暴力枚举排列
题意: 在4*4的格子中有9个窗体,窗体会覆盖它之下的窗体,问是否存在一个窗体放置的顺序使得最后的结果与输入同样. 分析: 在数据规模较小且不须要剪枝的情况下能够暴力(思路清晰代码简单),暴力一般分为 ...
- udhcp源码详解(一)之文件组织结构(dhcp server) --转
udhcp目录下有十几个源文件,一个源文件相对应一个模块,完成一系列相关的功能,例如在static_leases.c主要针对static_lease链表增删查找等操作. dhcpd.c—— 整个d ...
- poj1840Eqs(哈希判重)
题目链接: 传送门 思路: 这道题是一个简单的hash的应用,假设直接暴力的话肯定承受不了5重for循环,所以比赛的时候我先到分成两组.可是后来用到了很多数组,然后想到数字太大,还先到stl判重, 后 ...
- 另外几种Java集合框架具体解释续
另外几种Java集合框架具体解释续 作者:chszs,未经博主同意不得转载.经许可的转载需注明作者和博客主页:http://blog.csdn.net/chszs fastutil库优于Trove库的 ...
- oracle多表关联多字段update
多表关联多字段update 有代码有J8: update spatial_references set( auth_name, auth_srid, falsex, falsey, xyunits, ...
- 如何在Android studio中同时打开多个工程?
最近学习Android Studio,想同时打开两个Project.但是点击File->Open之后,原有的Project被关闭掉了.怎么在新的窗口中打开Project呢? 解决: 点击Help ...
- hdu 5289(单调队列)
Assignment Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others)Total ...
- Java 支持JavaScript脚本计算
Java支持了JavaScript脚本的执行计算能力: import javax.script.Invocable; import javax.script.ScriptEngine; import ...
- Jquery选择器大全、属性操作、css操作、文档、事件等
一.简介 定义 jQuery创始人是美国John Resig,是优秀的Javascript框架: jQuery是一个轻量级.快速简洁的javaScript库. jQuery对象 jQuery产 ...
- linux下解压tgz文件(转载)
转自:http://www.blogjava.net/chenlb/archive/2008/09/03/226654.html .tgz 解压: tar zxvf myfile.tgz