<!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的更多相关文章

  1. CSS3中的px,em,rem,vh,vw辨析

    1.px:像素,精确显示 2.em:继承父类字体的大小,相当于"倍",如:浏览器默认字体大小为16px=1em,始终按照div继承来的字体大小显示,进场用于移动端 em换算工具:h ...

  2. 视区相关单位vw, vh..简介以及可实际应用场景

    这篇文章发布于 2012年09月24日,星期一,01:15,归类于 css相关. 阅读 37012 次, 今日 12 次 by zhangxinxu from http://www.zhangxinx ...

  3. css中vw,vh单位对于UC的兼容性问题

    vw,vh单位在移动端浏览器不兼容,在网上找半天也没找到什么官方的解决方法:我就试了一下在使用到vh的单位之前添加一个用px定义的样式: 如: 当浏览器不是别100vw单位的时候 就会赋给px单位的样 ...

  4. css3中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况

    原文地址: http://blog.csdn.net/jyy_12/article/details/42557241 px:绝对单位,页面按精确像素展示 em:相对单位,基准点为父节点字体的大小,如果 ...

  5. 小tip:CSS vw让overflow:auto页面滚动条出现时不跳动

    原文地址:http://www.zhangxinxu.com/wordpress/?p=4552 一.水平居中布局与滚动条跳动的千年难题 当前web届,绝大多数的页面间布局都是水平居中布局,主体定个宽 ...

  6. 7个你可能不认识的CSS单位:rem vh vw vmin vmax ex ch

    rem 我们首先介绍下和我们熟悉的很相似的货.em 被定义为相对于当前对象内文本的字体大小.炒个栗子,如果你给body小哥设置了font-size字体大小,那么body小哥的任何子元素的1em就是等于 ...

  7. CSS中vw和vh单位的使用

    vw——viewpoint width,视窗宽度,1vw等于视窗宽度的1%: vh——viewpoint height,视窗高度,1vh等于视窗高度的1%:例子:http://tutorialzine ...

  8. rem和em和px vh vw和% 移动端长度单位

    1.rem和em.px 首先来说说em和px的关系 em是指字体高度 浏览器默认1em=16px,所以0.75em=12px;我们经常会在页面上看到根元素写的font-size:65%; 这样em就成 ...

  9. rem vh vw vmin vmax ex ch

    rem 我们首先介绍下和我们熟悉的很相似的货.em 被定义为相对于当前对象内文本的字体大小.如果你给body小哥设置了font-size字体大小,那么body小哥的任何子元素的1em就是等于body设 ...

  10. CSS3自适应字体大小(vw vh)

    viewpoint css3提供了一些与当前viewpoint相关的元素,vw,vh,vmin, vmax等. “viewpoint” = window size vw = 1% of viewpor ...

随机推荐

  1. linux基础知识面试题

    Linux 开机启动过程 主机加电自检,加载 BIOS 硬件信息. 读取 MBR 的引导文件(GRUB.LILO). 引导 Linux 内核. 运行第一个进程 init (进程号永远为 1 ). 进入 ...

  2. springboot项目打成jar包，启动指定外部的yml文件

    java -jar xxx.jar --spring.config.local=application.yml

  3. java pta第三次阶段性总结

    一.前言 这是这学期最后一次总结,这三次的pta大作业也是最后一次,这几次大作业主要写了电信计费系统的主要功能,第一次大作业是座机计费功能,第二次大作业是手机计费功能,第三次大作业是短信计费的功能.这 ...

  4. GPS时钟之户外防水防雷细节

    GPS时钟之户外防水防雷细节------专业LED时钟厂家![点击进入] GPS的脆弱性: 由于在GPS设计时,干扰环境下的工作能力不是优先考虑的因素,它只是作为一种导航的辅助工具,而不是用于精确制导 ...

  5. uart 理解

    1: 串口字符串传输和单字节传输的差异体现在字节与字节间是或在停止位后有空闲位的插入(下图红箭头处,没有插入),即 uart_send("123")  和 uart_send('1 ...

  6. PPT之图表

    1.从数据到信息 同样的数据,通过不同的图样式来呈现不同的突出重点.使用饼状图突出元素占比,使用排序的柱状图突出最大或者最小的元素,使用虚化与实体突出表达重点. 同样的数据,通过不同的关注点突出重点. ...

  7. eset node32卸载记录

    安装的是这个东西,卸载麻烦 1.一般的卸载软件比如wise program uninstall无论是普通卸载还是强制卸载都是实现不了的,火绒自带的文件粉碎是可以使用的,有两个目录要进行粉碎C:\Pro ...

  8. Day3 准备步入入门.ok

    安装开发环境(6.21周一) 卸载JDK 删除Java的安装目录 打开我的电脑-->属性-->高级系统设置-->环境变量 删除JAVA_HOME 删除path下添加的JAVA目录 安 ...

  9. NOI 顺序查找——查找特定的值

    描述 在一个序列(下标从1开始)中查找一个给定的值,输出第一次出现的位置. 输入 第一行包含一个正整数n,表示序列中元素个数.1 <= n <= 10000.第二行包含n个整数,依次给出序 ...

  10. python高阶编程(一)

    1.生成器 通过列表⽣成式,我们可以直接创建⼀个列表.但是,受到内存限制,列表容量肯定是有限的.⽽且,创建⼀个包 含100万个元素的列表,不仅占⽤很⼤的存储空间,如果我们仅仅需要访问前⾯⼏个元素,那后 ...