<!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. 2020年第11届蓝桥杯C/C++B组 第一轮省赛

    # JJU-干干 试题 A: 跑步训练 代码: #include <stdio.h> #include <stdlib.h> /* run this program using ...

  2. OPENSSL 生成RSA公钥、私钥和证书

    在命令窗口执行下列操作. 1)生成RSA私钥: openssl genrsa -out rsa_private_key.pem 2048 生成内容: -----BEGIN RSA PRIVATE KE ...

  3. #硬件 #资讯 #科普 #短报 SSD价格跳水根本停不下来！不断刷出新低

    一份来自日本的统计显示,10~12月的初步统计显示,PC市场的指标产品中,256GB TLC颗粒SSD价格再次下跌2美元,现在只有29.5美元.这已经是该指标产品连续5个季度下跌,创下史上心底记录,同 ...

  4. CSS设置边距

    1.内边距 所有的 ​HTML ​元素基本都是以矩形为基础. 每个 HTML 元素周围的矩形空间由三个重要的属性来控制: ​padding(内边距)​ ​margin(外边距)​ ​border(边框 ...

  5. 【python】第一模块 步骤四 第一课、初始正则表达式

    第一课.初始正则表达式 一.课程介绍 1.1 课程概要 步骤介绍 正则表达式入门及应用 正则的进阶 案例 综合项目实战 二.正则表达式的基本操作(多敲代码多做练习) 2.1 什么是正则表达式 什么是正 ...

  6. Android studio Internet跳转活动

    <?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android=" ...

  7. Alibaba Cloud Linux 3.2104 64位安装mydumper-0.9.1

    1 下载 wget https://launchpad.net/mydumper/0.9/0.9.1/+download/mydumper-0.9.1.tar.gz tar -zxvf mydumpe ...

  8. centos 发送邮件

    安装mailx yum install -y mailx 配置邮件服务器信息 vi /etc/mail.rc set from=xxxx@yyy.com set smtp=smtp.yyy.com s ...

  9. Pytorch 60实例

    1 初识PyTorch¶ 1.1 张量 1.导入pytorch包 In [1]: import torch 2.创建一个未初始化的5x3张量 In [3]: x = torch.empty(5, 3) ...

  10. 转：MyBatis 日志打印

    版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/u012666996/article/details/79106599Mybatis SQL语句控制台 ...