1、viewport实例

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />

    <title>vw/vh</title>

    <style>

        * {

            box-sizing: border-box;

            margin: 0;padding: 0;

        }

        body {

            display: flex;

            flex-direction: column;

            justify-content: center;

            height: 100vh;  /* 回退设置，如果浏览器不支持calc()和var(); */

            height: calc(var(--vh, 1vh) * 100); /* 如果浏览器器不支持var(--vh)写法，则可以看成calc(1vh * 100);如果支持，则是calc(var(--vh) * 100); */

        }

        header, main, footer {

            padding: 1rem;

        }

        header, footer {background: #9ed0d7}

        main {

            overflow-y: scroll;

            -webkit-flex-grow: 1;

            flex-grow:1;

            padding: 20px;

            background: #f5e0e0;

        }

        div {

            height: 1000px;

            font-size: inherit;

        }

        div p:nth-child(1) { 

        }

        div p:nth-child(2) {

            font-size: 12px;

        }

        div p:nth-child(3) {

            /*font-size: 12px + 2vw;*/

            font-size: calc(12px + 2vw); /* 375px下，字体大小为19.5px */

        }

    </style>

</head>

<body>

    <header>header</header>

    <main>

        <div>

            <p>Main content -- 3</p>

            <p>浏览器默认字体16px，移动最小12px，PC14px</p>

            <p>沉迷学习，日渐消瘦~</p>

        </div>

    </main>

    <footer>Footer</footer>

   <script>

       window.onload = function () {

           // 得到视口高度，乘以1%得到一个vh单位的值(不支持以1%代替0.01），这里只是一个单位vh的占比。

           var vh = window.innerHeight * 0.01;  

           // 将‘--vh’设置为文档根元素的一个属性,值为(innerHeight / 100)px

           //vw：只是占页面宽度的百分比值，比如，375px的宽度，1vw就是3.75px

           document.documentElement.style.setProperty('--vh', vh + 'px');

       }

   </script>

</body>

</html>

viewport布局的更多相关文章

  1. [转载]ExtJs4 笔记（9） Ext.Panel 面板控件、 Ext.window.Window 窗口控件、 Ext.container.Viewport 布局控件

    作者:李盼(Lipan)出处:[Lipan] (http://www.cnblogs.com/lipan/)版权声明:本文的版权归作者与博客园共有.转载时须注明本文的详细链接,否则作者将保留追究其法律 ...

  2. ExtJs4 笔记（9） Ext.Panel 面板控件、 Ext.window.Window 窗口控件、 Ext.container.Viewport 布局控件

    本篇讲解三个容器类控件. 一.面板控件 Ext.Panel 一个面板控件包括几个部分,有标题栏.工具栏.正文.按钮区.标题栏位于最上面,工具栏可以在四个位置放置,围绕中间部分正文,按钮区位于最小方.下 ...

  3. ExtJs Ext.panel.Panel和Ext.container.Viewport布局问题

    Ext.container.Viewport Ext.panel.Panel Viewport 它的布局会占用整个 body,也应该是这样,它会随着浏览器的高度和宽度的变化而变化. Panel 布局时 ...

  4. 移动web开发之视口viewport

    × 目录 [1]布局视口 [2]视觉视口 [3]理想视口[4]meta标签[5]总结 前面的话 在CSS标准文档中,视口viewport被称为初始包含块.这个初始包含块是所有CSS百分比宽度推算的根源 ...

  5. ExtJs4 笔记（14） layout 布局

    作者:李盼(Lipan)出处:[Lipan] (http://www.cnblogs.com/lipan/)版权声明:本文的版权归作者与博客园共有.转载时须注明本文的详细链接,否则作者将保留追究其法律 ...

  6. 移动前端中viewport(视口) 转

    移动前端中常说的 viewport (视口)就是浏览器显示页面内容的屏幕区域.其中涉及几个重要概念是 dpi ( device-independent pixel 设备逻辑像素 )和 CSS 像素之间 ...

  7. 浅谈viewport

    我们通常在写移动端页面时,往往都会在html页面中加入这样一段话 <meta name="viewport" content="width=device-width ...

  8. CSS3 & 页面布局

    相关链接 视频链接: CSS3 & 页面布局 CSS3与页面布局学习总结(一) CSS3与页面布局学习总结(二) CSS3与页面布局学习总结(三) CSS3与页面布局学习总结(四) CSS3与 ...

  9. 浅谈移动端三大viewport

    我们通常在写移动端页面时,往往都会在html页面中加入这样一段话 <meta name="viewport" content="width=device-width ...

随机推荐

  1. spring-boot-learning-RabbitMQ

    为什么需要MQ??? 异步处理: 场景: 用户注册后,需要发注册邮件和注册短信,传统的做法有两种 1.串行的方式 2.并行的方式` 用户注册-发送注册邮箱-发送注册短信都完成之后才结束返回给客户端 邮 ...

  2. 什么是多线程环境下的伪共享（false sharing）？

    伪共享是多线程系统(每个处理器有自己的局部缓存)中一个众所周知的性能问 题.伪共享发生在不同处理器的上的线程对变量的修改依赖于相同的缓存行,如 下图所示: 伪共享问题很难被发现,因为线程可能访问完全不 ...

  3. 顺利通过EMC试验（2）

    限制值 电磁波照射,静电放电敏感性

  4. Vue2的右键弹出菜单（vue-contextmenu）

    给大家推荐一个基于Vue2的右键弹出菜单插件,支持单一SPA页面以及可以在循环绑定中使用. 项目地址为:https://github.com/chIIC/vue-...demo1: 父组件绑定右键事件 ...

  5. 使用pyttsx3实现简单tts服务

    操作系统:Windows 10_x64 python版本:Python 3.9.2_x64 pyttsx3版本: 2.90   pyttsx3是一个tts引擎包装器,可对接SAPI5.NSSS(NSS ...

  6. Typora 设置图片自动上传

    使用 PicGo-Core(command line) 下载 PicGo-Core 依次点击 文件 -> 偏好设置 -> 图像 来到下图所示界面: 点击①位置选择 PicGo-Gore(c ...

  7. Spring-Bean依赖注入(引用数据类型和集合数据类型）

    为什么使用spring依赖注入详见–>依赖注入分析 1.创建实体类User类 package com.hao.domain; public class User { private String ...

  8. I/O 引脚

    我们以网卡举例 引脚,芯片,pcb板之间的关系非常紧密 1.引脚,又叫管脚,英文叫Pin. 就是从集成电路(芯片)内部电路引出与外围电路的接线,所有的引脚就构成了这块芯片的接口.引线末端的一段,通过软 ...

  9. C++内存空间管理

    C++内存空间管理 1.C++内存机制 1.栈(Stack),函数中的局部变量,由编译器负责分配释放,函数结束,变量释放. 2.堆(Heap),通过new 申请的内存,由delete或delete[] ...

  10. Java学习day24

    今天学习了IP地址.端口以及TCP/UDP通信协议 网络连接与过去的信件类似,需要知道对方的地址才能寄出去,在计算机网络中,我们的地址就是IP以及端口号 IP能用来唯一定位一台联网的计算机 本机的IP ...