为什么使用rem?
来源:互联网 发布:制作音乐的软件 编辑:程序博客网 时间:2024/06/05 06:30
rem是什么?
rem(font size of the root element )是指相对于根元素的字体大小单位。而与之相似的em( font size of the element )是指相对于父元素的字体大小的单位。
一般 web app怎样做?
- 1、固定宽度的做法
- 主体的宽度设置为320,超出部分留白。
- 常见的有淘宝、亚马逊、携程等的web app。
- 2、响应式的做法
- 很少有大型的网站在移动端用响应式的做法,主要原因是工作量大,维护性难。但是,中小型的门户或者博客类站点会采用响应式的方法从web page 到 web app 直接一步到位,节约成本。
- 3、设置viewport的做法
<meta name=" viewport " content=" width=320, maximum-scale=1.3, user-scalable=no ">
- 将浏览器的设置为320,最大可以放大到320*1.3=416(这个基本可以满足当前iPhone6 plus的屏幕)
4、设置rem的做法
一、通过js动态的计算根元素的font-size,这样的好处是所有的设备的分辨率都能够兼容适配。
(function(doc,win){ var docEI = doc.documentElement, resizeEvt = 'orientationchange' in window?'orientataionchange':'resize', recalc = function(){ var clientWidth = docEI.clientWidth; if(!clientWidth) return; docEI.style.fontSize = 20*(clientWidth/320)+'px'; } if(!doc.addEventListener) return; win.addEventListener(resizeEvt, recalc, false); doc.addEventListener('DOMContentLoaded', recalc, false);})(document,window);
二、淘宝首页目前采用的是js动态改变根元素大小的方法,但是,一般情况下,我们在开发一个新的产品的时候,会针对目前市场上的主流设备进行适配。这时我们也可以通过以下方法进行设置,进行主流设备的适配。
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; }}
0 0
- 为什么使用rem?
- 如何使用rem,为什么rem不生效?
- rem使用
- css3 rem如何使用
- Rem 使用策略
- rem的使用
- 如何使用rem单位
- rem的使用
- 使用 rem 设置文字大小
- 如何使用rem
- 移动端-rem使用
- rem的使用
- rem的使用
- 如何使用rem单位
- rem的使用
- 手机REM使用代码
- 如何使用rem单位
- android使用ant编译(rem)
- 在页面中嵌入Applet使用opencv调用摄像头,并显示实时摄像头内容
- Android中最常问到的面试题
- 这里有一份面经请查收(三)
- android studio 调用.so 文件时报错has text relocations
- Images.xcassets(上)
- 为什么使用rem?
- ubuntu速度慢的原因之内存和swap分区
- android studio调用JNI
- C++指针详解(复习一下)
- LinQ的一些基础语法
- DeepLab V2 配置bug
- destoon 修改编辑器的路径,删掉member目录
- CGLib动态代理原理及实现
- CDN缓存那些事