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. java-流式编程

    流式编程 流的一个核心好处是,它使得程序更加短小并且更易理解. public class Demo1 { public static void main(String[] args) { new Ra ...

  2. 什么是持续集成CI？

    持续集成(CI)是每次团队成员提交版本控制更改时自动构建和测试代码的过程. 这鼓励开发人员通过在每个小任务完成后将更改合并到共享版本控制存储库来共 享代码和单元测试.

  3. IOC 初始化源代码阅读之我见

    由于本人的能力有限,只能说出自己的见解,如有错漏什么的,请大家批评指出.由于代码封装太多,这里只列出了我认为的部分最重要的代码,一些简单的封装代码,不在下面列出.由于代码太过于复杂,在本次博客中,只列 ...

  4. CEPH-3：cephfs功能详解

    ceph集群cephfs使用详解 一个完整的ceph集群,可以提供块存储.文件系统和对象存储. 本节主要介绍文件系统cephfs功能如何灵活的使用,集群背景: [cephadmin@yq01-aip- ...

  5. POJ 2236：Wireless Network

    描述 n台电脑,如果两台电脑间的距离的d范围内,则两台电脑能够连通. 如果AB连通,BC连通,则认为AC连通. 已知电脑台数N,最大距离d,以及每个电脑的坐标.有如下两种操作: O i 表示修复编号为 ...

  6. 针对于iosAPP内嵌H5，-webit-overflow-scrolling:touch;产生空白情况

    问题描述:一个内嵌IOSAPP的H5页面,长页面,大概1.6个屏幕高度,由于有列表滑动起来很不流畅,所以用了-webit-overflow-scrolling:touch;这个只针对ios端的物理滚动 ...

  7. react、react-router、redux 也许是最佳小实践1

    小前言 这是一个小小的有关react的小例子,希望通过一个小例子,可以让新手更好的了解到react.react-router4.0.redux的集中使用方法. 这是基于create-react-app ...

  8. java Web开发实现手机拍照上传到服务器

    第一步: 搭环境,基本jdk 1.6+apache tomcat6.0+myeclipse2014 1.我们要清楚自己的jdk版本.因为我们Apache Tomcat配置的成功的前提是版本相对应. 安 ...

  9. 如何使用vue-cli搭建好的项目

    本人是一枚前端小白,也是从零开始学习vue.js.由于闲着蛋疼,写一点自己的经验,可能有点low.是新手想上道的话,可以看看,如果有大神,也可以给我指导一下,小生感激不尽. 关于如何使用vue-cli ...

  10. 小程序wx.previewImage查看图片再次点击返回时重新加载页面问题

    wx.previewImage预览图片这个过程到底发生了什么? 首先我们点击图片预览,附上查看图片代码: <image class="headImg" data-src=&q ...