1.浏览器兼容性: IE8-不支持,IOS7.1-不支持,android4.3-不支持

2. vh代表浏览器视口高度(100vh等于当前浏览器的整个高度)

3.vw代表浏览器视口的宽度 (100vw等于当前浏览器的整个宽度)

4.配合浏览器宽度达到不同的字体大小

      div {
width: 100vw;
height: 100vh;
background-color: pink;
}
p {
/* 以1920为例 默认字体为16 则等于1920/100/16 */
font-size: 0.83vw
}

vh搭配vw进行响应式布局的更多相关文章

  1. 前端(八)—— 高级布局:文档流、浮动布局、流式布局、定位布局、flex布局、响应布局

    高级布局:文档流.浮动布局.流式布局.定位布局.flex布局.响应布局 一.文档流 1.什么是文档流 将窗体自上而下分成一行一行,块级元素从上至下.行内元素在每行中从左至右的顺序依次排放元素 2.本质 ...

  2. CSS响应式布局学习笔记(多种方法解决响应式问题)

    在做web开发的工作中,会遇到需要我给页面根据设计的要求,进行响应式布局,这里跟大家分享下我对于响应式布局的解决方法: 我主要利用的是CSS3 媒体查询,即media queries,可以针对不同的媒 ...

  3. 【学习笔记】响应式布局的常用解决方案(媒体查询、百分比、rem、和vw/vh)

    原文转载:https://blog.csdn.net/sinat_17775997/article/details/81020417 一.媒体查询 不同物理分辨率的设备,在还原设计稿时,css中设置的 ...

  4. vw+vh+rem响应式布局

    科普下: 平时很少用的css单位: 1.长度单位: rem:相对长度单位.相对于根元素(即html元素)font-size计算值的倍数; vw:相对于视口的宽度.视口被均分为100单位的vw; vh: ...

  5. CSS3移动端vw+rem不依赖JS实现响应式布局

    1.前言 (1)vw/vh介绍 在使用之前,我们先简单了解一下什么是vw和rem以及它们的作用,vw是css3出现的一个新单位,它是"view width"缩写,定义为把当前屏幕分 ...

  6. Css3中自适应布局单位vh、vw

    视口单位(Viewport units) 什么是视口? 在桌面端,视口指的是在桌面端,指的是浏览器的可视区域:而在移动端,它涉及3个视口:Layout Viewport(布局视口),Visual Vi ...

  7. 响应式布局中的CSS相对量

    一个响应式布局,要能够根据设备屏幕尺寸的改变,动态的调整页面内容,展现不同的设计风格. 在进行响应式的 CSS 代码编写过程中,经常会用到一些相对尺寸,以达到相对定位的目的.例如,常见的响应式布局中需 ...

  8. CSS 中的rem,em,vh,vw一次说清楚

    关于css中的长度单位,我们用的最多就是px,因为他简单直接.但是当一套方案匹配不同终端时,px就会显得过于生硬,不容易变通. 然而rem,em,vh,vw就可以有效的解决这一问题.让我们来看看这些东 ...

  9. Python12/11--盒子的显隐/布局/z-index/流式布局思想

    1.盒子的显隐 display:none      在页面中不占位,采用定位布局后,显示隐藏都不会影响其他标签,不需要用动画处理时,一般用这个 opacoity : 0        在页面中占位,采 ...

随机推荐

  1. lucky 的 时光助理(3)

    今天lucky小姐哭笑不得的说, 昨天下班时跟经理一起走的时候, 地铁站手机被小偷偷走,那时一个人孤单单的,除了惊愕, 她不知道该去联系谁, 借了同事的手机,给家里打去电话. 她说,因为那是她唯一记得 ...

  2. 【MySQL】索引相关

    " 目录 普通索引 唯一索引 主键索引 组合索引 正确使用索引的情况 索引的注意事项 执行计划 axplain 慢日志记录 分页性能相关方案 索引是数据库中专门用于帮助用户快速查找数据的一种 ...

  3. 计算机二级-C语言-程序填空题-190110记录-文件写入与文件读出显示

    //给定程序功能是:从键盘输入若干行文本(每行不超过80个字符),写到文件myfile4.txt中,用-1(独立一行)作为字符串输入结束的标志,然后将文件的内容读到显示在屏幕上.文件的读写分别由自定义 ...

  4. 惠普台式机,如何选择U盘启动

    开机先连续点击键盘F9按键进入选择启动盘界面,找到自己的U盘(KingstonDataTraveler 3.0)

  5. Node.js 服务端处理图片

    Node 服务端处理图片 服务端进行图片处理是很常见的需求,但是Node在这一块相对来说比较薄弱.找了几个比较常见的模块来解决问题. gm GraphicsMagick for node 使用Open ...

  6. 【代码审计】VAuditDemo 文件包含漏洞

    在 index.php中先判断get过来的module是否设置了变量,如果已经设置,则包含module,并与字符串.inc拼接 inc格式一般是图标或者头像格式,因此我们可以初步判断,这个包含应该是基 ...

  7. juypter

    juypter 1.      jupyter 1.1.    它是什么? Jupyter Notebooks 是一款开源的网络应用,我们可以将其用于创建和共享代码与文档. 以前叫ipython no ...

  8. 【转】jenkins_pipeline语法详解

    pipeline 是一套运行于jenkins上的工作流框架,将原本独立运行于单个或者多个节点的任务连接起来,实现单个任务难以完成的复杂流程编排与可视化. pipeline 是jenkins2.X 最核 ...

  9. 【PAT甲级】1002 A+B for Polynomials (25 分)

    题意:给出两个多项式,计算两个多项式的和,并以指数从大到小输出多项式的指数个数,指数和系数. AAAAAccepted code: #include<bits/stdc++.h> usin ...

  10. 洛谷 P1886 滑动窗口(单调队列)

    嗯... 题目链接:https://www.luogu.org/problem/P1886 首先这道题很典型,是标准的单调队列的模板题(也有人说单调队列只能解决这一个问题).这道题可以手写一个队列,也 ...