移动web基础知识点总结

移动web

pc web品优购

制作favicon图标

png 图片转换为 ico 图标

http://www.bitbug.net/

tdk

    ...
    
    
    
    
    
    ...

盒子连写属性

border-style: solid;
/* 连写和我们内外边距连写顺序是一样的 写2个
第1个代表上下边框的粗细，第2个代表左右边框的粗细 */
border-width: 50px 80px;
border-color: red green yellow blue;

移动端私有前缀

内核	前缀	主要浏览器
Trident	-ms-	Internet Explorer
Gecko	-moz-	Firefox
Webkit	-webkit-	Chrome、Opera、Safari、Android
Presto	-o-	早期Opera

视口:手机网页的大小

`

• name：要设置的属性，viewport表示视口
• content：要设置的内容
• width=device-width：设置视口宽度与设备宽度一致
• initial-scale=1.0：设置视口初始化缩放为1（不缩放）
• user-scalable=no：设置视口不允许用户缩放（绝大多数手机网页都是不能缩放的）
• 其他属性介绍
  • maximum-scale=5.0：设置视口最大缩放比例为5，如果禁止缩放该属性设置无效
  • m-scale=0.5：设置视口最小缩放比例为0.5
• 小技巧: 在vscode中设置视口快捷键meta:vp + tab键

移动端布局注意点

1.水平方向不能出现滚动条

        a. 禁止用户缩放

        b. 元素宽度不能超过视口宽度

2.只适配宽度（使用百分比单位），高度使用固定px

        \* 百分比布局（流式布局）：水平方向使用百分比单位，高度使用固定px

3.盒子宽度不能受到padding和margin影响（避免出现滚动条）

        \* 解决方案：设置内减盒子 box-sizing: border-box;

流式布局 圣杯布局

a.父盒子father，宽度为100%，铺满屏幕，且box-sizing为box-border
b.设置父盒子的左右padding为60px
c.中间center子盒子宽度为100%
d.左右两边盒子通过绝对定位来实现

移动端初始化

• a.移动端需要设置所有的元素为内减模型(避免padding和border导致出现滚动条)
• b.移动端字体大小一般为12px
  • pc端默认是16px
• c.移动端默认a标签点击背景有蓝色高亮，需要取消
  -webkit-tap-highlight-color: transparent;

单标签不能添加伪元素

连写里面不写的值,取默认值

背景

背景渐变

 /* 方位名词 背景渐变属于背景图片的一种特殊情况*/
            /* background-image: linear-gradient(to right, red, green, blue); */

/* 角度的写法 */
            /* background-image: linear-gradient(45deg, red, green); */
            /* background-image: linear-gradient(135deg, red, green); */

五彩条的做法

.line {
            width: 1000px;
            height: 5px;
            /* border: 1px solid #000; */
            background: linear-gradient(to right, red 20%, green 20%, green 40%, blue 40%, blue 60%, yellow 60%, yellow 80%, pink 80% );
        }

三种方法使用一个div写出三个色块

边框

 .box1 {
            width: 100px;
            height: 100px;
            background-color: blue;
            border-left: 100px solid red;
            border-right: 100px solid green;
        }

浮动加伪元素

  .box2 {
            width: 300px;
            height: 100px;
            background-color: blue;
            margin-top: 100px;
        }
        .box2::before {
            content:'';
            float: left;
            width: 100px;
            height: 100px;
            background-color: red;

        }
        .box2::after {
            content:'';
            float: right;
            width:100px;
            height: 100px;
            background-color: green;

        }

渐变

  .box3 {
            width: 300px;
            height: 100px;
            background-image: linear-gradient(to right, red 33.3333%, blue 33.3333%, blue 66.6666%,  green 66.6666%);
            margin-top: 100px;
        }

渐变进度条

.father {
            overflow: hidden;
            width: 1000px;
            height: 20px;
            background-color: #eee;
            margin: 100px auto;
            border-radius: 6px;
            box-shadow: inset 0 2px 2px 0 rgba(200,200, 200, .7);

        }
        .son {
            width: 50%;
            height: 20px;
            background-color: green;
            background-size: 40px 20px;
            background-image: linear-gradient(45deg,  transparent 33%,rgba(255, 255, 255, .2) 33%, rgba(255, 255, 255, .2)66%,transparent 66%);
    
        }

控制背景图片大小

background-size: 50% 20%;

/* 控制背景图片大小
cover 背景图片等比例缩放，铺满盒子，图片有可能显示不完整
contain 背景图片等比例缩放，图片显示完整，有可能铺不满盒子
只写一个数值，代表是宽，高等比例缩放，高默认值是auto
写2个值，第1个代表宽，第2个代表高
写百分比参考是盒子的宽高
只写一个百分比的值，参考是盒子的宽(不是图片的宽)
写2个值，第1个是宽，第2个是高，参考的是盒子的宽高
*/

弹性盒子

display:flex;

主轴

控制主轴的方向

flex-direction: column;
row 默认值 水平方向 自左而右
row-reverse 水平反向 自右向左
column 主轴垂直方向 自上而下
column-reverse 主轴垂直反向 自下而上

控制子元素在主轴上的对齐方式 主轴默认水平方向(自左向右)

justify-content: space-around;
flex-start 默认值 主轴开始的位置对齐 左对齐
flex-end 主轴结束的位置对齐 右对齐
center 主轴居中对齐 水平居中对齐
space-between 两端对齐 中间等距
space-around 中间等距，两边是中间的一半

控制主轴换行

flex-wrap: wrap;
子元素的宽度相加超过了父元素的宽度，默认不会换行，在一行上显示，不会溢出，按比例分配子元素的宽度
nowrap 不换行
wrap 换行

次轴 侧轴

控制子元素单行(个)侧轴(垂直)对齐

align-items: center;
弹性盒子可以更好的控制父元素里边的子元素 主轴默认水平方向 侧轴默认垂直方向

stretch 默认值 拉伸 子元素不设置高度或者设置为auto，子元素拉伸成父元素高度一样
flex-start 侧轴开始的位置对齐，顶对齐
flex-end 侧轴结束的位置对齐 底对齐
center 侧轴居中对齐 垂直居中

多行侧轴(垂直)对齐

stretch 拉伸 子元素不设置高度，或者高度为auto的时候，拉伸成父元素几分之一
flex-start 侧轴开始的位置对齐 顶对齐
flex-end 侧轴结束的位置对齐 底对齐
center 侧轴居中对齐 垂直居中
space-between 两端对齐，中间等距
space-around 中间等距，两边是中间的一半

子元素属性

子元素有固定宽度 1flex宽度=(父元素宽度-固定宽度)/子元素总flex

align-self 控制单个子元素垂直对齐

auto 会跟着align-items的值
stretch 拉伸
flex-start 侧轴开始的位置对齐
flex-end 侧轴结束的位置对齐
center 侧轴居中

order值越小，排序越靠前

默认值:order: 2;

flex-flow

是flex-direction和flex-wrap属性的复合属性 用于设置或检索弹性盒模型对象的子元素排列方式

注意

1.弹性盒子控制子元素布局，只对亲儿子有效
2.弹性盒子的子元素照样可以作为弹性盒子使用
3.弹性盒子不脱标，如果父元素不设置高度，里边的子元素会把高度撑开
4.父元素弹性盒子，里边的子元素不用考虑显示模式，都可以以设置宽高

opacity控制透明度 取值范围0-1

媒体查询

值 描述
all 用于所有多媒体类型设备
print 用于打印机
screen 用于电脑屏幕，平板，智能手机等。

条件

@media(min-width: 769px) and (max-width: 992px) {
body {
background-color: blue;
}
}

从小往大写

    body {
            background-color: red;
        }
       @media(min-width: 768px) {
            body {
                background-color: blue;
            }
        }

        @media(min-width: 992px) {
            body {
                background-color: green;
            }
        }

从大往小写

 body {
            background-color: red;
        }

        @media(max-width: 1200px) {
            body {
                background-color: green;
            }
        }

        @media(max-width: 992px) {
            body {
                background-color: blue;
            }
        }

媒体查询引入资源
针对不同的屏幕尺寸 调用不同的css文件

less基础

定义变量

@变量名: 值;

嵌套

1.less嵌套 子元素的样式直接写到父元素里面就好了
2.如果有伪类 交集选择器 伪元素选择器 我们内层要加&

  a {
        text-decoration: none;
        &:hover {
          text-decoration: underline;
        }
       
      }

添加运算符

添加运算符的左右两侧必须敲一个空格隔开
两个数参与运算 如果只有一个数有单位 则最后的结果以这个单位为准
两个数参与运算 如果两个数都有单位 而且不一样的单位 则以第一个单位为准

rem

• em相对于自身的字体大小来说的如果本身没有参考父元素的

• rem相对于html元素 字体大小来说的

• rem的优点就是可以通过修改html里面的文字大小来改变页面中的元素的大小 可以整体控制

rem适配方案

• 1.让一些不能等比自适应的元素,达到当设备尺寸发生改变的时候,等比例适配当前设备
• 2.使用媒体查询根据不同设备按比例设置html的字体大小 然后页面元素使用rem做尺寸单位,当html字体大小变化元素尺寸也会发生变化 从而达到等比缩放的适配
• 1.最后的公式:页面元素的rem值=页面元素值(px)/(屏幕宽度/划分的份数)
  2.屏幕宽度/划分的份数 就是html font-size的大小
  3.或者; 页面元素的rem值=页面元素值(px)/html font-size字体大小

rem适配方案2

flexible.js加rem

把设备分为10份

响应式布局

一套布局适配多个屏幕

bootstrap

• boostrap的核心技术（实现响应式布局的核心技术）

  • 将屏幕以表格的形式划分为不同的区域(行row+列column)，在不同的屏幕下显示不同的区域

• 记住bootstrap中几个经典的尺寸类名后缀

• lg: 大尺寸，对应大屏pc ,在栅格系统响应式布局中对应的屏幕是 >= 1200px

• md：中尺寸，对应大屏平板ipadPro和小屏pc,在栅格系统响应式布局中对应的屏幕是 [992,1200)

• sm:小尺寸，对应平板ipad,在栅格系统响应式布局中对应的屏幕是 [768,992)

• xs:超小尺寸,对应手机移动端，在栅格系统响应式布局中对应的屏幕是<= 768

bootstrap中有两种版心容器可供使用者选择

• container：响应式版心容器
  • 默认样式：
    • 没有高度、边框、颜色
    • 左右15px的padding
  • 宽度是响应式
    • 屏幕宽度 < 768 宽度100%
    • 768 <= 屏幕宽度 < 992 宽度750
    • 992 <= 屏幕宽度 < 1200 宽度970
    • 1200 <= 屏幕宽度 < 1200 宽度1170
• container-fluid：流式版心容器
  • 默认样式：
    • 没有高度、边框、颜色
    • 左右15px的padding
    • 宽度100%

default:默认 纯白色
link:链接 a标签默认颜色
success: 淡绿色(成功/确定)
info:天蓝色(信息)
warning:橘橙色(提示/警告
danger:酒红色(失败/错误)
primary`:青色(重要)

栅格的组成部分：

• a.版心容器container（相当于html页面的container版心，相当于table表格）
  • b.row(相当于html页面的父盒子模型,相当于table中的tr)
    • c.col(相当于html页面的子盒子模型，相当于table中的tr)

在某个查询区间，将栅格隐藏，可以用隐藏的样式，这个样式包括四个：
1、.hidden-xs 在屏幕小于768时将栅格隐藏
2、.hidden-sm 在屏幕大于等于768小于992时将栅格隐藏
3、.hidden-md 在屏幕大于等于992小于1200时将栅格隐藏
4、.hidden-lg 在屏幕大于等于1200时将栅格隐藏

移动端布局总结

主流方案
1.单独制作移动端页面
京东商场手机版
淘宝触屏版
苏宁易购手机版
2.响应式页面兼容移动端(其次)
三星手机官网
移动端技术选型

• 流式布局(百分比布局)
• flex弹性布局(推荐)
• rem适配布局(推荐)
• 响应式布局
• 选择一种主要技术选型 其他技术作为辅助 这种混合技术开发

2D转换

transform

转换 变形

移动 translate

/* x是x轴移动位置 y是y轴移动位置中间用逗号分隔 */
transform: translate(x,y);
transform: translateX(100px);
代表X轴移动100px
transform: translateY(100px);
代表Y轴移动100px
不会影响到其他元素的位置
translate中的百分比单位是相对于自身元素的translate(50%,50%)
对行内标签没有效果

旋转 rotate

• transform: rotate(度数);
  单位是deg
  角度为正时,顺时针 负时 逆时针
  默认旋转的中心点是元素的中心点
• transform-origin: x y;
  /* 注意后面的参数哦x,y用空格隔开
  x y 默认转换的中心点是元素的中心点(50%,50%)
  还可以给x y设置像素或者方位名词(top bottom left center) */
• 加个过渡实现转圈效果 transition
  过渡写到本身上 谁做过渡给谁加

缩放 scale

transform: scale(x,y);
/* 注意其中的x和y用逗号分隔
transform: scale(1,1);宽和高都放大一倍,相对于没有放大
transform: scale(2,2); 宽和高都放大了2倍
transform: scale(2); 只有一个参数,第二个参数哦和第一个参数一样,相当于scale(2,2)
transform: scale(0.5,0.5);缩小
scale缩放最大的优势 可以设置转换中心点缩放 默认以中心点缩放的 而且不影响其他盒子
*/

综合写法

注意:
同时使用多个转换,其格式为:transform:translate() rotate() scale();等
其顺序会影响转换的效果(先旋转会改变坐标轴的方向)
当我们同时有位移和其他属性的时候 记得要将位移放到最前
可以实现边位移边旋转

3D转换

• 近大远小
• • x轴 水平向右 注意: x右边是正值,左边是负值
    y轴:垂直向下 注意:y下面是正值 上面是负值
    z 轴: 垂直屏幕 注意: 往外面是正值 往里面是负值
• transform:translate3d(200px,200px,200px);
  连写属性x轴 y轴 z轴
• 3d位移 translate3d(x,y,z)
• • x y不能省略 如果没有就写0
    一般用px为单位
  • translatez(120deg); 越大我们看到的物体越大
• 3d旋转: rotate3d(x,y,z)
• • xy适用左手法则 拇指指向轴的正方向
    z轴正值顺时针
  • transform:rotatez(45deg) 沿着z轴正方向旋转45deg
• 透视:perspective
• • perspective:800px;
    视距 是屏幕距眼睛的距离 一般情况下 600-1000px 加在父元素上
• 3d呈现 transfrom-style
• • 控制子元素是否开启三维立体环境
    flat 子元素不开启3d立体空间 默认的
    preserve-3d 子元素开启立体空间
    代码写给父级,但是影响的是子盒子

动画

动画是css3中具有颠覆性的特性之一 可通过设置多个节点来精确控制一个或一组动画 常用来实现复杂的动画效果
相比较过渡 动画可以实现更多的变化 更多的控制 连续自动播放等效果
使用: 先定义动画 再使用(调用)动画

动画序列

• 0%是动画的开始100%是动画的完成 这样的规则就是动画的序列
• 在@keyframes中规定某项css样式 就能创建由当前样式逐渐改为新样式的动画效果
• 动画是使元素从一种样式 逐渐变化为另一种样式的效果 您可以改变任意多的样式任意多的次数
• 请用百分比来规定变化的发生的时间 或用关键词from和to 等同于0%和100%

 定义动画
@keyframes 动画名称 {
            0% {
                width: 100px;
            }

            100% {
                width: 200px;
            }
        }
可以做多个状态的变化keyframe关键帧
里面的百分比要是整数
里面的百分比就是总的时间的划分

调用动画:
animation-name:动画名称
持续时间:
animation-duration:持续时间
animation-timing-function:速度曲线 默认ease 匀速linear
animation-delay:动画开始时间 默认0
animation-iteration-count 播放次数 默认1还有循环播放infinite
animation-direction 规定动画是否在下一周期逆向播放 默认normal alternate逆播放
animation-play-state 规定动画是否正在运行或暂停 默认是running运行 还有paused停止
简写属性里不包含animation-play-state 经常和鼠标经过等配合使用
animation-fill-mode 规定结束后的状态 保持forwards 回到起始状态backwards
animation-timing-function:规定动画的速度曲线
默认是ease 动画以低速开始 然后加快 在结束前变慢
ease-in 以低速开始
ease-out 以低速结束
ease-in-out 以低速开始和结束
steps() 指定了时间函数中的间隔数量(步长)

动画属性连写 动画名称和时间为必写项 其他的不写取默认时间
动画名称 持续时间 运动时间 何时开始 播放次数 是否反方向 动画启始或者结束的方法
animation: name duration timing-function delay iteration-count direction fill-mode;
我们元素可以添加多个动画,用逗号隔开
例如 animation:bear 1s steps(8) infinite,move 1s forward;

过渡

• 那些属性需要过渡:
  transition-property:background;
• 过渡时间:
  transition-duration:1s;
• 匀速
  transition-timing-function:linear;
• 过渡延迟:
  transition-delay:1s;
• 过渡属性连写的时候 过渡时间为必写属性 其他不写的属性取默认值
  • transition:border-radius 1s, margin-left 1s;

制作头部和底部悬浮

第一种方法弹性盒子

.con {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  .header {
    height: 46rem / 37.5;
    width: 100%;
  }
  .center {
    flex: 1;
    overflow-y: auto;
  }
  .footer {
    height: 50rem / 37.5;
    width: 100%;
  }
}

第二种方法固定定位

.con {
.header {
  position: fixed;
  width: 100%;
  height: 46rem / 37.5;
  top: 0;
  max-width: 750px;
  // left: 0;
  background-color: #fff;
}
.center {
  padding: 46rem / 37.5 0 50rem / 37.5;
  height: 100%;
}
.footer {
  position: fixed;
  bottom: 0;
  // left: 0;
  max-width: 750px;
  height: 50rem / 37.5;
  width: 100%;
  background-color: #fff;
}
}