css3单位em,rem,px,vw,vh等
昨天发现了个好用的方法去设置手机端的rem单位,在这里记录下。
html{
font-size:calc(100vw/7.5);
}
这是按照750的设计稿(也就是iphone6的设计稿)。
100vw是设备的宽度,除以7.5可以让1rem的大小在iPhone6下等于50px。
替换页面中的单位,把所有的px单位替换成rem,除以100,比如某字体大小在设计稿上是36px,就是0.36rem。
在iPhone6下,所有元素的尺寸还是和视觉稿的尺寸一样,而iphone5/iphone6plus中,因为设备的宽度变小/变大了,100vw/7.5得到的值,会相应的变小、变大,即rem的单位值会变,页面中所有的尺寸会等比例缩放。
so,这样就做到l了针对不同分辨率的设备保持视觉一致了。
but,vw单位,在低版本的设备可能不支持,那就需要用js来处理一下:
document.documentElement.style.fontSize = window.innerWidth/3.75 + 'px'
ps:之所以让1rem等于50px,而不是1rem等于1px,是因为在chrome下针对中文的最小字体是12px。
下面介绍下css的各种单位:
css单位
px:绝对单位,页面按精确像素展示
em:相对单位,基准点为父节点字体的大小,如果自身定义了font-size按自身来计算(浏览器默认字体是16px),整个页面内1em不是一个固定的值。
ps:chrome的最小字体大小是12px,小于12则按照12来算,所以要注意一下哦
顺带给出让chrome字体小于12px的方法:
.font-small{
font-size: 12px;
*font-size:9.6px;//为了兼容ie67
-webkit-transform-origin-x:;
-webkit-transform: scale(0.80);
}
利用css3的缩放属性,其最终大小就是:12px * 0.8 = 9.6px;
css3新增单位
rem:相对单位,可理解为”root em”, 相对根节点html的字体大小来计算,CSS3新加属性,chrome/firefox/IE9+支持。
vw:viewpoint width,视窗宽度,1vw等于视窗宽度的1%。
vh:viewpoint height,视窗高度,1vh等于视窗高度的1%。
vmin:vw和vh中较小的那个。
vmax:vw和vh中较大的那个。
这几种单位(除了rem)的支持性:基本支持所有主流浏览器,ie必须是ie10+。
css3单位em,rem,px,vw,vh等的更多相关文章
- css长度单位学习(em,rem,px,vw,vh)
绝对长度单位 绝对长度单位代表一个物理测量 [像素px(pixels)] 像素,为影像显示的基本单位,译自英文"pixel",pix是英语单词picture的常用简写,加上英语单词 ...
- HTML-移动端-rem px vw vh 的转换
vw/vh rem px 三者的转换(快速入门移动端页面编写) 1:三种单位的转换 2:如何适配移动端的不同设备 前提知识: 手机端的长宽是实际设计过程中的两倍 比如手机端是 750 * 1200 那 ...
- css单位em、px、rem和pt的区别
1.PX :像素(Pixel) PX是相对长度单位,它是相对于显示器屏幕分辨率而言的. 优缺点:比较稳定和精确,但在浏览器中放大或缩放浏览页面时会出现页面混乱的情况. 2.EM:是相对长度单位. EM ...
- CSS尺寸和字体单位-em、px还是%
在页面整体布局中,页面元素的尺寸大小(长度.宽度.内外边距等)和页面字体的大小也是重要的工作之一.一个合理设置,则会让页面看起来层次分明,重点鲜明,赏心悦目.反之,一个不友好的页面尺寸和字体大小设置, ...
- 尺寸单位em,rem,vh,vw
这几天做demo,看了网上教程有用到尺寸单位vh,vw, 这些单位不是很熟悉,所以上网上找了些资料来认识了这些不认识的单位 1.em 在做手机端的时候经常会用到的做字体的尺寸单位 说白了 em就相当于 ...
- CSS系列:长度单位&字体大小的关系em rem px
em是相对长度单位.相对于当前对象内文本的字体尺寸.如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸. 任意浏览器的默认字体高都是16px.所有未经调整的浏览器都符合: 1em=1 ...
- em,rem,px的区别,以及实现原理?
px像素(Pixel).相对长度单位.像素px是相对于显示器屏幕分辨率而言的.em是相对长度单位.相对于当前对象内文本的字体尺寸举个例子:比如说当前容器`font-size:16px;`则`1em`就 ...
- em,rem,px的实际应用
看了好多的文章,就只是在看他们的换算,没有实际做出例子所以一直很疑惑,不知道到底是怎么写的.今天写了一个demo.务必彻底弄清楚. 先说三者的区别: 首先是我们常见的px. px: em:相对长度单位 ...
- 了解单位em和px的区别
这里引用的是Jorux的“95%的中国网站需要重写CSS”的文章,题目有点吓人,但是确实是现在国内网页制作方面的一些缺陷.我一直也搞不清楚px与em之间的关系和特点,看过以后确实收获很大.平时都是用p ...
随机推荐
- Logistic Regression 笔记与理解
Logistic Regression 笔记与理解 Logistic Regression Hypothesis 记为 H(theta) H(theta)=g(z) 当中g(z),是一个叫做Logis ...
- 车牌识别--OMAP4430处理器上測试
OMAP4430(ME865) arm-linux-gcc 4.5.1(FriendlyARM) 软浮点执行结果: root@lj:/workspace/carid# arm-linux-gcc ca ...
- 图像处理之opencv---加减乘除运算cvdiv
http://chyyeng.blog.163.com/blog/static/16918230201211632135456/
- quick-cocos2d-x开发工具sublime text及其强力插件QuickXDev
更新:如今QuickXDev已经能够通过Package Control下载了,全部QuickXDev相关的请看这里:http://my.oschina.net/lonewolf/blog?catalo ...
- hdu5261单调队列
题意特难懂,我看了好多遍,最后还是看讨论版里别人的问答,才搞明白题意,真是汗. 其实题目等价于给n个点,这n个点均匀分布在一个圆上(知道圆半径),点与点之间的路程(弧长)已知,点是有权值的,已知,点与 ...
- machine learning for hacker记录(1) R与机器学习
开篇:首先这本书的名字很霸气,全书内容讲的是R语言在机器学习上面的应用,一些基本的分类算法(tree,SVM,NB),回归算法,智能优化算法,维度约减等,机器学习领域已经有很多成熟的R工具箱,毕竟这个 ...
- java 浮点数
package precisenumber; //import java.util.*;public class PreciseNumber { public int fore; public int ...
- hdu1052 田忌赛马 —— 贪心
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1052 错误代码: #include<stdio.h>//田忌赛马,错误版 #include ...
- ES6 新特性之Symbol
Symbol let s1 = Symbol('foo'); let s2 = Symbol('bar'); s1 // Symbol(foo) s2 // Symbol(bar) s1.toStri ...
- 理解HTML解析过程
浏览器解析html的过程是:接受网络数据->将二进制码变成字符->将字符变为unicode code points.->tokenizer ->tree constructor ...