移动web知识点总结

最新推荐文章于 2024-07-11 13:45:07 发布

zhaoyifei01

最新推荐文章于 2024-07-11 13:45:07 发布

阅读量241

点赞数

文章标签： web

本文链接：https://blog.csdn.net/zhaoyifei01/article/details/128784252

版权

本文详细总结了移动Web开发中的关键知识点，包括字体图标、平面转换、渐变、动画、移动端特点、百分比布局、Flex布局、移动适配、媒体查询、BootStrap框架的应用。字体图标具有灵活性和轻量级等优点，平面转换如旋转、缩放可通过transform属性实现，渐变用于丰富背景效果。移动端适配涉及到rem和vw/vh单位，BootStrap能快速构建响应式页面。

摘要由CSDN通过智能技术生成

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

移动web

一、字体图标

目标：使用字体图标实现网页中简洁的图标效果

字体图标

1、字体图标展示的是图标，本质是字体

2、处理简单的、颜色单一的图片

字体图标的优点：

1、灵活性：灵活的修改样式，例如：尺寸、颜色等

2、轻量级：体积小、渲染快、降低服务器请求次数

3、兼容性：几乎兼容所有主流浏览器

4、使用方便：

1、下载字体包

2、使用字体图标

图标库：iconfont-阿里巴巴矢量图标库

下载字体包：登录-选择图标库-选择图标-加入购物车-购物车-添加至项目-下载至本地

使用字体图标：

1.Unicode编码：

引入样式表

复制粘贴图标对应的Unicode代码

设置文字字体

2.类名：

引入字体图标样式表

调用图标对应的类名，必须调用2个类名

iconfont类：基本样式，包含字体的使用

icon-xxx：图标对应的类名

如果图标库没有项目所需的图标，在lconFont网站上传矢量生成字体图标

1、与设计沟通，得到SVG矢量图

2、lconFont网站上传图标，下载使用

二、平面转换

平面转换

1、改变盒子在平面内的形态

2、2D转换

平面转换属性：trandfrom

语法：transform：translate(水平移动距离，垂直移动距离)

取值(正负均可)

1、像素单位数值

2、百分比(参照物为盒子自身尺寸)

注意：X轴正向为右，y轴正向为下

技巧

1、translate()如果只给一个值，表示X轴方向移动距离

2、单独设置某个方向的移动距离：translate() & translateY()

代码：

	<style>
        .father {
            width: 500px;
            height: 300px;
            margin: 100px auto;
            border: 1px solid #000;
        }
        
        .son {
            width: 200px;
            height: 100px;
            background-color: pink;
            transition: all 0.5s;
        }
    
        /* 鼠标移入到父盒子，son改变位置 */
        .father:hover .son {
            /* transform: translate(100px, 50px); */

            /* 百分比: 盒子自身尺寸的百分比 */
            /* transform: translate(100%, 50%); */

            /* transform: translate(-100%, 50%); */

            /* 只给出一个值表示x轴移动距离 */
            /* transform: translate(100px); */

            transform: translateY(100px);
        }
    </style>

使用translate快速实现绝对定位的元素居中

原理：位移取值为百分比数值，参照盒子自身尺寸计算移动距离

代码：

	<style>
        .father {
            position: relative;
            width: 500px;
            height: 300px;
            margin: 100px auto;
            border: 1px solid #000;
        }
        
        .son {
            position: absolute;
            left: 50%;
            top: 50%;
            /* margin-left: -100px;
            margin-top: -50px; */

            transform: translate(-50%, -50%);

            width: 203px;
            height: 100px;
            background-color: pink;          
        }
    </style>

使用translate实现元素位移效果

1、left：向左侧移动自身宽度

2、right：向右移动自身宽度

使用rotate实现元素旋转效果

语法：transform：rotate(角度)；角度单位是deg

技巧：取值正负均可

1、取值为正，则顺时针旋转

2、取值为负，则逆时针旋转

代码：

	<style>
        img {
            width: 250px;
            transition: all 2s;
        }
        
        img:hover {
            /* 顺 */
            transform: rotate(360deg);

            /* 逆 */
            /* transform: rotate(-360deg); */
        }
    </style>

使用transform-origin属性改变转换原点

语法

1、默认圆点是盒子中心点

2、transform-origin：原点水平位置原点垂直位置

取值

1、方位名词(left、top、right、bottom、center)

2、像素单位数值

3、百分比(参照盒子自身尺寸计算)

代码：

	<style>
        img {
            width: 250px;
            border: 1px solid #000;
            transition: all 2s;
            transform-origin: right bottom;
            transform-origin: left bottom;
        }
        
        img:hover {
            transform: rotate(360deg);
        }
    </style>

使用transform复合属性实现多形态转换

多重转换技巧：transform：translate() rotate()

多重转换原理

1、旋转会改变网页元素的坐标轴向

2、先写旋转，则后面的转换效果的轴向以旋转后的轴向为准，会影响转换结果

代码：

	<style>
        .box {
            width: 800px;
            height: 200px;
            border: 1px solid #000;
        }
        
        img {
            width: 200px;
            transition: all 8s;
        }
        
        .box:hover img {
            /* 边走边转 */
            transform: translate(600px) rotate(360deg);

            /* 旋转可以改变坐标轴向 */
            /* transform: rotate(360deg) translate(600px); */
            
            /* 层叠性 */
            /* transform: translate(600px);
            transform: rotate(360deg); */
        }
    </style>

使用scale改变元素的尺寸

语法：transform：scale(X轴缩放倍数，y轴缩放倍数)

技巧

1、一般情况下，只为scale设置一个值，表示X轴和y轴等比例缩放

2、transform：scale(缩放倍数)

3、scale值大于1，表示放大，scale值小于1表示缩小

代码：

	<style>
        .box {
            width: 300px;
            height: 210px;
            margin: 100px auto;
            background-color: pink;
            
        }

        .box img {
            width: 100%;
            transition: all 0.5s;
        }
        
        .box:hover img {
            /* width: 150%; */

            transform: scale(1.2);
            transform: scale(0.8);
        }
    </style>

三、渐变

渐变是多个颜色逐渐变化的视觉效果

一般用于设置盒子的背景

代码：

	<style>
        .box {
            width: 300px;
            height: 200px;
            /* background-image: linear-gradient(
                pink,
                green,
                hotpink
            ); */
            background-image: linear-gradient(
                transparent,
                rgba(0,0,0, .6)
            );
        }
    </style>

四、空间转换

空间转换

空间：是从坐标角度定义的，x、y和z三条坐标构成了一个立体空间，z轴位置与视线方向相同

空间转换也叫3D转换

属性：transfrom