移动端基础-vw适配

什么是vw

相对单位

相对视口的尺寸

vw:viewport width

换算 1vw=1/100视口宽度

vw不需要向rem一样检查视口宽度

若视口宽为375px

1vw=3.75px

vw与vmin的区别

vmin更照顾横竖屏问题

1vw是视口宽度的100%,而vmin是找宽度和高度中最小的那个,这样横屏看着更舒服

左图单位为vmin,右图用vw

案例

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport"content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"><title>bilibili-干杯~~~</title><link rel="shortcut icon" href="https://www.bilibili.com/favicon.ico"><link rel="stylesheet" href="css/初始化表.css"><link rel="stylesheet" href="css/index.css"><meta name="keywords" content="..." /><style>/*写代码时始终要考虑权重问题!*/@font-face {font-family: 'icomoon';src: url('fonts/icomoon.eot?au9n7q');src: url('fonts/icomoon.eot?au9n7q#iefix') format('embedded-opentype'),url('fonts/icomoon.ttf?au9n7q') format('truetype'),url('fonts/icomoon.woff?au9n7q') format('woff'),url('fonts/icomoon.svg?au9n7q#icomoon') format('svg');font-weight: normal;font-style: normal;font-display: block;}</style></head><body><header class="suspension"><div class="m-navbar"><a href="#" class="logo"><imgsrc="https://s1.hdslb.com/bfs/static/jinkela/long/mstation/logo-bilibili-pink.png@132w_60h_1c.webp"alt=""></a><div class="right"><a href="#" class="search"><i></i></a><a href="#" class="face"><imgsrc="https://gss0.baidu.com/94o3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/2e2eb9389b504fc2f5b3daa7e3dde71191ef6da7.jpg"alt=""></a><div class="app-btn"><span>下载&nbsp;App</span></div></div></div><div class="channel-menu"><div class="tabs"><div class="tabs-list"><a href="#">首页</a><a href="#">动画</a><a href="#">番剧</a><a href="#">国创</a><a href="#">音乐</a><a href="#">舞蹈</a><a href="#">游戏</a><a href="#">知识</a><a href="#">科技</a><a href="#">运动</a><div class="line-red"></div></div></div><div class="after"><i></i></div></div></header><div class="m-home"><div class="video-list"><a href="#" class="video-item"><div class="card"><img src="https://b.zol-img.com.cn/soft/6/485/cecqQ9WB4lCHo.jpg" alt=""><div class="count"><span> 138.4万</span><span> 1323</span></div></div><div class="title"><p class="ellipsis-2">实现了课程代码看了没开空间即可健康科技就去玩儿拖与为哦屁以以以以以以看就看就看门</p></div></a><a href="#" class="video-item"><div class="card"><img src="https://ts1.cn.mm.bing.net/th/id/R-C.eeb604212956104615f7a7e89c751279?rik=0WpNokXl3cxgYA&riu=http%3a%2f%2fimg.61gequ.com%2fallimg%2f2011-11%2f2011111717442479365.jpg&ehk=I20lC0zcaTtnYfLm%2feTkMr8sOhcmqRRhgJaGPY7%2bSRE%3d&risl=&pid=ImgRaw&r=0" alt=""><div class="count"><span> 138.4万</span><span> 1323</span></div></div><div class="title"><p class="ellipsis-2">实现了课程代码看了没开空间即可健康科技就去玩儿拖与为哦屁以以以以以以看就看就看门</p></div></a><a href="#" class="video-item"><div class="card"><img src="https://ts1.cn.mm.bing.net/th/id/R-C.2feeaf1a4658fa470ddb04e6affca7e1?rik=6YtiVjqkb0C9hA&riu=http%3a%2f%2fpic8.58cdn.com.cn%2fp1%2fbig%2fn_v1bl2lwtiprh2fqtmtr4nq_4b902c3d9f8abab8.jpg&ehk=K7aJ7tE8P15YDR7%2fR%2bPCEA9MB6Vl%2fFOxCG5E8RgPdjE%3d&risl=&pid=ImgRaw&r=0" alt=""><div class="count"><span> 138.4万</span><span> 1323</span></div></div><div class="title"><p class="ellipsis-2">实现了课程代码看了没开空间即可健康科技就去玩儿拖与为哦屁以以以以以以看就看就看门</p></div></a><a href="#" class="video-item"><div class="card"><img src="https://b.zol-img.com.cn/soft/6/485/cecqQ9WB4lCHo.jpg" alt=""><div class="count"><span> 138.4万</span><span> 1323</span></div></div><div class="title"><p class="ellipsis-2">实现了课程代码看了没开空间即可健康科技就去玩儿拖与为哦屁以以以以以以看就看就看门</p></div></a><a href="#" class="video-item"><div class="card"><img src="https://b.zol-img.com.cn/soft/6/485/cecqQ9WB4lCHo.jpg" alt=""><div class="count"><span> 138.4万</span><span> 1323</span></div></div><div class="title"><p class="ellipsis-2">实现了课程代码看了没开空间即可健康科技就去玩儿拖与为哦屁以以以以以以看就看就看门</p></div></a><a href="#" class="video-item"><div class="card"><img src="https://b.zol-img.com.cn/soft/6/485/cecqQ9WB4lCHo.jpg" alt=""><div class="count"><span> 138.4万</span><span> 1323</span></div></div><div class="title"><p class="ellipsis-2">实现了课程代码看了没开空间即可健康科技就去玩儿拖与为哦屁以以以以以以看就看就看门</p></div></a><a href="#" class="video-item"><div class="card"><img src="https://b.zol-img.com.cn/soft/6/485/cecqQ9WB4lCHo.jpg" alt=""><div class="count"><span> 138.4万</span><span> 1323</span></div></div><div class="title"><p class="ellipsis-2">实现了课程代码看了没开空间即可健康科技就去玩儿拖与为哦屁以以以以以以看就看就看门</p></div></a><a href="#" class="video-item"><div class="card"><img src="https://b.zol-img.com.cn/soft/6/485/cecqQ9WB4lCHo.jpg" alt=""><div class="count"><span> 138.4万</span><span> 1323</span></div></div><div class="title"><p class="ellipsis-2">实现了课程代码看了没开空间即可健康科技就去玩儿拖与为哦屁以以以以以以看就看就看门</p></div></a></div><a class="bottom"><span>打开App,看你感兴趣的视频</span></a></div>
</body></html>
@baseSize: 3.75vw;.suspension {z-index: 1;position: fixed;top: 0;left: 0;width: 100%;background-color: #fff;.m-navbar {padding: 0 (12 / @baseSize) 0 (18 / @baseSize);display: flex;justify-content: space-between;align-items: center;height: (44 / @baseSize);.logo {img {width: (66 / @baseSize);}}.right {display: flex;.search {i {color: #ccc;font-family: 'icomoon';font-size: (19 / @baseSize);}}.face {width: (24 / @baseSize);height: (24 / @baseSize);margin: 0 (20 / @baseSize);img {width: 100%;height: 100%;border-radius: 50%;}}.app-btn {border-radius: 4px;width: (72 / @baseSize);height: (24 / @baseSize);background-color: rgb(246, 14, 172);span {display: flex;justify-content: center;color: #fff;font-size: (14 / @baseSize);}}}}
}.channel-menu {display: flex;justify-content: space-between;height: (40 / @baseSize);background-color: #fff;border-bottom: 1px solid #e8e5e5;.tabs {overflow: hidden;flex: 1;position: relative;.tabs-list {display: flex;a {padding: 0 (16 / @baseSize);white-space: nowrap;font-size: (14 / @baseSize);line-height: (40 / @baseSize);}.line-red {width: (28 / @baseSize);height: (2 / @baseSize);background-color: #fb7299;position: absolute;left: (16 / @baseSize);bottom: 0;}}}.after {width: (40 / @baseSize);height: (39 / @baseSize);text-align: center;line-height: (40 / @baseSize);background-color: #fff;i {color: #ccc;font-family: 'icomoon';font-size: (19 / @baseSize);}}
}.m-home {padding: (85 / @baseSize) (5 / @baseSize) 0;.bottom {height: (38 / @baseSize);width: (351 / @baseSize);position: fixed;background-color: #fb7299;bottom: (20 / @baseSize);left: auto;border-radius: ((37 / 2) / @baseSize);text-align: center;line-height: (38 / @baseSize);span {color: #fff;font-size: (12 / @baseSize);}}.video-list {display: flex;flex-wrap: wrap;.video-item {width: 50%;padding: (8 / @baseSize) (5 / @baseSize);.title {width: 100%;height: (42 / @baseSize);margin-top: (5 / @baseSize);.ellipsis-2 {font-size: (12 / @baseSize);}}.card {position: relative;height: (97 / @baseSize);width: 100%;img {height: 100%;width: 100%;}.count {position: absolute;height: (27 / @baseSize);left: 0;bottom: 0;width: 100%;padding: (5 / @baseSize);display: flex;justify-content: space-between;align-items: center;background-image: linear-gradient(transparent, rgb(55, 54, 54));span {font-size: (12 / @baseSize);font-family: 'icomoon';color: #fff;}}}}}
}

效果: 

                                

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/668670.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

RFID快递物流包装仓储管理与追踪解决方案

RFID技术在快递物流、包装和仓储管理领域有着广泛的应用&#xff0c;通过为每个货物、托盘、周转箱、围板箱等物品添加RFID标签&#xff0c;为它们赋予独特的身份识别码&#xff0c;并通过RFID读写器在各个仓储业务节点进行管理和追踪&#xff0c;RFID技术具有远距离快速识别的…

CSS 闪电按钮效果

<template><view class="const"><div class="voltage-button"><button>闪电按钮</button><svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox=&q…

python中的web框架介绍

目录 一&#xff1a;框架介绍 二&#xff1a;框架安装 Python中有许多流行的Web框架,以下是一些最受欢迎的框架&#xff1a; 一&#xff1a;框架介绍 1: Django Django是一个高级Python Web框架&#xff0c;它鼓励快速开发和干净的设计。Django的主要特点是其强大的ORM&am…

L1-037 A除以B-java

输入样例1&#xff1a; -1 2输出样例1&#xff1a; -1/2-0.50输入样例2&#xff1a; 1 -3输出样例2&#xff1a; 1/(-3)-0.33输入样例3&#xff1a; 5 0输出样例3&#xff1a; 5/0Error java import java.util.*; class Main{public static void main(String[] args){Sc…

马尔科夫链--基础知识

马尔可夫链&#xff08;Markov Chain&#xff09;是一种数学系统&#xff0c;它经过从一个状态到另一个状态的转换&#xff0c;这些转换遵循马尔可夫性质&#xff0c;即未来的状态只依赖于当前的状态&#xff0c;而与过去的状态&#xff08;即如何到达当前状态&#xff09;无关…

力扣 121. 买卖股票的最佳时机

题目来源&#xff1a;https://leetcode.cn/problems/best-time-to-buy-and-sell-stock/description/ 好久没写代码了&#xff0c;啥啥都忘了 C题解1&#xff1a;贪心算法。&#xff08;来源代码随想录&#xff09; 因为股票就买卖一次&#xff0c;那么贪心的想法很自然就是取…

由亚马逊云科技 Graviton4 驱动的全新内存优化型实例 Amazon EC2 实例(R8g),现已开放预览

下一代 Amazon Elastic Compute CloudAmazon EC2) 实例的预览版现已公开 提供。全新的 R8g 实例 搭载新式 Graviton4 处理器&#xff0c;其性价比远超任何现有的内存优化实例。对于要求较高的内存密集型工作负载&#xff0c;R8g 实例是不二之选&#xff1a;大数据分析、高性能数…

第七届西湖论剑·中国杭州网络安全技能大赛 AI 回声海螺 WP

第七届西湖论剑中国杭州网络安全技能大赛-AI-回声海螺 开题&#xff0c;提示输入密码给FLAG。 这个回声海螺应该是个AI&#xff0c;就是复读机&#xff0c;应该是想办法从中骗出密码。 感觉这题不像是AI&#xff0c;也没用啥模型&#xff0c;应该是WEB。或者是说类似于AI的提示…

【Rust日报】2024-02-02 致力于编程,无论你使用哪种语言

AWS SDK for Rust, 2024 Feb2nd released AWS SDK for the Rust Programming Language 2024年2月最新 Releases&#xff1a; Service Features: aws-sdk-sagemaker (1.20.0): Amazon SageMaker Canvas 现在通过 CanvasAppSettings 参数支持生成式 AI 设置。这允许您在 Canvas 工…

AIGC实战——归一化流模型(Normalizing Flow Model)

AIGC实战——归一化流模型 0. 前言1. 归一化流模型1.1 归一化流模型基本原理1.2 变量变换1.3 雅可比行列式1.4 变量变换方程 2. RealNVP2.1 Two Moons 数据集2.2 耦合层2.3 通过耦合层传递数据2.4 堆叠耦合层2.5 训练 RealNVP 模型 3. RealNVP 模型分析4. 其他归一化流模型4.1 …

小红书种草图文怎么制作?纯干货

一篇优质的小红书种草图文&#xff0c;不仅能提升产品销量&#xff0c;还能为品牌带来广泛的关注。如何制作出高质量的小红书种草图文呢&#xff1f;本文伯乐网络传媒将为你一一揭晓。 一、小红书种草图文制作要点 1. 确定目标受众和主题 明确目标受众是谁&#xff0c;他们有何…

微服务入门篇:Nacos注册中心(Nacos安装,快速入门,多级存储,负载均衡,环境隔离,配置管理,热更新,集群搭建,nginx反向代理)

目录 1.Nacos安装1.官网下载2.解压到本地3.启动nacos 2.Nacos快速入门1.在父工程中导入nacos依赖2.给子项目添加客户端依赖3.修改对应服务的配置文件4.启动服务&#xff0c;查看nacos发现情况 3.Nacos服务多级存储模型4.NacosRule负载均衡5. 服务实例的权重设置6.环境隔离&…

PDF控件Spire.PDF for .NET【安全】演示:检测 PDF 文档是否受密码保护

Spire.PDF for .NET 是一款独立 PDF 控件&#xff0c;用于 .NET 程序中创建、编辑和操作 PDF 文档。使用 Spire.PDF 类库&#xff0c;开发人员可以新建一个 PDF 文档或者对现有的 PDF 文档进行处理&#xff0c;且无需安装 Adobe Acrobat。 E-iceblue 功能类库Spire 系列文档处…

2024数学建模美赛F题Reducing Illegal Wildlife Trade原创论文讲解(含完整python代码)

大家好呀&#xff0c;从发布赛题一直到现在&#xff0c;总算完成了数学建模美赛本次F题目非法野生动物贸易完整的成品论文。 本论文可以保证原创&#xff0c;保证高质量。绝不是随便引用一大堆模型和代码复制粘贴进来完全没有应用糊弄人的垃圾半成品论文。 F题论文共42页&…

Qt|实现时间选择小功能

在软件开发过程中&#xff0c;QtDesigner系统给出的控件很多时候都无法满足炫酷的效果&#xff0c;前一段时间需要用Qt实现选择时间的小功能&#xff0c;今天为大家分享一下&#xff01; 首先看一下时间效果吧&#xff01; 如果有需要继续往下看下去哟~ 功能 1&#xff1a;开…

‘javax.sql.DataSource‘ that could not be found的问题

报错信息如下&#xff1a; 2024-02-04 16:31:14.832 WARN 952 --- [ main] ConfigServletWebServerApplicationContext : Exception encountered during context initialization - cancelling refresh attempt: org.springframework.beans.factory.UnsatisfiedDepen…

Leetcode—38. 外观数列【中等】

2024每日刷题&#xff08;111&#xff09; Leetcode—38. 外观数列 实现代码 class Solution { public:string countAndSay(int n) {string ans "1";while(--n) {string next;for(int i 0; i < ans.size(); i) {int cnt 1;char c ans[i];while(i 1 < an…

【算法与数据结构】647、516、LeetCode回文子串+最长回文子序列

文章目录 一、647、回文子串二、516、最长回文子序列三、完整代码 所有的LeetCode题解索引&#xff0c;可以看这篇文章——【算法和数据结构】LeetCode题解。 一、647、回文子串 思路分析&#xff1a;判断一个字符串是否为回文串那么必须确定回文串的所在区间&#xff0c;而一维…

【RK3288 Android6 T8, 突然无声音问题排查】

文章目录 【RK3288 Android6 T8, 突然无声音问题排查】问题描述问题调查patch【RK3288 Android6 T8, 突然无声音问题排查】 问题描述 页面上方突然出现音量进度条,小铃铛图标显示静音状态,不再播报语音 手动去安卓设置内查看,小铃铛音量为0,手动恢复到有声音后继续执行…

Redis -- set集合

挑战自己&#xff0c;每天进步一点点&#xff0c;成就将属于不停止脚步的你。 目录 Redis集合&#xff1f; 集合基本命令 sadd smembers sismember scard spop srandmember smove srem 集合间操作 sinter sinterstore sunion sdiff sdiifstore Redis集合&#…