`CSS`常用知识记录

`css`中常见的计算函数

`calc()`

函数用于动态计算长度值。(CSS3)中增加的属性

需要注意的是，运算符前后都需要保留一个空格。例如：width: calc(100% -10px);
任何长度值都可以使用calc()函数进行计算
calc()函数支持+、-、*、/运算
calc()函数使用标准的数学运算优先级规则

`CSS`中常用的属性值

`transition`

设置元素的过渡效果

transition-property : 指定CSS属性的name,transition效果
transition-duration：transition效果需要指定多少秒或者毫秒才能完成
transition-timing-function：指定transition效果的转速曲线
transition-delay：定义transition效果开始的时间

通过js实现效果的方式

object.style.transition="width 2s";

`transform`

设置动画效果可以实现将某个元素进行旋转、移动、缩放、倾斜等效果，具体实现效果如下表所示

值	描述
none	定义不进行转换。
matrix(n,n,n,n,n,n)	定义 2D 转换，使用六个值的矩阵。
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)	定义 3D 转换，使用 16 个值的 4x4 矩阵。
translate(x,y)	定义 2D 转换。
translate3d(x,y,z)	定义 3D 转换。
translateX(x)	定义转换，只是用 X 轴的值。
translateY(y)	定义转换，只是用 Y 轴的值。
translateZ(z)	定义 3D 转换，只是用 Z 轴的值。
scale(x[,y]?)	定义 2D 缩放转换。
scale3d(x,y,z)	定义 3D 缩放转换。
scaleX(x)	通过设置 X 轴的值来定义缩放转换。
scaleY(y)	通过设置 Y 轴的值来定义缩放转换。
scaleZ(z)	通过设置 Z 轴的值来定义 3D 缩放转换。
rotate(angle)	定义 2D 旋转，在参数中规定角度。
rotate3d(x,y,z,angle)	定义 3D 旋转。
rotateX(angle)	定义沿着 X 轴的 3D 旋转。
rotateY(angle)	定义沿着 Y 轴的 3D 旋转。
rotateZ(angle)	定义沿着 Z 轴的 3D 旋转。
skew(x-angle,y-angle)	定义沿着 X 和 Y 轴的 2D 倾斜转换。
skewX(angle)	定义沿着 X 轴的 2D 倾斜转换。
skewY(angle)	定义沿着 Y 轴的 2D 倾斜转换。
perspective(n)	为 3D 转换元素定义透视视图。

前端常用开发单位

em

em是前端开发中的动态单位，是一个相对于元素字体大小的单位

如果设置font-size:12px 那么1em = 12px

特点：

当前元素设置了字体大小，那么em就相对于字体的大小
当前元素没有设置字体大小，那么em就相当于第一个设置字体大小的祖先元素的字体的大小
如果当前元素和祖先元素都没有设置大小，那么就相当于浏览器字体的大小

结论：

em是一个动态的单位，会随着参考元素的字体大小的变化而变化

css


.test{
    font-size:12px;
    width:1em; // 120px
    height:1em; // 120px
}

rem

rem就是root em,和em是前端开发中的一个动态单位，rem和em的区别在于，rem是一个相对于根元素字体大小的单位。

例如：根元素(html) font-size:12px;，那么1rem就等于12px

css


html{
    font-size:12px; // 生效
}

.test{
    font-size:15px; // 不生效
    width:1rem;
    height:1rem;
}

特点：

除了根元素以外，其它祖先元素的字体大小不会影响rem尺寸
如果根元素设置了字体大小，那么就相对于根元素的字体大小
如果根元素没有设置字体大小，那么就相对于浏览器默认的字体大小

结论：

rem是一个动态的单位，会随着根元素字体大小的变化而变化（相对单位）

vw(Viewport Width)和vh(Viewport Height)

vw和vh是前端开发中的一个动态单位，是一个相对于网页视口的单位
系统会将视口宽度和高度分为100份，1vw就占用视口宽度的百分之一，1vh占用视口高度的百分之一
vw和vh和百分比不同的是，百分比都是以父元素作为参考，vw和vh永远都是以视口作为参考

结论：

vh/vw都是动态单位，会随着视口的大小变化而变化（相对的单位）

vmax和vmin

vmin: vh和vw中较小的一个

vmax: vh和vw中较大的一个

使用场景：保证移动开发中屏幕旋转之后尺寸不变

移动端视口

什么是视口？

视口简单理解就是可视区域大小我们称之为视口

在PC端，视口大小就是浏览器窗口可视区域的大小，在移动端，视口大小并不等于窗口大小，移动端视口宽度被人为定义为了980

为什么是980而不是其他值

因为过去网页的版心都是980，乔布斯为了能让网页在移动端完美的展示，所以将IOS手机视口的大小定义为了980，后来谷歌也觉得这是一个非常牛逼的方案，所以安卓手机的视口也定义为了980

移动端自动将视口宽度设置为980带来的问题

虽然移动端自动将视口设置为980之后我们可以很完美的看到整个网页，但是由于移动端的物理尺寸（设备宽度）是远远小于视口宽度的，所以为了能够在较小的范围内看到视口中所有的内容，那么就必须将内容缩小

如何保证在移动端不会自动缩放网页的尺寸？

通过meta设置视口大小

html

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

initial-scale=1.0 初试缩放比例 1为不缩放，小于1为缩小，大于1为放大

maximum-scale 允许用户缩放到最大比例

minimum-scale 允许用户缩放到最小比例

user-scalable 用户是否可以手动缩放

移动端常用适配方案1

通过媒体查询方式可以是早期采用的布局方式，它主要是通过查询设备的宽度来执行不同的css代码，最终达到界面的配置

优势：

简单哪里不对改哪里
调整屏幕宽度的时候不用刷新页面即可响应式展示
特别适合对移动端和PC端维护同一套代码的时候

劣势：

由于移动换和PC端维护同一套代码，所以代码量比较大，维护不方便
为了兼顾大屏或高清设备，会造成其他设备资源浪费，特别是加载图片资源
为了兼顾移动端和PC端各自响应式的展示效果，难免会损失各自特有的交互方式

应用场景：
对于比较简单（界面不复杂）的网页，诸如：企业官网、宣传单页等，我们可以通过媒体查询、伸缩布局、Bootstrap来实现响应式站点
对于比较复杂（界面复杂）的网页，诸如：电商、团购等，更多的则是采用PC端一套，移动端一套代码，更容易去维护

html

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>移动端适配方案1</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .top {

        }

        .top > img {
            width: 100%;
            height: auto;
        }

        .top > p {
            font-size: 16px;
            color: #fff;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            top: 33px;
        }

        .middle, .bottom {
            position: relative;
            height: 124px;
        }

        .bottom {
            margin-top: 14px;
        }

        .main {
            border: 1px dashed #0d7efb;
            border-radius: 5px;
            padding: 4px;
            display: inline-block;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
        }

        .main > img:nth-of-type(1) {
            width: 175px;
            height: 116px;
            vertical-align: bottom;
        }

        .main > img:nth-of-type(2) {
            width: 35px;
            height: 35px;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            top: 25px;
        }

        @media screen and (min-width: 375px) {
            .top > p {
                font-size: 18px;
                top: 40px;
            }

            .main > img:nth-of-type(1) {
                width: 206px;
                height: 135px;
            }

            .main > img:nth-of-type(2) {
                width: 42px;
                height: 42px;
                top: 30px;
            }

            .bottom {
                margin-top: 17px;
            }
        }
    </style>
</head>
<body>
<div class="top">
    <img src="images/bg.png" alt="">
    <p>实名认证</p>
</div>
<div class="middle">
    <div class="main">
        <img src="images/back.png" alt="">
        <img src="images/add.png" alt="">
    </div>
</div>
<div class="bottom">
    <div class="main">
        <img src="images/back.png" alt="">
        <img src="images/add.png" alt="">
    </div>
</div>
</body>
</html>

界面自动跳转

通过userAgent去判断是否为显示移动端还是网页端

// 判断当前是不是移动端
// 返回false就是否为移动端
function isPC() {
    let userAgentInfo = navigator.userAgent;
    if (/iphone/i.test(userAgentInfo)){
        return false
    }else if (/android/i.test(userAgentInfo)){
        return false
    }
    return true
}

if (!isPC()){
    // 跳转至手机端
    location.href = "http://m.test.cn"
}

移动端适配方案2

通过媒体查询 + rem

虽然我们将移动端独立到一套代码中了，但是由于移动端也有很多的屏幕尺寸，所以也需要进行适配

例如：

iPhone3/4/5 320pxiPhone6/7/8 375pxiPhoneX/plus 414px

当下起亚开发中设计师提供给我们的移动端设计图片是750*xxx的或者1125*xxx的，所以我们需要对设计师提供的图片进行等比缩放，这样才能1:1还原设计图片

如何等比缩放？

将设计图片分为指定份数，求出每一份的大小
- 例如：750设计图片分为7.5份，那么每一份的大小就是100px
将目标屏幕也等分为指定份数，求出每一份的大小
- 例如：375屏幕也分为7.5份，那么每一份的大小就是50px
用原始元素尺寸/原始图片每一份大小*目标屏幕每一份大小 = 等比缩放后的尺寸
- 例如：设计图片上有一个150*150的图片，我想等比缩放显示到375屏幕上
- 那么：150/100*50 = 1.5 * 50 = 75px

如何在前端开发中应用这个计算公式？

目标屏幕每一份的大小就是html的font-size
使用时只需要用原始元素尺寸 / 原始图片每一份大小rem 即可

应用：

html

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>移动端适配方案2</title>
    <style type="text/less">
        *{
            margin: 0;
            padding: 0;
        }
        @media screen and (max-width: 320px) {
            /*
                750 / 7.5 = 100
                320 / 7.5 = 42.667
             */
            html{
                font-size: 42.667px;
            }
        }

        @media screen and (min-width: 375px) {
            /*
               750 / 7.5 = 100
               375 / 7.5 = 50
            */
            html{
                font-size: 50px;
            }
        }

        @media screen and (min-width: 414px) {
            /*
               750 / 7.5 = 100
               414 / 7.5 = 55.2
            */
            html{
                font-size: 55.2px;
            }
        }
        .top{
            position: relative;
        }
        .top>img{
            width: 100%;
            height: auto;
        }
        .top>p{
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            top: 80/100rem;
            font-size: 36/100rem;
            color: white;
        }
        .middle,.bottom{
            position: relative;
            height: 290/100rem
        }
        .bottom{
            margin-top: 35/100rem;
        }
        .main{
            border: 1px dashed #0d7efb;
            border-radius: 5/100rem;
            padding: 10/100rem;
            display: inline-block;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
        }
        .main>img:nth-of-type(1){
            width: 410/100rem;
            height: 270/100rem;
            vertical-align: bottom;
        }

        .main>img:nth-of-type(2){
            width: 84/100rem;
            height: 84/100rem;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            top: 60/100rem;
        }
    </style>
    <script src="http://cdn.bootcss.com/less.js/2.5.3/less.min.js"></script>
</head>
<body>
<div class="top">
    <img src="./images/bg.png" alt="">
    <p>实名认证</p>
</div>
<div class="middle">
    <div class="main">
        <img src="./images/back.png" alt="">
        <img src="./images/add.png" alt="">
    </div>
</div>
<div class="bottom">
    <div class="main">
        <img src="./images/back.png" alt="">
        <img src="./images/add.png" alt="">
    </div>
</div>
</body>
</html>

移动端适配的第三种方案

动态计算和设置当前屏幕的大小，优化方案2

优点：使用js动态计算当前屏幕每一份大小，不用写很多媒体查询


// 拿到html,直接给html设置一个font-size
document.documentElement.style.fontSize = window.innerWidth / 7.5 + 'px'

弊端：由于是执行了js代码动态计算每一份大小，如果切换了屏幕之后需要刷新界面才有效

而媒体查询如果切换了屏幕尺寸不需要重新刷新界面

设备像素和CSS像素

设备像素

设备像素又称为物理像素，是"物理屏幕上真实存在的发光点"，只有屏幕一经出厂就固定不会改变

CSS像素

CSS像素又称为逻辑像素，是编程世界中虚拟的东西，我们通过代码设置的像素都是逻辑像素

逻辑像素和物理像素有可能是不一样的

什么时候不一样?为什么不一样?

在PC端，1个CSS像素往往都是对应着电脑屏幕的1个物理像素, 所以我们无需关心PC端的CSS像素和设备像素
在手机端，最开始其实1个CSS个像素也是对应着手机屏幕的1个物理像素, 但是后来一个改变世界的男人(乔布斯)改变了这一切~ 从iPhone4开始，苹果公司推出了所谓的retina视网膜屏幕。 iPhone4的屏幕尺寸却没有变化，但是像素点却多了一倍这就导致了在1个CSS个像素等于1个物理像素的手机上, 我们设置1个CSS像素只会占用1个物理像素而在1个CSS个像素不等于1个物理像素的手机上, 我们设置1个CSS像素就会占用2个物理像素所以仔细观察你会发现同样是1像素但是在retina视网膜屏幕的手机上会粗一些

移动端适配的第四种方式（常用）

如何解决设备像素和CSS像素不一样的问题？

如果设备像素和CSS像素一样，那么无需处理不会带来任何负面影响

如果设备像素是CSS像素的2倍，那么我们只需要将CSS像素缩小一半即可

但是有时候设备像素可能是CSS像素的好几倍

获取设备像素比DPR(Device Pixel Ratio)

DPR = 设备像素 / CSS像素

在js中我们可以通过window.devicePixelRatio来获取当前的设备像素

如何缩小？通过<meta name="viewport">的initial-scale属性来缩小

注意点：缩放视口后视口大小会发生变化


console.log(1.0 /window.devicePixelRatio);
let scale = 1.0 /window.devicePixelRatio

let text = `<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=${scale}, maximum-scale=${scale}, minimum-scale=${scale}">`

document.write(text)

document.documentElement.style.fontSize = window.innerWidth / 7.5 + 'px'

案例：

html


<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>移动端适配方案4</title>
    <style type="text/less">
        *{
            margin: 0;
            padding: 0;
        }
        .top{
            position: relative;
        }
        .top>img{
            width: 100%;
            height: auto;
        }
        .top>p{
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            top: 80/100rem;
            font-size: 36/100rem;
            color: white;
        }
        .middle,.bottom{
            position: relative;
            height: 290/100rem
        }
        .bottom{
            margin-top: 35/100rem;
        }
        .main{
            border: 1px dashed #0d7efb;
            border-radius: 5/100rem;
            padding: 10/100rem;
            display: inline-block;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
        }
        .main>img:nth-of-type(1){
            width: 410/100rem;
            height: 270/100rem;
            vertical-align: bottom;
        }

        .main>img:nth-of-type(2){
            width: 84/100rem;
            height: 84/100rem;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            top: 60/100rem;
        }
    </style>
    <script>
        let scale = 1.0 /window.devicePixelRatio

        let text = `<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=${scale}, maximum-scale=${scale}, minimum-scale=${scale}">`

        document.write(text)
        document.documentElement.style.fontSize = window.innerWidth / 7.5 + 'px'

    </script>
    <script src="http://cdn.bootcss.com/less.js/2.5.3/less.min.js"></script>
</head>
<body>
<div class="top">
    <img src="./images/bg.png" alt="">
    <p>实名认证</p>
</div>
<div class="middle">
    <div class="main">
        <img src="./images/back.png" alt="">
        <img src="./images/add.png" alt="">
    </div>
</div>
<div class="bottom">
    <div class="main">
        <img src="./images/back.png" alt="">
        <img src="./images/add.png" alt="">
    </div>
</div>
</body>
</html>

CSS常用知识记录 #

css中常见的计算函数 #

calc() #

CSS中常用的属性值 #

transition #

transform #

前端常用开发单位 #

em #

rem #

vw(Viewport Width)和vh(Viewport Height) #

vmax和vmin #

移动端视口 #

移动端常用适配方案1 #

界面自动跳转 #

移动端适配方案2 #

移动端适配的第三种方案 #

设备像素和CSS像素 #

移动端适配的第四种方式（常用） #

`CSS`常用知识记录

`css`中常见的计算函数

`calc()`

`CSS`中常用的属性值

`transition`

`transform`

前端常用开发单位

em

rem

vw(Viewport Width)和vh(Viewport Height)

vmax和vmin

移动端视口

移动端常用适配方案1

界面自动跳转

移动端适配方案2

移动端适配的第三种方案

设备像素和CSS像素

移动端适配的第四种方式（常用）