<!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. 学习Vue踩过的坑

    1.用Vue绑定方法的时候里面的methods:要加s!!! 2.v-on只有在事件监听(@click=" 方法名")和不需要参数时候才不要加 ( ),在胡子写法中{{ fun() ...

  2. 04 ajax执行php并传递参数

    做这个事情之前要导入jQuery js的方式 _this.value1 = "abc"; _this.value2 = 1; $.ajax({ url: 'xxxxxx.php', ...

  3. C和C++内存分配语法补充

    NOTE: 动态内存分配:需要加载头文件<stdlib.h>malloc(m):开辟m字节长度的地址空间,并返回首地址sizeof(x):计算变量x的长度free(p):释放指针p所指的存 ...

  4. 12.8 linux学习第十五天

    今天老刘讲了第11章和第12章,感觉讲的速度很快,一气呵成,水都没怎么喝. 11.1 文件传输协议 一般来讲,人们将计算机联网的首要目的就是获取资料,而文件传输是一种非常重要的获取资料的方式.今天的互 ...

  5. linux中安装启动postgresql教程

    安装: 官网地址:https://www.postgresql.org 选择下载版本: https://www.postgresql.org/ftp/source 下载方式: wget https:/ ...

  6. web自动化测试—Firefox安装与配置

    web自动化测试-Firefox安装与配置 下一步 下一步 下一步 下一步 下一步 下一步 下一步 下一步 下一步设置不更新 下一步添加插件 下一步 下一步 下一步 下一步立即重启 下一步查看插件 在 ...

  7. 探测域名解析依赖关系（运行问题解决No module named 'DNS'）

    探测域名解析依赖关系 最近很懒,今天晚上才开始这个任务,然后发现我原来能跑起来的程序跑不起来了. 一直报错 ModuleNotFoundError: No module named 'DNS' 这个应 ...

  8. Crypto入门 （三）Morse

    前言: Morse电码(Morsecode)是大家耳熟能详的编码方式,很多人都误认为它是一种加密方式,但其实它是一种编码,因为它并不存在密钥.在只能使用电报长短音传递信息的条件下,使用摩斯电码是为了方 ...

  9. 思考20230208-关于chatGPT

    最近的ChatGPT火了,我今天FQ.充了1 USD买了个虚拟手机号创建了openAI 的账号,试了一把,它的表现令我叹为观止.他已经不再是简单的基于海量数据在网络上搜索已有的答案,而是会根据用户的想 ...

  10. Mysql用户及其权限

    一.创建用户 create user 'user_name' identified by 'password'; 二.用户授权 grant [权限名] on 数据库名.表名 to user_name ...