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 ...
随机推荐
- TMP_InputField 理解
一.输入框激活问题 public void ActivateInputField(); //激活输入框 public void DeactivateInputField(bool clearSelec ...
- hdu1710 二叉树(C/C++)
hdu1710 题目地址:https://acm.dingbacode.com/showproblem.php?pid=1710 (最近几天杭电原网址开不进去了,之后应该可以通..吧) Binary ...
- mysql查询mapper返参类型为List
List<String> lists = mapper.select(); 返参类型为List,查询没有数据的时候,lists不会为null,lists.size() 为 0.
- Nexus系列---【使用docker搭建nexus3仓库】
1.Docker搭建nexus3私服 如果机器配置比较低,建议指定初始内存大小,默认2G docker run -d \ --restart=always \ --name=nexus3 \ -p 6 ...
- vs 2015 默认管理员启动
方法一: 找到 VS快捷方式 所在位置,并对其高级属性中的"用管理员身份运行"进行勾选,然后进行确定. 此方法 如果是通过sln文件的快捷方式打开的,不是管理员 方法二: 1.打开 ...
- redis和memcached区别总结
1.数据结构:redis支持五种数据结构(字符串,列表,哈希,集合,有序集合),并支持很多相 关计算,例如排序,阻塞等等.支持阻塞队列,锁,线程通信等功能.而memcached只支持kv简单存储 ...
- DBeaver通过phoenix连接云主机的hbase
准备 1.云主机上已经安装好jdk.hadoop.hbase.zookeeper.phoenix,并且在主机上测试连接成功.可参考 https://blog.csdn.net/shangxindeku ...
- CSS网页布局基础
CSS网页布局基础1.行布局-基础的行布局-行布局自适应-行布局自适应限制最大宽-行布局垂直水平居中-行布局某部位自适应-行布局固定宽-行布局导航随屏幕滚动2.多列布局-两列布局固定-两列布局自适应- ...
- 基于C语言的小学四则运算出题器
一.实验目的: 1.帮助老师产出每周随机的300道含有两个运算符的四则运算,. 2.每次题目的产出均为随机,增强同学的四则运算能力. 二.实验环境: Visual C++ 三.实验内容: 1.实现随机 ...
- python openpyxl 多个sheet vlookup
import pandas as pdimport openpyxlfrom openpyxl.styles import Border, Side,colorswb = openpyxl.load_ ...