VW
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Document</title>
<style>
*{
margin:0;
padding:0
}
html,body{
height:100%;
}
body{
display:flex;
flex-direction: column;
}
html{
font-size:31.25vw;
/*1rem == 100px*/
}
header{
height:0.44rem;
background:green;
font-size:12px;
}
nav{
height:0.35rem;
background:orange;
} main{flex:1;}
footer{
height:0.44rem;
background:blue;
} @media all and (min-width:321px) and (max-width:375px){
header{
font-size:16px;
}
footer{}
}
</style>
</head>
<body>
<header>文本</header>
<nav></nav>
<main></main>
<footer></footer>
</body>
</html>
<!--
100px == ?vw
设计图！！！！！
640px 750px 1080px
dpr: 2 2 3 例子1：如果设计图为640px;
考虑dpr 2
640px / 2 == 320px; 320px == 100vw; 3.2px == 1vw;
100px == 31.25vw; 具体实现：量出height:88px dpr 2 88px / 2 == 44px
44px / 100 == 0.44rem; 死记住！！： 如果设计图为640px
给html设置{font-size:31.25vw}
量出大小 76px 76 / dpr == 38px;
38px / 100 == 0.38rem; 例子：设计图为750px;
需求：100px == ?vw; dpr 2
750px / 2 == 375px 100vw == 375px; 1vw == 3.75px;;
26.67vw == 100px; 死记住！！！ 如果设计图为750px
给html设置{font-size:26.67vw}
量出大小54px 54px / 2 == 27px;
27px / 100 == 0.27rem
-->
VW的更多相关文章
- CSS3中的px,em,rem,vh,vw辨析
1.px:像素,精确显示 2.em:继承父类字体的大小,相当于"倍",如:浏览器默认字体大小为16px=1em,始终按照div继承来的字体大小显示,进场用于移动端 em换算工具:h ...
- 视区相关单位vw, vh..简介以及可实际应用场景
这篇文章发布于 2012年09月24日,星期一,01:15,归类于 css相关. 阅读 37012 次, 今日 12 次 by zhangxinxu from http://www.zhangxinx ...
- css中vw,vh单位对于UC的兼容性问题
vw,vh单位在移动端浏览器不兼容,在网上找半天也没找到什么官方的解决方法:我就试了一下在使用到vh的单位之前添加一个用px定义的样式: 如: 当浏览器不是别100vw单位的时候 就会赋给px单位的样 ...
- css3中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况
原文地址: http://blog.csdn.net/jyy_12/article/details/42557241 px:绝对单位,页面按精确像素展示 em:相对单位,基准点为父节点字体的大小,如果 ...
- 小tip:CSS vw让overflow:auto页面滚动条出现时不跳动
原文地址:http://www.zhangxinxu.com/wordpress/?p=4552 一.水平居中布局与滚动条跳动的千年难题 当前web届,绝大多数的页面间布局都是水平居中布局,主体定个宽 ...
- 7个你可能不认识的CSS单位:rem vh vw vmin vmax ex ch
rem 我们首先介绍下和我们熟悉的很相似的货.em 被定义为相对于当前对象内文本的字体大小.炒个栗子,如果你给body小哥设置了font-size字体大小,那么body小哥的任何子元素的1em就是等于 ...
- CSS中vw和vh单位的使用
vw——viewpoint width,视窗宽度,1vw等于视窗宽度的1%: vh——viewpoint height,视窗高度,1vh等于视窗高度的1%:例子:http://tutorialzine ...
- rem和em和px vh vw和% 移动端长度单位
1.rem和em.px 首先来说说em和px的关系 em是指字体高度 浏览器默认1em=16px,所以0.75em=12px;我们经常会在页面上看到根元素写的font-size:65%; 这样em就成 ...
- rem vh vw vmin vmax ex ch
rem 我们首先介绍下和我们熟悉的很相似的货.em 被定义为相对于当前对象内文本的字体大小.如果你给body小哥设置了font-size字体大小,那么body小哥的任何子元素的1em就是等于body设 ...
- CSS3自适应字体大小(vw vh)
viewpoint css3提供了一些与当前viewpoint相关的元素,vw,vh,vmin, vmax等. “viewpoint” = window size vw = 1% of viewpor ...
随机推荐
- 关于IllegalMonitorStateException异常的解释之一
注意 在同步控制方法或同步控制块里调用wait(),notify()和notifyAll().如果在非同步控制方法里调用这些方法,程序能通过编译,但运行的时候,将得到IllegalMonitorSta ...
- can't convert CUDA tensor to numpy. Use Tensor.cpu() to copy the tensor to host memory first.
predict=predict.data.numpy() 这一行报错意思是:如果想把CUDA tensor格式的数据改成numpy时,需要先将其转换成cpu float-tensor随后再转到nump ...
- 06 HBase安装与伪分布式配置
1.下载压缩文件 2.解压 3.修改文件夹名 4.修改文件夹权限 5.配置环境变量 6.伪分布式配置文件 7.启动HDFS,启动Hbase 8.进入shell界面 9.停止Hbase,停止HDFS运行
- 实验一 Linux系统与应用课程准备
項目 內容 这个作业属于哪个课程 班级课程主要链接 这个作业的要求在哪里 作业要求链接 学号-姓名 15043109-吴小怀 作业学习目标 学会在博客园社区中学习Linux的使用技巧,熟练使用Typo ...
- jmeter&badboy安装
一.jmeter下载地址: 1. http://jmeter.apache.org/download_jmeter.cgi \ https://www.apache.org/dist/jmete ...
- 划分数据集时出现PermissionError: [Errno 13] Permission denied:
PermissionError: [Errno 13] Permission denied: [errno 13]权限被拒绝 错误的原因可能是文件找不到,或者被占用,或者无权限访问,或者打开的不是文件 ...
- jmeter--负载测试
负载测试 1. jmeter插件处理 2. 下载负载测试计划所需要插件 3. 负载测试计划 4. 波浪形的测试计划--测试服务器的稳定性 一般用于测试稳定的场景测试(有规律的活动/场景/接口请求等等, ...
- ssh原理及应用
SSH原理与运用(一):远程登录 SSH原理与运用(一):远程登录 SSH原理与运用(二):远程操作与端口转发 SSH原理与运用(二):远程操作与端口转发 mitm应用: python开源三方库:ss ...
- 【javascript】关于charCodeAt()方法
在做算法题目leetcode 2283时,看见某些答案会使用charCodeAt(),因为自己没用过,所以作此纪录 描述在 JavaScript 中,charCodeAt() 是一种字符串方法,用于检 ...
- What Are You Weighting For?
A basic strength routine can change your life Strength training isn't just about getting six-pack ab ...