<!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. 1 Could not resolve XML resource [null] with public ID [null]

    启动Tomcat报错: Java.io.FileNotFoundException: Could not resolve XML resource [null] with public ID [nul ...

  2. tensorflow2.0和之前版本读取模型的接口变化

    tensorflow2.0 c++加载模型可以用接口LoadSavedModel: SessionOptions opts;     tensorflow::RunOptions run_option ...

  3. vcsa7 页面出现“no healthy upstream”处理过程

    一.昨天服务器出现"no healthy upstream"错误无法登录,搜索网络给出一下的思路: 对于"no healthy upstream"的错误提示,可 ...

  4. ORA-00972: identifier is too long异常处理

    环境:由于数据库更换,做数据同步,提示 too long 问题,导致一直无法同步完数据. 经排查 oracle 历史数据库版本: Oracle Database 12c Standard Editio ...

  5. node后台项目所需中间件梳理

    0.nodemon 全局工具,监听项目文件变动,并自动重启项目 一.node内置模块 1.fs fs.readFile()  读取指定文件中的内容fs.writeFile()  向指定的文件中写入内容 ...

  6. StarUML画用例图

    好久没画图在StarUML里都找不到useCase了,记下来不然又忘了 右击Untitled->Add Diagram->UseCase Diagram,然后左边就有UseCase了就可以 ...

  7. 【SQL】数据库日志文件过大 4条命令删除日志

    USE DATATABLE GO ALTER DATABASE DATATABLE SET RECOVERY SIMPLE DBCC SHRINKFILE (DATATABLE_Log, 1) ALT ...

  8. 01.数据库基础、JDBC

    一.数据库 数据库:用于存储和管理数据的仓库. 数据库的特点 持久化储存数据,数据库就是一个文件系统. 方便储存和管理数据. 使用了统一的方式操作数据库--SQL. 配置 Mysql 服务启动 手动 ...

  9. pycharm2019.3.1版本需要的JetBrains Runtime 11不支持windows 32位系统。

    提示信息显示安装pycharm2019.3.1版本需要的JetBrains Runtime 11不支持windows 32位系统. 2.更换pycharm社区版的安装版本 百度找到解决办法,参考文章& ...

  10. sqlserver 数据导入MySQL

    sqlserver导出成Excel文件数据 为什么用Excel文件数据? sql文件不通用 CVS文件编码报错 text文件日期/时间戳报错 修改Excel文件中的日期字段 需要格式化日期字段为 yy ...