web移动端开发

请你别入坑
114 阅读6分钟

字体图标

网址:www.iconfont.cn/

引用方法:

类名引用

通过link标签引入字体图标css样式

    <link rel="stylesheet" href="./fonts/iconfont.css">

引用类名(必须添加iconfont)

    <i class="iconfont icon-arrow-right"></i>

使用伪元素使用字体图标(必须声明字体系列为:iconfont)

    i{
        font-family:'iconfont';
    }
    i::before{
    /* 不能忘,\ */
        content:'\e63b'; 
    }

'\e63b':### unicode编码&#x后几位(&#xe63b)

2d平面转换

x,y轴

image.png

x轴原点往右为正反之为负

y轴原点往下为正反之为负

2d平面移动

代码规范: transform:translate(x,y);

2d旋转

代码规范: transform:rotate(45deg);

deg:单位'度'

正数为顺时针,负数为 逆时针

缩放

代码规范 transform:scale(x,y);

默认沿盒子中心点向x,y邹缩放.

括号内一般只写一个数;大于1表示放大倍数;小于1表示缩小;等于1相当于不缩放

盒子和平居中方法

方法一 :

    /* 子绝父相 */
    position:absolute;
    top:50%;
    left:50%;
    /* 有兼容性问题 */
    transform:translate(-50%,-50%);
    /* 推荐使用 */
    margin-left:自身宽度一半;
    margin-top:自身高度一半;

方法二(原始方法):

    /* 子绝父相 */
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    margin:auto;

方法三(flex):

    display:flex;
    justify-content:center;
    align-items:center;

渐变

代码规范: background-image:(方向(不写默认为自上而下,也可以写角度 ),颜色1,颜色2,...);

方向:

to bottom(默认值):由上至下 或 180deg

其他自行百度

3d转换

3d坐标系

x,y,z

image.png

z轴垂直屏幕向外为正反之为负

3d位移

代码规范:

        transform:translate3d(x,y,z);(符合写法)
        
        transform:translateX(x);
        
        transform:translateY(y);
        
        transform:translateZ(z);

透视

作用:3d转换实现近大远小的视觉效果

一般取值为800-1200px之间

一定要给父级添加

代码规范

     perspective: 800px;

左手法则

大拇指指向每根坐标轴的正方向则四指方向为旋转的方向

3d旋转

沿X轴方向旋转:transform:rotateX(度数);

沿X轴旋转类似于单杠

 transform:rotateX(360deg)

沿Y轴方向旋转:transform:rotateY(度数);

沿Y轴旋转类似于钢管舞

 transform:rotateY(360deg)

沿Z轴方向旋转:transform:rotateZ(度数);

沿Z轴旋转类似于平面旋转(沿中心点旋转)

 transform:rotateZ(360deg)

立体呈现

代码规范

给父级元素添加,让子元素开启3d立体空间

      transform-style: preserve-3d;

动画

通过@keyframes 名称{}定义动画而后在通过animation属性调用动画;

image.png

    选择器{
        /* 连写,没有顺序之分但第一个时间为完成一个动画的时间;动画名称 动画执行时间 必写 */
        animation:动画名称 动画执行时间 速度曲线 重复次数 延迟时间 下一周期动画方向 执行完毕时的状态;
    }
    @keyframes 名称{
        form{}
        to{}
    }
    /* 或 */
    @keyframes 名称{
        0%{}
        25%{}
        50%{}
        75%{}
        100%{}
    }

速度曲线之逐帧动画

        animation:动画名称 动画执行时间 steps(步长) 重复次数 延迟时间 下一周期动画方向 执行完毕时的状态;

image.png

暂停动画

    /* animation-play-state默认值为running:执行动画   */
    选择器:hover 选择器{
    /* 暂停 */
        animation-play-state: paused;
       }

物理分辨率和逻辑分辨率

物理分辨率：硬件所支持的，屏幕出厂就设定无法修改

逻辑分辨率：软件可以达到的， 我们开发中写的是逻辑分辨率

视口

视口就是浏览器展示内容的区域

理想视口:设备有多宽,网页就展示多宽

视口标签

有了视口标签,我们就可以做到理想视口

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  • width=device-width：视口宽度=设备宽度
  • initial-scale=1.0：初始页面缩放倍数
  • maximum-scale=1.0 最大缩放倍数
  • user-scalable=0 不允许用户缩放页面（移动端） 或者为 no 如果为 yes 则允许用户缩放

二倍图

是页面图片效果更清晰,更清楚

百分比布局(流式布局)

高度固定,宽度自适应

flex布局(弹性布局)

书写代码:display:flex;

一定要写给亲父亲;

主轴对齐方式

书写代码:justify-content:属性值;

写给父级

属性值作用
flex-start默认值, 起点开始依次排列
flex-end终点开始依次排列
center沿主轴居中排列
space-around弹性盒子沿主轴均匀排列, 空白间距均分在弹性盒子两侧
space-between弹性盒子沿主轴均匀排列, 空白间距均分在相邻盒子之间
space-evenly弹性盒子沿主轴均匀排列, 弹性盒子与容器之间间距相等

侧轴对齐方式

书写代码:align-items:属性值;

写给父级

属性值作用
flex-start起点开始依次排列
flex-end终点开始依次排列
center沿侧轴居中排列
stretch默认效果, 弹性盒子沿着侧轴线被拉伸至铺满容器

伸缩比

书写代码:flex:整数;

写给子级

示例代码

    <!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">
    <title>Document</title>
    <style>
        .box {
            display: flex;
            width: 300px;
            height: 100px;
            border: 1px solid red;
        }
        // 此时每个span各占父元素剩余空间的1/3
        .box span {
            flex: 1;
        }
    </style>
</head>

<body>
    <div class="box">
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
</body>

</html>

圣杯布局

左右两边固定高宽不变,中间自适应;

扩充

flex布局的元素没有行内行内快快元素之分,可以直接设置宽高;

flex在pc端有兼容性问题,移动端没有兼容性问题可以放心使用

改变主轴方向

主轴方向默认在水平方向,侧轴默认在垂直方向

代码:flex-direction:属性值;

属性值作用
row行, 水平(默认值)
column列, 垂直
row-reverse行, 从右向左
column-reverse列, 从下向上

侧轴

控制子元素换行

flex-wrap:warp;(换行)

多行侧轴对齐方式

align-content:属性值;

属性值与主轴对齐方式一致

rem适配

rem是一个长度单位,1rem等于根html一个字体大小

    /* 根html 为 12px */
   html {
     font-size: 12px;
       }
/* 此时 div 的字体大小就是 24px */       
   div {
    font-size: 2rem;
    }
rem的优势：父元素文字大小可能不一致， 但是整个页面只有一个html，可以很好来控制整个页面的元素大小。

此时一个rem等于12px

媒体查询

媒体查询 media query 可以自动检测视口的宽度。

媒体查询一个非常大的作用是：根据屏幕宽度修改html文字大小。

使用媒体查询, 根据不同的视口宽度, 设置不同的根字号 ，就完成了适配

    @media (视口宽度){
        html{
            字体大小设置为视口宽度的十分之一
        }
    }
    @media (视口宽度){
        html{
            字体大小设置为视口宽度的十分之一
        }
    }
    ...

flexible.js

该文件可以自动识别视口宽度,并设置根字号

设计稿px值转化rem值

rem=设计稿px值 / 根字号

less

less 可以帮我们把px单位转换到rem单位。

Less是一个CSS预处理器, Less文件后缀是.less

扩充了 CSS 语言, 使 CSS 具备一定的逻辑性、计算能力。

Less插件:Easy Less(less文件保存自动生成css文件)

avatar
文章
阅读
粉丝