viewport布局
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布局的更多相关文章
- [转载]ExtJs4 笔记（9） Ext.Panel 面板控件、 Ext.window.Window 窗口控件、 Ext.container.Viewport 布局控件
作者:李盼(Lipan)出处:[Lipan] (http://www.cnblogs.com/lipan/)版权声明:本文的版权归作者与博客园共有.转载时须注明本文的详细链接,否则作者将保留追究其法律 ...
- ExtJs4 笔记（9） Ext.Panel 面板控件、 Ext.window.Window 窗口控件、 Ext.container.Viewport 布局控件
本篇讲解三个容器类控件. 一.面板控件 Ext.Panel 一个面板控件包括几个部分,有标题栏.工具栏.正文.按钮区.标题栏位于最上面,工具栏可以在四个位置放置,围绕中间部分正文,按钮区位于最小方.下 ...
- ExtJs Ext.panel.Panel和Ext.container.Viewport布局问题
Ext.container.Viewport Ext.panel.Panel Viewport 它的布局会占用整个 body,也应该是这样,它会随着浏览器的高度和宽度的变化而变化. Panel 布局时 ...
- 移动web开发之视口viewport
× 目录 [1]布局视口 [2]视觉视口 [3]理想视口[4]meta标签[5]总结 前面的话 在CSS标准文档中,视口viewport被称为初始包含块.这个初始包含块是所有CSS百分比宽度推算的根源 ...
- ExtJs4 笔记（14） layout 布局
作者:李盼(Lipan)出处:[Lipan] (http://www.cnblogs.com/lipan/)版权声明:本文的版权归作者与博客园共有.转载时须注明本文的详细链接,否则作者将保留追究其法律 ...
- 移动前端中viewport(视口) 转
移动前端中常说的 viewport (视口)就是浏览器显示页面内容的屏幕区域.其中涉及几个重要概念是 dpi ( device-independent pixel 设备逻辑像素 )和 CSS 像素之间 ...
- 浅谈viewport
我们通常在写移动端页面时,往往都会在html页面中加入这样一段话 <meta name="viewport" content="width=device-width ...
- CSS3 & 页面布局
相关链接 视频链接: CSS3 & 页面布局 CSS3与页面布局学习总结(一) CSS3与页面布局学习总结(二) CSS3与页面布局学习总结(三) CSS3与页面布局学习总结(四) CSS3与 ...
- 浅谈移动端三大viewport
我们通常在写移动端页面时,往往都会在html页面中加入这样一段话 <meta name="viewport" content="width=device-width ...
随机推荐
- memcached 能接受的 key 的最大长度是多少？
key 的最大长度是 250 个字符.需要注意的是,250 是 memcached 服务器端内 部的限制,如果您使用的客户端支持"key 的前缀"或类似特性,那么 key(前缀 + ...
- 线程 B 怎么知道线程 A 修改了变量？
1.volatile 修饰变量 2.synchronized 修饰修改变量的方法 3.wait/notify 4.while 轮询
- C语言类型转换原理
C语言类型转换 int a; a=1.23 这里把1.23赋值给a发生了隐式转换,原理如下: int a; float b=3.14; a=b; b赋值给a的过程:首先找一个中间变量是a的类型(该例中 ...
- c/c++中的i++和++i的区别
使用 i++ vs. ++i i++是先赋值再加1 ++i是先加1再赋值 到目前为止,你已经学习了如何编写下面这样的 C++ for 循环: for (int i = 0; i < 10; i+ ...
- 你可以说出export export default || model.exports exports 的区别吗(一)
一.前言: 用模块写代码,为什么要用模块来写代码:ES6之前,在js中定义的一切,都是共享一个全局作用域的,随着web应用变得复杂,这样做会引起如:命名冲突和安全问题.于是引入了模块. 二.清楚一个概 ...
- jq移动端图片预览 (fly-zomm-img.js)
效果图: ===>==> 里面还与很多属性设置: index 关闭按钮等等 代码: //html-----------------------<div class="he ...
- DTO数据传输对象详解
文章目录 一.DTO是什么? 二.DTO解决的问题 三.代码演示 一.DTO是什么? DTO (数据传输对象) 数据传输对象(DTO),是一种设计模式之间传输数据的软件应用系统.数据传输目标往往是数据 ...
- 时间篇之centos7修复ntpq: read: Connection refused
关于ntp同步时间, 由于是解决问题,所以理论性内容不多. 关于UTC NTP要提供准确的时间,就必须有准确的时间来源,那可以用格林尼治时间吗?答案是否定的. 因为格林尼治时间是以地球自转为基础的时间 ...
- STL空间配置器源码分析（四）bitmap_allocator
一.摘要 bitmap_allocator是STL空间分配器的其中一种,它采用内存池策略,最多存储64条空闲链表(freelist,实际是一块空间连续的内存区,后面也称为超级块),每条空闲链表存储的内 ...
- 将mysql主从复制由ABB模式修改为ABC模式
最近遇到一个奇葩的需求,需要将mysql的主从复制模式由ABB修改为ABC,恰好这个mysql集群没有开启GTID,当时是在B上做了一次全量备份,然后使用该全量备份恢复C的方式进行的.做完之后在想有没 ...