css网页单位
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<!--
px、em、rem、vh、vw、vmin、vmax px:绝对单位(无论何种设备,均使用同等大小)
em:相对于父类单位(上一级父类)
rem:相对于根目录大小(html)
vh:无论何种设备,相对于设备的百分比计算，viewpoint width，视窗宽度，1vw等于视窗宽度的1%。
vw:和上面的描述一样，viewpoint height，视窗高度，1vh等于视窗高度的1%。
vmin:和上面的一样，vw和vh中较小的那个。
vmax:和上面的一样，vw和vh中较大的那个。 %:百分比
in:寸
cm:厘米
mm:毫米
pt:point/大约1/72寸
pc:pica/大约6pt,1/6寸 ex：
取当前作用效果的字体的x的高度，
在无法确定x高度的情况下以0.5em计算
(IE11及以下均不支持，
firefox/chrome/safari/opera/
ios safari/android browser4.4+等均需属性加么有前缀) ch:
以节点所使用字体中的“0”字符为基准，
找不到时为0.5em(ie10+,chrome31+,safair7.1+,opera26+,
ios safari 7.1+,android browser4.4+支持) 支持度:
IE9+局部支持
chrome/firefox/safari/opera支持
iOS safari 8+支持
Android browser4.4+支持
chrome for android39支持
--> <!--
局部bug:
Chrome默认是:12px.
不会小于10px(无论怎么设置)
--> <style>
html {
font-size: 10px;
} .first {
font-size: 1rem;
/*
0.5rem相对于跟目录的2倍,当设置在body上时.
*/
/*
设置在跟目录上,1rem相对于原大小
*/
/*
设置在父类上时,子类也会跟着改变
*/
} .two {
font-size: 1em;
/*em相对于父元素的大小: 1em=原大小、2em=父类的两倍大小
*/
} .three {
/* font-size: 1vh; */
font-size: 5vw;
/* 12*5 */
} .four {
font-size: 72px;
}
</style> <!-- <script>
var ele = document.getElementsByTagName("html")[0],
var size = document.body.clientWidth / 320 * 20;
ele.style.fontSize = size + "px";
</script> --> <!--
手机端设备像素比例:3\2\1
--> <!--
ps切图以最高高度保持一致
--> <body>
<header>
<div class="first">
我10px大小,就不变小宰了我啊
<div class="two">
我跟着他,就不变大
</div>
</div>
</header>
<section>
<div class="three">
哈哈,我.. vh
</div> <div class="four">
哈哈,px在此
</div>
</section>
<section>
<div class="five"></div>
<div class="six"></div>
</section>
<section>
</section>
<section></section>
<section></section>
<footer></footer>
</body> </html>
css网页单位的更多相关文章
- CSS网页布局全精通
在本文中将使用四种常见的做法,结合CSS于结构化标记语法制作两栏布局.很快地就会发现,不用嵌套表格,间隔用的GIF也能做出分栏版面布局. 相关文章:CSS网页布局开发小技巧24则 稍后在"技 ...
- CSS的单位及css3的calc()及line-height百分比
锚点:css中百分比减去固定元素 单位介绍 说到css的单位,大家应该首先想到的是px,也就是像素,我们在网页布局中一般都是用px,但是近年来自适应网页布局越来越多,em和百分比也经常用到了.然后随着 ...
- 总结与学习DIV+CSS网页布局技巧
以前用表格布局时设置网页居中非常方便,把表格对齐方式设置为居中就行了,就这么简单,现在呢,用DIV+CSS样式表控制,好像不是那么容易了,其实也很简单,只不过方式不同而已. <style> ...
- 移动H5开发入门知识，CSS的单位汇总与用法
说到css的单位,大家应该首先想到的是px,也就是像素,我们在网页布局中一般都是用px,但是近年来自适应网页布局越来越多,em和百分比也经常用到了.然后随着手机的流行,web app和hybrid a ...
- H5移动端开发入门知识以及CSS的单位汇总与用法
说到css的单位,大家应该首先想到的是px,也就是像素,我们在网页布局中一般都是用px,但是近年来自适应网页布局越来越多,em和百分比也经常用到了.然后随着手机的流行,web app和hybrid a ...
- 简单实用的CSS网页布局中文排版技巧
由于汉字的特殊性,在css网页布局中,中文排版有别于英文排版.排版是一个麻烦的问题,小编认为,作为一个优秀的网页设计师和网页制作人员,掌握一些简单的中文排版技巧是不可或缺的,所以今天特意总结了几个简单 ...
- CSS网页布局中易犯的30个小错误
即使是CSS高手,也难免在书写CSS代码的时候出一些小错误,或者说,任何一种代码都是如此.小错误却往往造成大问题,浪费很多无辜的时间来调试和排错.查看下面这份CSS网页布局中易犯的10个小错误,努力的 ...
- div+css网页标准布局实例教程（一）
今天学习<十天学会web标准(div+css)>的最后一个章节,本章节把前面学习的零碎内容串联起来,组织成一个网站,将根据本人这些年来的从业经验,从建立站点到一个完整的div+css网页的 ...
- CSS的单位 及 css3的calc() 及 line-height 百分比
CSS的单位及css3的calc()及line-height百分比 摘自:http://www.haorooms.com/post/css_unit_calc 单位介绍 说到css的单位,大家应该首先 ...
随机推荐
- Calendar类进行日期操作
import java.util.Calendar; import java.util.Date; import java.util.GregorianCalendar; /** * 测试日期类 * ...
- ARM芯片stm32中的AHB和APB
AHB,是Advanced High performance Bus的缩写,译作高级高性能总线,这是一种“系统总线”.AHB主要用于高性能模块(如CPU.DMA和DSP等)之间的连接.AHB 系统由主 ...
- Sqli-labs less 13
Less-13 本关我们输入username:admin' Password: (随便输) 进行测试 可以看到报错了,错误为: You have an error in your SQL syntax ...
- zabbix报警-邮件-钉钉
安装zabbix的时候已经配置了zabbix_server的脚本目录 AlertScriptsPath=/opt/app/zabbix/script 所以把邮件.钉钉.微信相关的脚本都放在/opt/z ...
- 解决cordova命令行方式下build或者run的时候报错问题
phonegap3.0之后就将项目的生成方式做了很大的更改,原来是在eclipse里面修改生成并编译运行,但是3.0之后它的目录结构发生了很大变化,只修改主目录下面的index.html如果不buil ...
- Codeforces 500 E. New Year Domino
\(>Codeforces \space 500 E. New Year Domino<\) 题目大意 : 数轴上有序排列着 \(n\) 块多米诺骨牌, 第 \(i\) 块骨牌坐标为 \( ...
- AGC 026 C - String Coloring
题面在这里! 比较简单的折半搜索,推一下hash函数,要求正反最后相等就行了. #include<bits/stdc++.h> #define ll unsigned long long ...
- [BZOJ2595]游览计划
斯坦纳树居然不是数据结构... 斯坦纳树应该是类似最小生成树的问题,只不过它允许增加额外的点 比如这道题就是找关于景点的最小生成树,但还要付出最小的代价,加一些额外的格子把景点都连起来 套路是设$f_ ...
- 【分块】【暴力】XVII Open Cup named after E.V. Pankratiev Grand Prix of Moscow Workshops, Sunday, April 23, 2017 Problem I. Rage Minimum Query
1000w的数组,一开始都是2^31-1,然后经过5*10^7次随机位置的随机修改,问你每次的全局最小值. 有效的随机修改的期望次数很少,只有当修改到的位置恰好是当前最小值的位置时才需要扫一下更新最小 ...
- [JZOJ5426]摘Galo
题目大意: 有一棵n个结点的树,每个点都有一个权值,你要从中选出不超过k+1个点使得权值和尽量大. 同时要注意如果一个点被选择,那么它的子树和这个点到根结点路径上的点不能被选择. 思路: 很水的树形D ...