<!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. VirtualBox_Ubuntu22.10_Terminal无法打开

    https://blog.csdn.net/weixin_43959807/article/details/128872860

  2. mapboxGL2离线化应用

    https://blog.csdn.net/GISShiXiSheng/article/details/120300679?spm=1001.2014.3001.5501

  3. python:包含’e’和‘-’的 str 转 float

    from functools import reduce def str2float(s): s = s.split('.') a = s[0] b = s[1] if a[0] == '-': a ...

  4. UEC++学习(1)

    第三章 流程控制 第一节 C++和蓝图循环 ForLoop蓝图节点相当于C++中的for循环,ForeLoopWithBreak节点相当于for循环体中加了break语句,当触发某个条件时直接结束. ...

  5. 上分之路 VP Codeforces Round #744 (Div. 3) ABDE

    VP情况 4 / 8 AC: A,B,D,E1 60 minutes WA: C 4 127   +00:02 +00:28 -7 +00:58 +00:39       手速还在线 D pair排个 ...

  6. centos6放行防火墙8080端口操作

    1. 进入防火墙文件: [ vi /etc/sysconfig/iptables ] 2. 放行8080端口: [ -A RH-Firewall-1-INPUT -m state --state NE ...

  7. vue引入多个指令文件

    单个指令引入,在main.js(入口JS文件)中引入你已经写好的指令文件,可以省略文件后缀: // main.js import focus from 'xxx/directive'多个指令引入 Vu ...

  8. NOIP2019 树的重心

    Description \[\sum_{(u,v)\in E}\Biggl(\sum_{x为S_u重心}x+\sum_{y为S_v重心}y\Biggr) \] \(1\leqslant n\leqsl ...

  9. auto 类型说明符

    编程时常常需要把表达式的值赋给变量,这就要求在声明变量时清楚地知道表达式的类型.然而做到这一点并非那么容易,有时候甚至根本做不到.为了解决这个问题,c++11新标准引入了auto类型说明符,用它就能让 ...

  10. python学习记录（一）-基础

    交换变量值 a,b = 10,20 print(a,b) #10 20 a,b = b,a print(a,b) #20 10 大字符串 str = '''最近在看的动漫: 黑之契约者.咒术回战... ...