首页 > 其他分享 >No.2.6

No.2.6

时间:2023-03-02 16:33:42浏览次数:29  
标签:视口 vh 宽度 尺寸 No.2 vw 100

vw/vh:(能够使用vw单位设置网页元素的尺寸)

相对单位  相对视口的尺寸计算结果  vw:viewport width(1vw=1/100视口宽度)  vh:viewport height(1vh=1/100视口高度)

vw适配原理:(实现在不同宽度的设备中,网页元素尺寸等比缩放效果)

vw单位尺寸:

1.确定设计稿对应的vw尺寸(1/100视口宽度)   查看设计稿宽度 > 确定参考设备宽度(视口宽度)> 确定vw尺寸(1/100视口宽度) 

2.vw单位的尺寸 = px单位数值 /(1/100视口宽度)  

思考:开发中,会不会vw和vh混用呢? 不会。 因为 vh是1/100视口高度,全面屏视口高度尺寸大,如果混用可能会导致盒子变形。 a标签在一行,给父级加 display: flex;  不加display:inline-block;的原因是默认有间距,去掉间距太麻烦

视频布局:父级左右padding  每个视频盒子  宽度为50%  左右padding(拉开内容的距离)

 /* 弹性盒子换行 */  flex-wrap: wrap;

 

标签:视口,vh,宽度,尺寸,No.2,vw,100
From: https://www.cnblogs.com/renzlllj/p/17171038.html

相关文章

  • No.2.5
    移动适配rem:目前多数企业在用的解决方案rem:(能够使用rem单位设置网页元素的尺寸)网页效果:屏幕宽度不同,网页元素尺寸不同(等比缩放)px单位或百分比布局可以实现吗?px单位......
  • No.2.3
    PC端网页和移动端网页的有什么不同?PC屏幕大,网页固定版心手机屏幕小,网页宽度多数为100%如何在电脑里面写代码边调试移动端网页效果?谷歌模拟器 了解屏幕尺寸......
  • No.2.1
    字体图标( 目的:使用字体图标技巧实现网页中简洁的图标效果)字体图标展示的是图标,本质是字体,处理简单的、颜色单一的图片优点:灵活性:灵活的修改样式,例如:尺寸,颜色等轻......
  • ZFBJ - 1 - 42 - NO.2
         ......
  • CatLikeCoding Basic No.2
        graph.csusingSystem.Collections;usingSystem.Collections.Generic;usingUnityEngine;publicclassgraph:MonoBehaviour{[SerializeField]......
  • 目标检测论文解读复现【NO.21】基于改进YOLOv7的小目标检测
    OverridetheentrypointofanimageIntroducedinGitLabandGitLabRunner9.4.Readmoreaboutthe extendedconfigurationoptions.Beforeexplainingtheav......
  • LeetCode:NO.242有效的字母异位词
    题目链接代码随想录LeetCode 题目描述给定两个字符串 s 和 t ,编写一个函数来判断 t 是否是 s 的字母异位词。注意:若 s 和 t 中每个字符出现的次数都相......
  • 【LeetCode】NO.217存在重复元素
    题目:给你一个整数数组 nums 。如果任一值在数组中出现至少两次,返回 true ;如果数组中每个元素互不相同,返回 false 。示例1:输入:nums=[1,2,3,1]输出:true示例2:......
  • 2022.11.14 No.2 Leetcode
    重庆昨天新增已经破2000。晚上回去研究了一下家里老台式改服务器的可行性,感觉问题不大,就是可能要给家里换组电力猫了。今天降温了,要不是寝室里有个从早到晚......
  • NO.2
    打开CMD的方式开始+系统+命令提示符win键+R输入cmd打开控制台(推荐使用)在任意文件夹下面,按住shift键+右键点击,在此处打开命令窗口有在资源管理器中的地址栏前......