vh搭配vw进行响应式布局
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进行响应式布局的更多相关文章
- 前端(八)—— 高级布局:文档流、浮动布局、流式布局、定位布局、flex布局、响应布局
高级布局:文档流.浮动布局.流式布局.定位布局.flex布局.响应布局 一.文档流 1.什么是文档流 将窗体自上而下分成一行一行,块级元素从上至下.行内元素在每行中从左至右的顺序依次排放元素 2.本质 ...
- CSS响应式布局学习笔记(多种方法解决响应式问题)
在做web开发的工作中,会遇到需要我给页面根据设计的要求,进行响应式布局,这里跟大家分享下我对于响应式布局的解决方法: 我主要利用的是CSS3 媒体查询,即media queries,可以针对不同的媒 ...
- 【学习笔记】响应式布局的常用解决方案(媒体查询、百分比、rem、和vw/vh)
原文转载:https://blog.csdn.net/sinat_17775997/article/details/81020417 一.媒体查询 不同物理分辨率的设备,在还原设计稿时,css中设置的 ...
- vw+vh+rem响应式布局
科普下: 平时很少用的css单位: 1.长度单位: rem:相对长度单位.相对于根元素(即html元素)font-size计算值的倍数; vw:相对于视口的宽度.视口被均分为100单位的vw; vh: ...
- CSS3移动端vw+rem不依赖JS实现响应式布局
1.前言 (1)vw/vh介绍 在使用之前,我们先简单了解一下什么是vw和rem以及它们的作用,vw是css3出现的一个新单位,它是"view width"缩写,定义为把当前屏幕分 ...
- Css3中自适应布局单位vh、vw
视口单位(Viewport units) 什么是视口? 在桌面端,视口指的是在桌面端,指的是浏览器的可视区域:而在移动端,它涉及3个视口:Layout Viewport(布局视口),Visual Vi ...
- 响应式布局中的CSS相对量
一个响应式布局,要能够根据设备屏幕尺寸的改变,动态的调整页面内容,展现不同的设计风格. 在进行响应式的 CSS 代码编写过程中,经常会用到一些相对尺寸,以达到相对定位的目的.例如,常见的响应式布局中需 ...
- CSS 中的rem,em,vh,vw一次说清楚
关于css中的长度单位,我们用的最多就是px,因为他简单直接.但是当一套方案匹配不同终端时,px就会显得过于生硬,不容易变通. 然而rem,em,vh,vw就可以有效的解决这一问题.让我们来看看这些东 ...
- Python12/11--盒子的显隐/布局/z-index/流式布局思想
1.盒子的显隐 display:none 在页面中不占位,采用定位布局后,显示隐藏都不会影响其他标签,不需要用动画处理时,一般用这个 opacoity : 0 在页面中占位,采 ...
随机推荐
- python函数1_参数,返回值和嵌套
函数 将重复的代码,封装到函数,只要使用直接找函数 函数可以增强代码的模块化和提高代码的重复利用率 函数的定义和调用 格式 def 函数名([参数,参数...]): 函数体 定义函数 import r ...
- Python中的浅复制、深复制
参考 https://docs.python.org/3/library/copy.html?highlight=copy%20copy#copy.copy https://en.wikipedia. ...
- 操作COOKIE的函数
一个同学慧涛分享给我的他写的操作cookie的函数,贴出来,做个笔记: //操作cookie //删除cookie hcookie('cookiename','','del'); //查询cookie ...
- 让一个div层于窗口中间位置
这几天写的前端代码比较多,为了体验更好,有时会让div弹层位于窗口中间,在百度找到这样一个答案: <style type="text/css"> #box{ posti ...
- ZOJ4117 BaoBao Loves Reading(2019山东省赛)
按照计划读书,第i分钟要读第ai本书,起初桌子是空的,所有书都在书架上,如果要读的书不在桌子上,就需要把书从书架上拿到桌子上,如果桌子已经满了,则需要先把桌子上最早读的一本书放回书架,求当桌子容量为k ...
- 吴裕雄--天生自然Numpy库学习笔记:NumPy 广播(Broadcast)
广播(Broadcast)是 numpy 对不同形状(shape)的数组进行数值计算的方式, 对数组的算术运算通常在相应的元素上进行. 如果两个数组 a 和 b 形状相同,即满足 a.shape == ...
- Python学习第二十三课——Mysql 表记录的一些基本操作 (查)
查(select * from 表名) 基本语法: select <字段1,字段2,...> from <表名> where <表达式>; 例如,查询student ...
- SSD算法
SSD算法 2016 出的目标检测算法 SSD效果主要有三点: 1.多尺度 2.设置了多种宽高比的(anchor box)default box 3.数据增强 1.1 设置 default box ...
- 安装PHP解析环境!
较新版本(如5.6)的PHP已经自带FPM(fastCGI process manager,FastCGI进程管理器)模块,用来对PHP解析实例进行管理,优化解析效率,因此在配置PHP编译选项时应添加 ...
- 安装插件报错error: Microsoft Visual C++ 14.0 is required. Get it with "Microsoft Visual C++
起因:学到多线程greenlet模块时,greenlet模块死活装不上,以为pycharm坏掉了,浪费了一下午. #pip3 install greenlet from greenlet import ...