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

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

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

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

  1. div {
  2. width: 100vw;
  3. height: 100vh;
  4. background-color: pink;
  5. }
  6. p {
  7. /* 以1920为例 默认字体为16 则等于1920/100/16 */
  8. font-size: 0.83vw
  9. }

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. python函数1_参数,返回值和嵌套

    函数 将重复的代码,封装到函数,只要使用直接找函数 函数可以增强代码的模块化和提高代码的重复利用率 函数的定义和调用 格式 def 函数名([参数,参数...]): 函数体 定义函数 import r ...

  2. Python中的浅复制、深复制

    参考 https://docs.python.org/3/library/copy.html?highlight=copy%20copy#copy.copy https://en.wikipedia. ...

  3. 操作COOKIE的函数

    一个同学慧涛分享给我的他写的操作cookie的函数,贴出来,做个笔记: //操作cookie //删除cookie hcookie('cookiename','','del'); //查询cookie ...

  4. 让一个div层于窗口中间位置

    这几天写的前端代码比较多,为了体验更好,有时会让div弹层位于窗口中间,在百度找到这样一个答案: <style type="text/css"> #box{ posti ...

  5. ZOJ4117 BaoBao Loves Reading(2019山东省赛)

    按照计划读书,第i分钟要读第ai本书,起初桌子是空的,所有书都在书架上,如果要读的书不在桌子上,就需要把书从书架上拿到桌子上,如果桌子已经满了,则需要先把桌子上最早读的一本书放回书架,求当桌子容量为k ...

  6. 吴裕雄--天生自然Numpy库学习笔记:NumPy 广播(Broadcast)

    广播(Broadcast)是 numpy 对不同形状(shape)的数组进行数值计算的方式, 对数组的算术运算通常在相应的元素上进行. 如果两个数组 a 和 b 形状相同,即满足 a.shape == ...

  7. Python学习第二十三课——Mysql 表记录的一些基本操作 (查)

    查(select * from 表名) 基本语法: select <字段1,字段2,...> from <表名> where <表达式>; 例如,查询student ...

  8. SSD算法

    SSD算法 2016  出的目标检测算法 SSD效果主要有三点: 1.多尺度 2.设置了多种宽高比的(anchor box)default box 3.数据增强 1.1  设置 default box ...

  9. 安装PHP解析环境!

    较新版本(如5.6)的PHP已经自带FPM(fastCGI process manager,FastCGI进程管理器)模块,用来对PHP解析实例进行管理,优化解析效率,因此在配置PHP编译选项时应添加 ...

  10. 安装插件报错error: Microsoft Visual C++ 14.0 is required. Get it with "Microsoft Visual C++

    起因:学到多线程greenlet模块时,greenlet模块死活装不上,以为pycharm坏掉了,浪费了一下午. #pip3 install greenlet from greenlet import ...