rem单位
2016-04-17 10:49
218 查看
rem单位
rem基础
px是固定单位,不同分辨率下效果不一样,导致网页布局出现偏差。em是根据父元素来改变字大小
rem是根据根元素html来改变字体大小,只要改变了根元素的font-size就可以改变所有字体的大小。
1,
html{font-size:20px;}
body{width:6rem;}
此处1rem=20px
2,
html{font-size:62.5%;}
body{width:6rem;}
此处1rem=10px;因为默认1rem=16px;
10/16=62.5%
rem跟随分辨率而变化的方法
我们的目的是分辨率不同,字体大小也不同,即适应屏幕分辨率。那么怎样才可以让rem的大小随着分辨率而变化呢?1,media query,这个不是通用性方法,根据常用的分辨率制定rem。
html {font-size : 20px;} @media only screen and (min-width: 401px){ html {font-size: 25px !important;} } @media only screen and (min-width: 428px){ html {font-size: 26.75px !important;} } @media only screen and (min-width: 481px){ html {font-size: 30px !important; } } @media only screen and (min-width: 569px){ html {font-size: 35px !important; } } @media only screen and (min-width: 641px){ html {font-size: 40px !important; } }
2,js方法
<script> (function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function () { var clientWidth = docEl.clientWidth; if (!clientWidth) return; clientWidth=(clientWidth>640)?640:clientWidth; docEl.style.fontSize = 20 * (clientWidth / 320) + 'px'; }; if (!doc.addEventListener) return; win.addEventListener(resizeEvt, recalc, false); doc.addEventListener('DOMContentLoaded', recalc, false); })(document, window); </script>
其他布局方法
1,流式布局宽度用百分比;高度用px单位,即高度固定。大分辨率下变形。
当然可以让高度值为rem单位;宽度也要注意兼容性问题。
2,限定宽度
固定的320px,大分辨率下,两边留白。不提倡。
3,响应式
不了解
道听途说:直接从web page直接转换为web app。对大公司来说工作量大,维护难,中小企业可以使用,节约成本。
4,设置viewport,缩放
<meta name="viewport" content="width=320,maximum-scale=1.3,user-scalable=no" />
效率高,效果也不错。
相关文章推荐
- TortoiseSVN使用教程
- [HDOJ2512]一卡通大冒险(DP)
- 深入浅出Java并发包—读写锁ReentrantReadWriteLock原理分析(二)
- MongoDB数据表基本操作
- 大表设计思路
- 初识云计算的三种服务模式 (IaaS SaaS PaaS)
- 犬儒主义
- Window 7 自动登录
- iOS蓝牙4.0(BLE)-后台接收数据
- 安装eclipse的JRebel6.0.3的插件
- 算法复习之冒泡排序
- 第七周项目一求两点距离 一般函数
- 机器视觉开源代码集合
- scp 非22端口传输
- AAA oracle11g dataguard 完全手册(PRACLE主从复制)(数据库开启总闪回)
- leetcode 74. Search a 2D Matrix
- Git SSH Key 生成步骤
- HDU 5667 Sequence 矩阵快速幂
- 把csv入库到hadoop集群
- 算法课本~汉诺塔算法程序