CSS单位与sass入门

最新推荐文章于 2023-10-08 22:13:41 发布

云杰8了

最新推荐文章于 2023-10-08 22:13:41 发布

阅读量162

点赞数 1

分类专栏： css3 文章标签： css

本文链接：https://blog.csdn.net/weixin_50821119/article/details/111653634

版权

css3 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

CSS单位

em

它是描述相对于应用在当前元素的字体尺寸，所以它也是相对长度单位。一般浏览器字体大小默认为16px，则2em == 32px；
如果当前元素有大小就是按照当前元素大小

rem

rem：相对单位 root em。参考值为：HTML根标签的font-size的值。

 iPhone5  320px  上面有640个像素点。 1px=1个物理像素点 1px=2个物理像素点。 160/320 一半
 iPhoneX 375px  187.5

 rem布局的原理：
     动态修改html根标签中的font-size值。
 实现方式：
     1.通过js
     2.通过vw。
 vw

html{
	font-size:12px;
}
0.5rem=12*0.5=6px；

vw和vh

百分比布局缺点：
1.计算百分数不方便。
2.多层嵌套时使用不方便。

    vw：1vw = 屏幕宽度的百分之一。
    vh: 1vh = 屏幕高度的百分之一。

    区别：
        百分比参照的是父盒子
        vw/vh 参照的是屏幕。
    假设：拿到的设计稿是375px的。 我们有个盒子 100*50；
    使用vw表示100px。
    26.6667vw=100px;
    26.67vw=26.67%    110.41px


    1.拿到一个设计稿，假设这张设计稿是宽3.75rem。
    2.其中一个盒子 1rem*0.3rem。但是因为px是绝对单位，在别的移动端设备中，显示的效果就会不同。
    3.应该使用百分比形式去表示盒子的宽高。
    4.可选方案：
        4.1 百分数 不好计算，特别是多个盒子嵌套时。
        4.2 vw

应用

100px=1rem=比率vw
375的设计稿，100px在上面显示，比率是100/375. 1px就是26.67vw 、
切换成手机端页面，iphone6/7/8的屏幕，百分之百展示。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html {
            font-size: 26.667vw;
        }
        
        div {
            width: 2rem;
            height: 2rem;
            background-color: aquamarine
        }
    </style>
</head>

<body>
    <div>xsxsxsxsxs</div>
</body>

</html>

sass入门

安装教程

在这里插入图片描述
第一步，在vscode中安装easy sass

第二步，修改vscode的配置
“easysass.compileAfterSave”: true,
“easysass.formats”: [ //nested：嵌套缩进的 css 代码。
//expanded：没有缩进的、扩展的css代码。
//compact：简洁格式的 css 代码。
//compressed：压缩后的 css 代码
{
“format”: “expanded”,
“extension”: “.css”
},
{
“format”: “compressed”,
“extension”: “.min.css”
}
],
“easysass.targetDir”: “css/” //路径

第三步，新建一个文件夹，在文件夹中新建两个文件夹，一个sass一个css，

在这里插入图片描述

云杰8了

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
CSS单位与sass入门

CSS单位CSS单位emremvw和vh应用sass入门安装教程CSS单位em它是描述相对于应用在当前元素的字体尺寸，所以它也是相对长度单位。一般浏览器字体大小默认为16px，则2em == 32px；如果当前元素有大小就是按照当前元素大小remrem是相对于html字体大小而计算的。rem：相对单位 root em。参考值为：HTML根标签的font-size的值。 iPhone5 320px 上面有640个像素点。 1px=1个物理像素点 1px=2个物理像素点。 160/
复制链接

扫一扫