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 在页面中占位,采 ...
随机推荐
- C++(MFC)踩坑之旅 ------- 新建项目弹出“发生一个或多个错误”
结束隔离,回公司上班,把在家办公的程序考回公司的电脑,结果出错了,每当我新建项目时,都会弹出"发生一个或多个错误",点确定后回到新建项目的设置上面,折腾了两天时间才解决,以下是我的 ...
- Codeforces Round #602 (Div. 2, based on Technocup 2020 Elimination Round 3) - D2. Optimal Subsequences (Hard Version)(主席树)
题意:一共有$n$个数,$m$次询问,每次询问包括$k.pos$两个数,需要你从这$n$个数里面找出$k$个数,使得他们的总和最大,如果有多种情况,找出序号字典序最小的一组,然后输出这个序列中第$po ...
- P1149
这题不难,我写的一个复杂度 $ O(n^2) $ 的递归算法.. #include <bits/stdc++.h> using namespace std; #define rep(i, ...
- .NET中的字符串(5):字符串驻留
StringBuilder对象 通过上面的分析可以看出,String类型在做字符串的连接操作时,效率是相当低的,并且由于每做一个连接操作,都会在内存中创建一个新的对象,占用了大量的内存空间.这样就引出 ...
- 计划任务cron,date,时间同步ntp,chrony
取出磁盘利用率最大值 ,写个脚本,做判断,只要快满了,就报警 计划周期性执行的任务提交给crond,到指定时间会自动运行 系统cron任务:系统维护作业 /etc/crontab 用户cron任务: ...
- ASA设置某些log不发送到log server
If you want to suppress a specific syslog message to be sent to syslog server, then you must enter t ...
- Manacher算法--O(n)回文子串算法
转自:http://blog.csdn.net/ggggiqnypgjg/article/details/6645824 O(n)回文子串算法 注:转载的这篇文章,我发现下面那个源代码有点bug... ...
- Python版GPA计算器
最近在网申投简历时遇到一个需要计算GPA的问题,想起自己在上学时写的Excel公式版GPA计算器略显low,而且操作也比较复杂,于是一时兴起,写了个Python版的,在此分享给大家,也算是跟上时代的浪 ...
- python浅析格式化输出和深浅copy
一,格式化输出 今天主要想记录一下关于格式化输出的例子,然后结合了自己的理解,分析如下: 格式是 :百分号+占位符 主要有三种使用形式:%s (其中s表示string)表示字符串 %d (其中d表 ...
- C/C++ scanf和gets 区别 , printf和puts区别
ref 1. scanf和gets区别 | 博客园 2. printf和puts区别 | CSDN scanf和gets都能从输入流stdin读取字符串,那么它们有什么区别呢? scanf 留回车:开 ...