rem+vw简单适配

2024-04-07 04:16:07

rem+vw简单适配

什么是vw和vh?
vw : 1vw 等于视口宽度的1%
vh : 1vh 等于视口高度的1%
vmin : 选取 vw 和 vh 中最小的那个
vmax : 选取 vw 和 vh 中最大的那个

1.设置meta标签

    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">

2.设置html的font-size大小

html {font-size: 13.333333vw;
}

为什么font-size=13.33333333vw?

我们的设计稿通常是750px的,屏幕一共是100vw,对应750px,那么1px就是0.1333333vw。同时我们知道rem,rem是相对html元素的字体大小，为了方便计算,我们取html的font-size=100px(这个是可以人为指定的，指定100px，那就是1rem = 100px,如果只从rem考虑就是划分了7.5等份，如果你不取100px,取75px也可以，那就是1rem=75px，750px屏幕划分成了10等份),通过上面的计算结果1px是0.13333333vw,那么100px就是13.333333vw了。

当我们通过ps测量一个div的大小为 width:300px,height:100px时，我们就可以这样写，ps量出来的像素直接除以100，计算小数很方便

.search-box {width: 3rem;height: 1rem;background-color: pink;
}

演示效果：

rem+vw适配解决了小数问题，但是兼容性不太好，所以看大家怎么选择了

rem+vw简单适配相关推荐

rem + vw 移动端适配
首先,关于移动端适配,很多种方式如:媒体查询,媒体查询media+rem,js+rem等都可以完成适配,个人最近写移动端demo的时候发现rem+vw的适配真的很好用,特此来简单总结一下基本的用法 1 ...
css3vw适配_小tips：使用rem+vw实现简单的移动端适配
首先设置meta属性,如下代码: 使用如下代码就能实现移动端的适配: html { font-size: -webkit-calc(13.33333333vw); font-size: calc(13 ...
H5移动端适配方案rem/vw
前言在讲解适配方案之前,我们聊聊为什么要做适配? 因为视口.逻辑像素.分辨率这些变量的不同,在每个设备展示都不一样,需要一种方案来统一. 物理像素:也就是分辨率,一个物理像素是显示器上的最小的物理显 ...
移动端适配方案(rem和vw vh适配)(css预处理器-less)
适配方案: 目前移动端适配方案有两种: 1.flex+rem单位当前市面上用的比较多相对主流(比如小米和淘宝移动端) 2.flex+viewport width/viewport height(v ...
超详细的rem+vw移动端屏幕适配方案
在说具体内容之前,我们必须了解几个概念,就是:Retina屏.物理像素.设备独立像素.设备像素比在CSS中我们一般使用px作为单位,需要注意的是,CSS样式里面的px和物理像素并不是相等的.CSS中 ...
PC端的一些简单适配
PC端的一些简单适配不同比例的屏幕需要展示的内容一样 16:9 24:9 32:9的屏幕比例需要显示同样的内容主要是使用的是rem布局, 这里通过调节不同分辨率的时候, 左边盒子和中间盒子的宽度比 ...
移动端适配--概述、简单适配原理、通用适配方案实现
使页面在移动端各种大小的屏幕上都能够正常显示的一种移动端开放方案一.概述 1.1 什么是移动端主要是一些手持设备,最具有代表性就是手机和平板,比如智能手表,掌上游戏机等移动设备: 在前端开发中,移 ...
Vite + Vue3 项目中，使用 vw/vh 适配移动端，并通过 Android Studio 打包
目录 1. 使用 vw/vh 适配移动端 1.1 使用 vite 初始化项目 1.2 安装插件,将 px 转化成 vw 1.2.1 在 vite.config.ts 中,声明插件 1.2.2 手写 p ...
关于px/rem/vw 之间的换算关系
搞移动端有段时间了,从最开始为了适应移动端,前辈就告诉我使用px值除以3.75换算成vw,一直稀里糊涂的谨遵教诲,却不知道为什么要这样做,今天有时间查了资料,自己理解去一下一:首先理解三个单位的区别 ...

最新文章

热门文章