VsCode CSS3之样式选择器 day3（新手向9）

最新推荐文章于 2024-04-20 01:04:17 发布

当你看到我时请提醒我学习

最新推荐文章于 2024-04-20 01:04:17 发布

阅读量411

点赞数

分类专栏： Css 文章标签： html css 前端

本文链接：https://blog.csdn.net/weixin_42515365/article/details/108017554

版权

Css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

I.移动端常用的单位比较

①px：像素大小，固定值
②%：百分比
③em（不常用，但是在首行缩进时可以使用）：相对自身的font大小（当自身的字体大小也是em做单位时，才会以父元素的字体大小为基准单位）
④rem（移动端主流）：相对根节点(html)的font大小
⑤vw（视口宽度）：相对视口宽度比例，1vw相当于视口宽度的百分之一
⑥vh（视口高度）：相对视口高度比例，1vh相当于视口高度的百分之一

II.代码实现

源码：

<!--
 * @Description: 
 * @Version: 2.0
 * @Autor: Zzelcerton
 * @Date: 2020-08-15 08:42:13
 * @LastEditors: Zzelcerton
 * @LastEditTime: 2020-08-15 09:25:42
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>移动端单位比较</title>
    <style>
        /*px/%/em/rem/vw/vh*/
        .banner1{
            font-size: 2px;
        }
        .banner2{
            font-size: 2%;
        }
        .banner3{
            font-size: 2rem;
        }
        .banner4{
            font-size: 2vw;
        }
        .banner5{
            font-size: 2vh;
        }
        #content1{
            width:20px;
            height: 20px;
            background: red;
        }
        #content2{
            width:20%;
            height: 20%;
            background: yellow;
        }
        #content3{
            width:20rem;
            height: 20rem;
            background: blue;
        }
        #content4{
            width:20vw;
            height: 20vw;
            background: green;
        }
        #content5{
            width:20vh;
            height: 20vh;
            background: turquoise;
        }
        
        
        

    </style>
</head>
<body>
    <section >
        <div class="banner1"><p>1</p></div>
        <div class="banner2"><p>2</p></div>
        <div class="banner3"><p>3</p></div>
        <div class="banner4"><p>4</p></div>
        <div class="banner5"><p>5</p></div>
    </section>
    <section>
        <div id="content1"></div>
        <div id="content2"></div>
        <div id="content3"></div>
        <div id="content4"></div>
        <div id="content5"></div>
    </section>   
    
</body>
</html>

效果：

在这里插入图片描述

当你看到我时请提醒我学习

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
VsCode CSS3之样式选择器 day3（新手向9）

I.移动端常用的单位比较①px：像素大小，固定值②%：百分比③em（不常用，但是在首行缩进时可以使用）：相对自身的font大小（当自身的字体大小也是em做单位时，才会以父元素的字体大小为基准单位）④rem（移动端主流）：相对根节点(html)的font大小⑤vw（视口宽度）：相对视口宽度比例，1vw相当于视口宽度的百分之一⑥vh（视口高度）：相对视口高度比例，1vh相当于视口高度的百分之一II.代码实现源码：<!-- * @Description: * @Version: 2.
复制链接

扫一扫