开发单位 vmin/vmax

摘要

以前，写过一个仿B站移动端的项目；当时，项目适配用的是 vw，而现在B站移动端适配用的是 vmin，想了解 vmin/vmax 单位的作用，还有为什么B站移动端适配要采用 vmin。

vmin/vmax 概述

vw：与视口的宽度有关，1vw 就是视口宽度的 1%
vh：与视口的高度有关，1vh 就是视口高度的 1%
vmin：与当下视口的宽度和高度的最小值有关，取值为 vw 和 vh 中较小的那个
vmax：与当下视口的宽度和高度的最大值有关，取值为 vw 和 vh 中较大的那个

B站移动端适配为什么用 vmin 而不是用 vw ？

vmin 可以照顾移动端（手机端）横屏和竖屏的显示效果，保证移动开发中屏幕 旋转 之后的尺寸不变

vw 横屏：显示效果不好

vmin 横屏：显示效果好

开发单位 vmin/vmax相关推荐

css3中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况
px:绝对单位,页面按精确像素展示 em:相对单位,基准点为父节点字体的大小,如果自身定义了font-size按自身来计算(浏览器默认字体是16px),整个页面内1em不是一个固定的值. rem:相对 ...
px,em,rem,vh,vw,vmin,vmax的区别
css手册中关于font-size是这么介绍的: font-size 值可以是绝对或相对值. 绝对值: 将文本设置为指定的大小不允许用户在所有浏览器中改变文本大小(不利于可用性) 绝对大小在确定了输 ...
vw 前端_前端常用开发单位-vw
前端常用开发单位-vw 05-前端开发常用单位-vwvh *{ margin: 0; padding: 0; } /*div{*/ /* width: 10vmin;*/ /* height: 10v ...
20、CSS中单位：【px和%】【em和rem】【vw|vh|vmin|vmax】的区别
CSS中的px 和 % px (pixels) 是固定单位,也可以叫基本单位,代表像素,可以确保元素的大小不受屏幕分辨率的影响. % (percentage) 是相对单位,代表元素大小相对于其父元素或 ...
【前端基础】整理常见的单位 px em rem % vw vh vmin vmax rpx
基本单位单位计算方式简介 px 标准像素优点兼容性最好,缺点没有弹性,对于过大过小屏幕显示效果不好 em font-size元素大小 1em等于font-size的大小(font-size默认 ...
单位vw,vh,vmin,vmax的用法
vw:视窗宽度的百分比(1vw 代表视窗的宽度为 1%) vh:视窗高度的百分比 vmin:当前 vw 和 vh 中较小的一个值 vmax:当前 vw 和 vh 中较大的一个值
CSS查缺补漏之《常用长度单位(px、em、rem、%、vw/vh、vmin/vmax)》
此文内容较少,轻轻松松掌握,莫要有压力~ 正如现实生活中长度具有mm.dm.cm.m等,在css中,也具备多种长度单位,本文对常用的几种单位进行详细举例介绍~ px:像素单位初学css时,px单位经 ...
android与ios ui切图关系,iOS、Android 开发单位换算及 UI 切图要求
在移动端 UI 设计中,经常会用到的单位有 4 种:px.pt.dp 和 sp,很多人分辨不清这几种单位及其换算关系,以及 iOS 和 Android 的切图要求,我在这里做下简单的介绍,希望大家读完 ...
苹果切图换算android,iOS、Android 开发单位换算及 UI 切图要求
在移动端 UI 设计中,经常会用到的单位有 4 种:px.pt.dp 和 sp,很多人分辨不清这几种单位及其换算关系,以及 iOS 和 Android 的切图要求,我在这里做下简单的介绍,希望大家读完 ...
android切图尺寸_iOS、Android 开发单位换算及 UI 切图要求
一.常用单位 1. px (像素) px 即 pixel,像素点,电子屏幕上组成图像的最基本单位,在描述屏幕分辨率时也会使用该单位.1px 表示一个像素,例如 iPhone 8 的尺寸为 750px ...

开发单位 vmin/vmax

摘要

vmin/vmax 概述

B站移动端适配为什么用 vmin 而不是用 vw ？

开发单位 vmin/vmax相关推荐

最新文章

热门文章