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 在页面中占位,采 ...
随机推荐
- QM[中控群控云控]01. 中控原理
QM[中控群控云控]01. 中控原理 虽然自己对于中控有了解 也自己做过一些简单中控 不过看看紫猫老师的思路 应该有很多帮助和提高 中控核心:数据交流而已 脚本端和服务端之间的信息交换 ------个 ...
- Linux上FTP部署:基于mariadb管理虚拟用户
FTP原理 FTP 采用 Internet 标准文件传输协议 FTP 的用户界面, 向用户提供了一组用来管理计算机之间文件传输的应用程序.图1 FTP 的基本模型 FTP 是基于客户---服务器(C/ ...
- SIMS(secondary ion mass spectroscopy)二次离子质谱
1.仪器介绍 二次离子质谱(SIMS)是一种用于通过用聚焦的一次离子束溅射样品表面并收集和分析喷射的二次离子来分析固体表面和薄膜的组成的技术.SIMS是最灵敏的表面分析技术,元素检测限为百万分之几到十 ...
- 在HTML中实现两个div并排显示
在HTML中让两个div并排显示,通常情况下有三种实现方式,包括: (1)设置为行内样式,display:inline-block (2)设置float浮动 (3)设置position定位属性为abs ...
- CSS-自适应网页使用@media和rem
@media 查询 @media 媒体查询选择性加载css,意思是自动探测屏幕宽度,然后加载相应的CSS文件.可以针对不同的屏幕尺寸设置不同的样式,特别是需要设置设计响应式的页面,@media 是个不 ...
- JavaSE复习~基本语法规则
java程序的基本结构 java程序的文件后缀为 .java 一个java文件中可以写许多内容,但有且只能有一个 public 修饰的 class 类(class)是Java程序中所有源代码的基本组成 ...
- Catalyst 3850 升级-1
Cisco Catalyst 3850交换机使用Cisco IOS XE软件. Cisco IOS XE软件是一个包含一组包文件的一个集合. 我们可以使用以下两种模式之一在Cisco Catalyst ...
- [WC2018]州区划分(状压,子集卷积)
[洛谷题面]https://www.luogu.org/problemnew/show/P4221 首先考虑判定一个子图是否合法: (1)连通:并查集判断即可. (2)没有欧拉回路:存在欧拉回路的条件 ...
- java编译问题之Description Resource Path Location Type Java compiler level does not match the version of
project 编译问题,需要三处的jdk版本要保持一致,才能编译通过. 1.在项目上右键properties->project Facets->修改右侧的version 保持一致 2. ...
- 无法获得锁/var/lib/dpkg/lock - open(11.资源暂时不可用)
E:无法获得锁/var/lib/dpkg/lock - open(11.资源暂时不可用) E:无法锁定资源目录(/var/lib/dpkg)是否有其他进程正占用它? 解决方案: sudo rm /v ...