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 在页面中占位,采 ...
随机推荐
- 总结String类的常用方法
总结String类的常用方法 1. 获取字符串长度 public int length() 2. 获取字符串某一位置的字符 public char charAt(int index) 注意:字符串中第 ...
- C语言笔记 11_头文件&强制类型转换&错误处理&递归
头文件 头文件是扩展名为 .h 的文件,包含了 C 函数声明和宏定义,被多个源文件中引用共享.有两种类型的头文件:程序员编写的头文件和编译器自带的头文件. 在程序中要使用头文件,需要使用 C 预处理指 ...
- 登录oracle ORA-12541: TNS:no listener报错
初次安装Oracle是通过VMware在虚拟机上安装的,安装Oracle过程,解锁了两个用户,分别是Scott和HR,也设置了密码,安装完成后输入sqlplus scott/admin123(scot ...
- 高级T-SQL进阶系列 (一)【下篇】:使用 CROSS JOIN 介绍高级T-SQL
[译注:此文为翻译,由于本人水平所限,疏漏在所难免,欢迎探讨指正] 原文链接:传送门. 性能考虑产生了笛卡尔积的这个CROSS JOIN操作符具有一些性能方面的问题需要考虑.因为SQL引擎需要将一个数 ...
- TomcatJVM参数优化降低内存使用率(重点)!
JVM是jdk最底层的支柱 做JVM参数优化主要是为了改善服务器性能以及内存使用率 JAVA堆分为三大部分:(新生代.老年代.永久代) ================================ ...
- 关于PGSQL连接问题
今天把运维管理服务移植在Linux下测试,但又不想在Linux中安装PGSQL的服务器,就想让运维管理服务在虚拟机中连接windows的PG服务,却发现PG服务器一直拒绝连接,检查了网络端口之后都没问 ...
- Centos610安装Oracle
官方安装参考 第一部分 依赖包 依赖包安全前先桌面安装 安装依赖包 yum -y install gcc gcc-c++ make binutils compat-libstdc++-33 elfut ...
- AF(操作者框架)系列(1)-LabVIEW中的模块化应用概述
一.引子 在前面对LabVIEW介绍的文章中,关于框架开发的内容涉及很少.为了讲解操作者框架(Actor Framework)的优缺点,也只是拿出来QDSM(Queue-Driven State Ma ...
- 【协作式原创】查漏补缺之Go并发问题(单核多核)
主要回答一下几个问题 1.单核并发问题 2.多核并发问题 2.几个不正确的同步案例 1.单核并发问题 先看一段go(1.11)代码: 单核CPU,1万个携程,每个携程执行100次+1操作, 思考n最终 ...
- 1.项目创建及集成git
1.创建项目 (1)创建完以后,打开Terminal命令行,输入"git init"用于初始化本地仓库 (2)打开对应的项目文件夹,“Ctrl+h”可以查看该文件夹里是否存在.gi ...